* {
  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-color-start: blue;
  --primary-color-end: black;
}



h1 {
  font-size: 3.2rem;
}

.tooth-hurty-funnies {
  font-size: 1.6rem;
  color: #222;
}

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://plus.unsplash.com/premium_photo-1695717218583-30d2c3651028?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8bGxhbWF8ZW58MHx8MHx8fDA%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 audio {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out;
  display: block;
  width: 100%;
  margin-top: 10px;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
}

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


.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: url("https://plus.unsplash.com/premium_photo-1763059186779-772d46c408aa?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  height: 400px;
  width: 80%;
  border: 1px solid #222;
  border-radius: 2rem;
  box-shadow: 0 0 7px #222
}

.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%;
}

.section-container-one:hover {
  border: 4px groove orange;
  
}

.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-image: linear-gradient(pink, orange, pink, blue);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150vh;
    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;}
}
      
/* 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 (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%;
  }
  .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;
  }
}

}