* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  min-height: 100vh;
  min-width: 420px;
  margin: 0 auto;
  overflow-x: hidden;
}

.content-wrapper {
  flex: 1;
  margin-bottom: 1rem;
}

:root {
  --primary-gradient: linear-gradient(blue, #222);
  --primary-color-end: black;
}

.button-link {
  box-shadow: 4px 10px 22px -6px #276873;
	background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
	background-color:#599bb3;
	border-radius:12px;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Courier New;
	font-size:20px;
	font-weight:bold;
	padding:16px 49px;
	text-decoration:none;
	text-shadow:0px 3px 2px #3d768a;
	transition: transform .2s ease-in-out;
}

.button-link:hover {
  transform: scale(1.1)
}

h1 {
  font-size: 3.2rem;
}

.morassed {
  font-size: 1.6rem;
  color: #fff;
}

p {
  color: #222
 }
 
.post-paragraph {
  color: #fff
  
}

figcaption {
  color: #222;
}

.figcaption-posts {
  font-size: 10px;
  position: absolute;
  color: #fff;
  bottom: 0
}

.container {
  align-items: center;
  background-image: url("https://images.unsplash.com/photo-1601924690478-c507163b3ba9?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8N3x8bGxhbWF8ZW58MHx8MHx8fDA%3D");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  font-size: clamp(1rem, 4vw, 2rem);
  min-height: 100vh;
  justify-content: center;
  width: 100%;
}

.main-header {
  animation: fadeIn 4s 1;
  text-shadow: 0 0 7px #222;
  transition: all 1.8s ease-in-out;
}

.main-header:active {
  transform: scale(1.05);
}

.main-container {
  display: flex;
  flex-direction: column;
  height: 60vh;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  width: 70%;
  margin: 0 auto;
}

.audio-container {
   height: 30vh;
   width: 80%;
   }

.audio-container audio {
  display: block;
  width: 100%;
  margin-top: 10px;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
}




.section {
  color: #fff;
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  width: 100%;
  margin: 2rem auto;
}

.section-container-one {
  background-image: linear-gradient(359deg,rgba(45, 0, 143, .4) 0%, rgba(10, 0, 0, .4) 100%), url("https://images.unsplash.com/photo-1515536765-9b2a70c4b333?q=80&w=872&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  width: 80%;
  border: 1px solid #222;
  border-radius: 2rem;
  box-shadow: 0 0 7px #222;
}


.section-container-one p {
   color: #fff;
}

.section-content {
  padding: 2rem;
  width: 70%;
}

.section-content-one {
  background-color: #22222277;
  border: 2px solid #fff;
  border-radius: 2rem;
  box-shadow: 0 0 7px #4948486c;
  color: #fff;
  padding: 2rem;
  width: 70%;
}



.song-bop {
  height: 600px;
  width: 60%;
  position: relative;
  z-index: 1;
  padding: 20vh 0;
  //animation: bop .94s 1s infinite;
  animation: pulse-animation 0.476s 15s 700;
  //animation: glow-pulse 0.476s infinite;
}

.background-video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  z-index: -1;    
  object-fit: cover; 
}
@keyframes bop {
 0%
  {transform: scale(1);}
 90%
 {transform: scale(1);}
 98% 
 {transform: scale(1.04)}
 
 }
 
 
@keyframes pulse-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03); /* Scales up to 110% */
  }
  100% {
    transform: scale(1);
  }
}

@keyframes glow-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.section-container-two {
  background-image: url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YmVhY2h8ZW58MHx8MHx8fDA%3D");
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 2rem;
}

.section-container-three {
  background-image:
    linear-gradient(rgba(0, 0, 255, 0.185), rgba(0, 0, 0, 0.982)),
    url("/images/IMG_0105.PNG");
  background-position: right;
  background-size: cover;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  height: 50dvh;
  width: 100%;
}

.image-container {
  border: 3px solid #fff;
  border-radius: 2rem;
  min-height: 2rem;
  width: 50%;
  min-width: 300px;
  margin: 0 auto;
  overflow: hidden;
}

.images {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.section-container-four {
  background-image:
    linear-gradient(blue, black);
  display: flex;
  flex-direction: column;
  color: #ffffff;
  height: 50dvh;
  width: 100%;
}

.section-container-five {
  background-image: url("https://plus.unsplash.com/premium_photo-1669802766533-85e0624ff1bd?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8R29kfGVufDB8fDB8fHww");
  background-size: cover;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  height: 50dvh;
  width: 100%;
}

/* Scroll Bar */
    
    
 .scroll-container {
        place-content: center;
        align-items: center;
        width: 100%;
        height: 100px;
        background-color: blue;
        margin: 2rem auto;
        overflow: hidden;
        white-space: nowrap;
       
      }
      .scroll-text {
        color: #fff;
        display: inline-block;
        padding: 1rem 0px 1rem 100%;
         animation: scroll 30s linear 3s 8;
      }

      .scroll-text:hover {
        animation-play-state: paused;
        cursor: pointer;
      }

      @keyframes scroll {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
      
.this-container {
   display: flex;
   flex-direction: row;
   gap: 4rem;
   height: 400px;
  width: 80%;
  border: 1px solid #222;
  border-radius: 2rem;
  box-shadow: 0 0 7px #222;
  padding: 2rem;
  margin: 0 auto
   
   
}
  
.this-image-container {
   width: 500px;
   aspect-ratio: 1/1;
   overflow: hidden
 }
   
.this-photo {
  height: 100%;
  width: 100%;
  object-fit: cover
}

.spin-container {
    background: linear-gradient(132deg, rgb(255, 0, 0) 0.00%, rgb(255, 213, 0) 100.00%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    width: 100%;
    perspective: 1000px;
    
}

.rotating-text {
  animation: rotate-on-scroll linear;
  animation-timeline: scroll(); 
  text-shadow: 0 0 8px #222;
  max-width: 70%;
  opacity: 0;
}

@keyframes rotate-on-scroll {
  to { transform: rotate(360deg); opacity: 1;}
}

.audio-mobile {
  display: none;
  
}

.output-div {
  display: flex;
  min-height: 30vh;
  background-image: linear-gradient(blue, black);
  color: #fff;
  font-size: 2rem;
  align-items: center;
  justify-content: center;
  text-align: center;
  
}

.time-output {
  text-align: center;
  text-shadow:
    0px 1px 0px #333,
    1px 2px 0px #222,
    3px 3px 5px #444,
   
}
      
/* POSTS PAGES */

.post-main {
  background-image: linear-gradient(1deg,rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%);
  padding: 2rem;
  
  }

.posts-container {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: auto;
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
  border: 2px solid #222;
  padding: 0;
  overflow: hidden
 
  
 }
 
.post {
   position: relative;
   display: flex;
   flex-direction: column;
   color: #fff;
   background-image: linear-gradient(blue, black);
   border-radius: 10px;
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.4);
   margin: 2rem auto;
   height: auto;
   width: 90%;
   overflow: hidden
   
}
   
.post-content{
   padding: 1rem;
   }
   
 .post:hover {
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
   transform: translateY(-4px);
   cursor: pointer
   
   }
   
.posts-image-container {
    width: 100%;
    height: 400px;
   
   
}

.post-images {
  height: 100%;
  width: 100%;
  object-fit: cover;
  bottom: 0;
  max-width: 1300px;
  position: absolute;
  z-index: -1;

   }
   


.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-image: linear-gradient(
    var(--primary-color-start),
    var(--primary-color-end)
  );
  padding: 1rem;
  color: #fff;
  position: sticky;
  left: 0;
  bottom: 0;
  width: 100%;
}

.footer h1 {
  font-size: 1.7rem;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@media (max-width: 1080px) {

  .posts-container{
  
  }

@media screen and (max-width: 768px) {
  .audio-desktop {
    display: block;
  }
  .audio-mobile {
    display: block;
  }
}

@media (max-width: 680px) {
  html {
    font-size: 79%;
  }
  .main-container,
  .section-content,
  .section-content-one {
    width: 95%;
    height: auto;
  }

  .section {
    min-height: 400px;
    padding: 1rem;
  }

  .audio-container audio {
    opacity: 1;
    visibility: visible;
  }

  .hover-text {
    opacity: 1;
    visibility: visible;
  }

  .section-content-one {
    width: 100%;
  }
  
  .song-bop {
    width: 90%
  }
  .section-container-three {
    flex-direction: column;
  }
  
 
  
  .post-main {
    padding: 1rem;
    max-width: 100%
    
    }

  .posts-container {
    display: flex;
    flex-direction: column;
    width: 95%;
    margin: 0 auto;
    border: 0;
    padding: 0.1rem
  }

  .post {
    min-height: 300px;
    width: 95%
    
 }
 .post-images {
    z-index: 0;
    position: relative
    
    }

  
  .image-container {
  min-width: 200px

}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

}