/* ------------------- */
/* Reset               */
/* ------------------- */


/* Box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reset margins */
body,
h1,
h2,
h3,
h4,
h5,
p,
figure,
picture {
    margin: 0; 
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-weight: 400;
}

img {
    max-width: 100%;
    display: block;
}

/* make form elements easier to work with */
input,
button,
textarea,
select {
    font: inherit;
}
html:focus-within {
    scroll-behavior: smooth;

  }
  

/* remove animations for people who've turned them off */
@media (prefers-reduced-motion: reduce) {  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* set up the body */
body {
    font-family: var(--ff-sans-normal);
    font-size: var(--fs-400);
    color: hsl( var(--clr-white) );
    line-height: 1.5;
    min-height: 100vh;
    display: grid;
    grid-template-rows: min-content 1fr;
}


:root{

    --clr-dark: 230 35% 7%;
    --clr-light: 231 77% 90%;
    --clr-white: 0 0% 100%;
    --clr-plum: 271 67% 29%;
    --clr-purple: 271 61% 60%;
    --clr-pink: 322 78% 77%;
    --clr-yellow: 41 68% 93%;
    --clr-green: 112 50% 71%;

    /* font-families */
    --ff-serif:  serif;
    --ff-sans: "Barlow Condensed", sans-serif;
    --ff-sans-normal: "Barlow", sans-serif;
   /* font-sizes */
   --fs-900: clamp(5rem, 8vw + 1rem, 9.375rem);
   --fs-800: 3.5rem;
   --fs-700: 1.5rem;
   --fs-600: 1rem;
   --fs-500: 1.75rem;
   --fs-400: 0.9375rem;
   --fs-300: 1rem;
   --fs-200: 0.875rem;

}


@media (min-width: 35em) {
   :root {
       --fs-800: 5rem;
       --fs-700: 2.5rem;
       --fs-600: 1.5rem;
       --fs-400: 1rem;
   }
}

@media (min-width: 45em) {
   :root {
       /* font-sizes */
       --fs-800: 6.25rem;
       --fs-700: 3.5rem;
       --fs-600: 2rem;
       --fs-400: 1.125rem;
   }
}


  
/*----------COLORS----------*/

.bg-plum{ background-color: hsl(var(--clr-plum) );}
.bg-purple{ background-color:hsl(var(--clr-purple) );}
.bg-pink{ background-color: hsl(var(--clr-pink) );}
.bg-yellow{ background-color:hsl(var(--clr-yellow) );}
.bg-green{ background-color:hsl(var(--clr-green) );}


.text-dark{ color: hsl(var(--clr-dark) );}
.text-accent{ color: hsl(var(--clr-light) );}
.text-white{ color: hsl(var(--clr-white) );}

H1{
    font-size: 5rem;
    position:relative;
    animation: slide-up 3s;
    text-align:center;
    font-family: 'Tai Heritage Pro', serif;
    padding-bottom: 10px;
    color:#fff;
    line-height: 1em;
 }
 #home H1.section-title{
  font-size: 8rem;
  position:relative;
  animation: slide-up 3s;
  text-align:center;
  font-family:'Allura', cursive;
  padding-bottom: 10px;
  color:#fff;
  line-height: 1em;
  padding-top: 60px;
}
 h2{
    font-size: 2rem;
    position:relative;
    animation: slide-up 3s;
    text-align:center;
    font-family: 'Tai Heritage Pro', serif;
    padding-bottom: 10px;
    color:#fff;
    line-height: 1em;
 }
 h3{
  font-size: 1.7rem;
  position:relative;
  animation: slide-up 3s;
  text-align:center;
  font-family: 'Tai Heritage Pro', serif;
  padding-bottom: 10px;
  color:#fff;
  line-height: 1em;
}

 .d-block{
    display:block;
}

.grid {
    display: block;
}
.full-hj{
    height:100vh;
}


  /*PAGES*/

#home{
    background-color: var(--clr-pink);
    background-image: url(./img/hero1.jpg);
    color:white;
    text-align: center;
    background-attachment: fixed;
    background-size: cover;
    padding-top:18rem;
   
}

#about{
    background-color: var(--clr-pink);
    background-image: url(./img/red.jpg);
    text-align: center;
    background-attachment: fixed;
    background-size: cover;
    padding-top:4.5rem;
}
#lessons{
background-image: url(./img/larare.jpg);
background-attachment: fixed;
background-position: center;
  background-size: cover;
}
#lessons h1{

    font-size: 4rem;
    padding-top: 6rem;
    padding-bottom: 2rem;
}
#tassels{
padding-top: 5rem;
height:100%;
padding-bottom: 2rem;
}


#contact{
  background-image: url(./img/bg11.jpg);
  background-attachment: fixed;
  background-position: center;
    background-size: cover;
    text-align: center;
    padding-top: 5rem;
}
#drdick{
    padding-top: 6rem;
    background-image: url(./img/drdick.jpg);
    background-attachment: fixed;
    background-position: center;
      background-size: cover;
}
#assets{
    padding-top: 6rem;
    background-image: url(./img/assets2-s.jpg); 
    background-attachment: fixed;
    background-position: center; 
}
#assets h1{
    font-size: 4rem;
    padding-bottom: 2rem;
}
form{
    width:60vw;
    margin:0px auto;
    padding:2rem;
    background-color: rgba(3, 3, 3, 0.7);
    border-radius: 7px;
  }
  
  input, textarea{
    color:#fff;
    border: 2px solid #fff; 
    background-color: transparent !important;
    box-shadow: inset 0 1px 5px #fff;
    width:100%;
    padding:15px;
    font-size:18px;
    font-weight: 600;
    line-height:25px;
    border-radius: 7px;
    margin-bottom:15px;
    outline:none;
    transition: all .3s ease;
  }
  form ::placeholder {
    color:rgba(0 0, 0, .7);
  }
  textarea{
   height:200px;
   resize:vertical; 
  }
  .submit{
    width:100%;
    padding:10px 0;
    font-size: 22px;
    border-radius: 7px;
    border:none;
    background-color:hsl(var(--clr-pink) ) !important;
    color:#fff;
    text-transform: uppercase;
    cursor: pointer;
    transition: all ,3s ease;
  }
  .submit:hover{
    background-color:hsl(var(--clr-purple) ) !important;
    box-shadow: none;
    font-size: 27px;
    transition: all ,1s ease;
  }
.txt-box{ 
    width:70%;
    background-color: rgba(3, 3, 3, 0.8);
    border-radius: 0.5em;
    margin:11rem auto 0;
    padding:2em;

}

#container{
    width:75vw;
    margin: 0 auto 0;
    display:grid;
    grid-template-columns:200px, auto  ;
   
}

.tassel{
    margin-bottom: 1rem;
    background-color: rgba(3, 3, 3, 0.8);
    border-radius:0.5em;
    padding:1em;
    align-items:center;
    text-align:center;
}






/*acts*/
#acts{
    padding-top: 6rem;
background-color: hsl(var(--clr-purple) );
display:grid;
place-items: center;
padding-bottom: 2rem;
}
.bg1{
    background-image: url(img/bg1.jpg);
}
.bg2{
    background-image: url(img/bg.jpg);
}

.bg3{
    background-image: url(img/bg4.jpg);
}
.bg4{
    background-image: url(img/bg5.jpg);
}
.bg5{
    background-image: url(img/bg3.jpg);
}

.bg6{
    background-image: url(img/bg6.jpg);
}
.bg7{
  background-image: url(img/bg7.jpg);
}

.bg8{
  background-image: url(img/bg8.jpg);
}
.bg9{
  background-image: url(./img/bg9.jpg);
}
.card{
    color:hsl(var(--clr-light) );
    background-size: cover;
    padding:10rem 0 0;
    max-width:35ch;
    border-radius:0.5rem;
    overflow:hidden;
    transition:transform 500ms ease;
 margin:2rem;
    
}
.card p{
margin-top:1rem;
}

 .card-content{ 
    --padding:1.5rem;
    padding:var(--padding);
background: linear-gradient(
    hsl(0 0% 0% / 0),
    hsl(0  0% 0% / 0.5) 20%,
    hsl(0 0% 0% / 1)
);
 }
 @media(min-width:90rem) {
  #home H1.section-title{
    font-size: 15rem;
    position:relative;
    animation: slide-up 3s;
    text-align:center;
    font-family:'Allura', cursive;
    padding-bottom: 10px;
    color:#fff;
    line-height: 1em;
    padding-top: 60px;
  }
 .card-content{
transform:translateY(73%);
transition: transform 500ms ease;
}  
.card:hover .card-content,
.card:focus-within .card{
    transform:translateY(0); 
    transition-delay: 300ms;
  }
  .card:focus-within .card-content{
    transition-duration: 0ms;
  }
  .card-content > *:not(.card-title){ 
    opacity:0;
    transition: opacity 1000ms linear;
    }
    .card:hover .card-content > *:not(.card-title), 
.card:focus-within .card-content > *:not(.card-title)
{ 
    opacity: 1;
    transition-delay: 500ms;
}
.card-title::after{
transform: scaleX(0);
}
}

 .card-title{ 
    position:relative;
    width:max-content;
    max-width:100%;
   
} 
  .card-body{ 
    color:rgb(255 255 255 / 0.85);
  }

 .card-title::after{
    content:"";
    position:absolute;
    height:4px;
    background-color: hsl(var(--clr-green) );
    width:calc(100% + var(--padding));
    left:calc(var(--padding) * -1);
    bottom:0;
    transform-origin: left;
    transition:transform 500ms ease;
 }
.card:hover .card-title::after, 
.card:focus-within .card-title::after{
transform: scaleX(1);
}
 .play-btn{ 
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    color:hsl(var(--clr-dark) );
    background-color: hsl(var(--clr-green) );
    padding:0.5em 1.25em;
    border-radius:0.25rem;
 }  
 .play-btn:hover,
 .play-btn:focus{ 
    background-color: hsl(var(--clr-purple));
    color:hsl(var(--clr-light) );
 }



  /*animation text*/
  
  @keyframes fade-in-des{
    0%{
        transform:translateX(-100%);
    }
    100% {
       transform:translateX(0%); 
    
    }
0%{
    opacity: 0;
}
    50%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

@keyframes fade-out-des {
    100%{
        opacity:0;
    }
    0%{
        opacity: 1;
    }
}
    @keyframes slide-up {
        0%{
            transform:translateX(-100vw);
        }
        100% {
           transform:translateX(0%); 
        

    }
    
  }

/*NAV*/
.nav{
    height:auto;
    margin-top:-5px;
    background-color:hsl(0 0% 00% / .75);
    position: fixed ;
    width:100%;
    z-index:3;
    font-family: 'Montserrat', sans-serif;
    
  }
  @supports (backdrop-filter: blur(1rem)){
    .header{
        backdrop-filter: blur(1rem); 
        background-color:hsl(0 0% 100% / .1); 
    }
}
.nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
  
  }
  .nav ul a{
    display:block;
    padding: 5px 5px;
    text-decoration:none;
    color:var(--clr-white);
  }
  .nav ul a:hover,
  .nav ul a:focus
  {
  
    background-color:hsl(0 0% 100% / .1); 
    color: var(--clr-pink);
    color:var(--clr-primary);
    font-weight: bold;
  }
  
  .nav .menu{
    clear:both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .nav .menu-icon{
    float:right;
    padding:28px 20px;
    position:relative;
    cursor: pointer;

  }
  .nav .menu-icon .nav-icon{
    background:#333;
    display:block;
    height:2px;
    width:18px;
    position:relative;
    transition: .2s ease-out;
  }
  .nav .menu-icon .nav-icon:before{
    background:#333;
    content:"";
    display:block;
    height:100%;
    position:absolute;
    width:100%;
    top:5px;
    transition: all .2s ease-out;
  }

  .nav .menu-icon .nav-icon:after{
    background:#333;
    content:"";
    display:block;
    height:100%;
    position:absolute;
    width:100%;
    top:-5px;
    transition: all .2s ease-out;
  }
  .nav .menu-btn{
    display:none;
  }
  .nav .menu-btn:checked ~ .menu{
    max-height:350px; 
  }
  .nav .menu-btn:checked ~ .menu-icon .nav-icon{
  background:transparent;
  }
  .nav .menu-btn:checked ~ .menu-icon .nav-icon:before{
   transform: rotate(-45deg); 
   top:0;
  }
  
  .nav .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg); 
    top:0; 
  }

 /*fullscreen*/
@media(min-width:900px){

    .flex {
        display: flex;
     gap:1rem;
    }
    .grid{
    display:grid;
    gap:1rem;
    grid-template-columns: repeat(3, 1fr);
    }
    #home{
     
      background-image: url(./img/hero1.jpg);
    }
    #about{
      background-image: url(./img/bg1.jpg);
      background-attachment: fixed;
      background-position: center;
        background-size: cover;
        padding-top: 10rem;
     }

    .txt-box{
      margin-top: 8rem;
        width:60%;
        background-color: rgba(3, 3, 3, 0.8);
        border-radius: 0.5em;
        margin:3rem auto 0;
        padding:2em;
    }
    #contact{
      background-image: url(./img/bg11.jpg);
      padding-top: 12rem;
    }
    #lessons{
      background-image: url(./img/lesson.jpg);
      background-attachment: fixed;
      background-position: center;
        background-size: cover;
        padding-top: 12rem;
      }
    #drdick{
      padding-top: 6rem;
      background-image: url(./img/drdick.jpg);
      padding-top: 12rem;
  }
  #assets{
    padding-top: 6rem;
    background-image: url(./img/assets2.jpg);
    padding-top: 8rem;  
}
#assets .txt-box{
  margin-top: 12rem;
}
#container{
    width:75vw;
    margin: 0 auto 0;
    display:grid;
    grid-template-columns:100% ;
    grid-template-rows: 1fr auto;

}
.tassel{
border-radius:0.5em;
padding:1em;
}

 #wrapper {
    width: 100vw;
    height:100vh;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    scroll-behavior: smooth;
    }
    section {
        justify-content: center;
       align-items: center;
       width:100vw;
       min-height:100vh;
       scroll-snap-align: start;
       }

    .flex {
        display: flex;
     gap:1rem;
    }
    .grid{
    display:grid;
    gap:0.2rem;
    grid-template-columns: repeat(4, 1fr);
    }
H1{
    font-size: 9rem;
    position:relative;
  
    animation: slide-up 3s;
    text-align:center;
    font-family: 'Tai Heritage Pro', serif;
    Line-height:8rem;
    padding-bottom: 10px;
    padding-top:20px;
 }



 #assets h1{
    font-size: 9rem;
    position:relative;
    animation: slide-up 3s;
    text-align:center;
    font-family: 'Tai Heritage Pro', serif;
    Line-height:8rem;
    padding-bottom: 10px;
}
#lessons h1{
  font-size: 8rem;
  position:relative;
  animation: slide-up 3s;
  text-align:center;
  font-family: 'Tai Heritage Pro', serif;
  Line-height:8rem;
  padding-bottom: 10px;
}
#lessons .txt-box{
 
width: 70%;

}
}


  @media only screen   
  and (min-width : 768px)   
  and (max-width : 1024px) {
#wrapper{
  border: solid 5px red;
} }

@media(min-width:90em){
    .flex {
    display: flex;
    gap:1rem;
    }
    .nav ul{
      width:100vw;
      margin : 20px auto;
      display:flex;
      justify-content: center;
      text-align: center; 

    }
  
    .nav li a{
      padding:10px 15px;
    }
    .nav .menu{
      clear:none;

      max-height:none;
    }
    .nav .menu-icon{
      display:none;
    } 

        #container{
            width:75vw;
            margin: 0 auto 0;
            display:grid;
            grid-template-columns:100% ;
            grid-template-rows: 1fr auto;
        
        } 
        .tassel{
            margin-bottom: 2rem;
            background-color: rgba(3, 3, 3, 0.8);
        }
        #home{
     
          background-image: url(./img/hero1.jpg);
        }
        #about{
          background-image: url(./img/bg1.jpg);
          background-attachment: fixed;
          background-position: center;
            background-size: cover;
            padding-top: 12rem;
         }
    
        .txt-box{
          margin-top: 8rem;
        }
        #contact{
          background-image: url(./img/bg11.jpg);
          padding-top: 12rem;
        }
        #lessons{
          background-image: url(./img/lessons.jpg);
          background-attachment: fixed;
          background-position: center;
            background-size: cover;
            padding-top: 12rem;
          }
        #drdick{
          padding-top: 6rem;
          background-image: url(./img/hero2.jpg);
          padding-top: 12rem;
      }
      #assets{
        padding-top: 6rem;
        background-image: url(./img/assets2.jpg);
        padding-top: 8rem;  
    }
    #assets .txt-box{
      margin-top: 12rem;
    }
}