:root{
    /* Color styles */
    --text: #352e20;
    --accent1: #b2ebf1;
    --accent1-dark: #ffd900;
    --accent2: #b2f4e0;
    --accent2--dark: #e8e263;
    --bg: #F1F1F8;
    --bg-light: #FFFFFF;
    
    --margin-outside: 1rem;
    --margin-bottom: 3rem;

    @media screen and (min-width:850px) {
        --margin-outside: 4rem;
        --margin-bottom: 6rem;
        
    }
   
    --max-width:80rem;
    
    

    

}

body{
    font-family: "PT Sans", sans-serif; 
    color: var(--text);
    background-color: var(--bg);
}
.button{
    font-size: 1.125rem;
    text-decoration: none;
    border: var(--text) 1px solid;
    border-radius: 0.5rem;
    padding: 0.5rem 1.5rem;
    background-color: var(--accent2);
    font-weight: bold;

}

html{
    @media screen and (min-width:1100px) {
        font-size: 1.1rem;
    } 
    @media screen and (min-width:1200px) {
        font-size: 1.2rem;
    } 
}
.site-header{
    margin-top:1rem;
    margin-bottom:var(--margin-bottom);
    margin-left: var(--margin-outside);
    margin-right: var(--margin-outside);
    position: relative;
    @media screen and (min-width:850px) {
        display: grid;
        grid-template-columns: 1fr auto;
        margin-top: 3rem;
        max-width: var(--max-width);
        margin-left: auto;
        margin-right: auto;
        padding-left:var(--margin-outside) ;
        padding-right:var(--margin-outside) ;
    }
    
    
}
.site-logo{
    font-family: "Changa One";
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;


} 
.site-nav{ 
    margin-top: 2rem;
    @media screen and (min-width:850px) {
       margin-top: 0;

        
    }

   
 
}
.site-nav__links {
    display: none;

    .show-menu & {
        display: block;
        animation: move-in-from-top 1s ease-in;
    }

    @media screen and (min-width:850px) {
        display: flex !important;
        
    }
    
    li{
        margin-bottom: 0.5rem;
    }
    a {
        font-size: 1.125rem;
        text-decoration: none;
        display: block;
        border:var(--text) 1px solid ;
        border-radius: .5rem;
        padding: .5rem 1rem;
        text-align: center;
        transition: padding .1s;
        


        @media screen and (min-width:850px) {
            border-radius: 0;
            padding-left: 1rem;
            padding-right: 1rem;
            border-right-width: 0;
            
        }
        &:hover{
            padding-top: .25rem;
            padding-bottom: .75rem;
        }
        &:focus{
            outline: 0;
        }
        &:focus-visible{
            outline: solid 2px var(--accent1) ;
        }
    }
    li:first-child a {
        border-top-left-radius: .5rem;
        border-bottom-left-radius: .5rem;
    }
    li:last-child a {
        border-top-right-radius: .5rem;
        border-bottom-right-radius: .5rem;
        border-right-width: 1px;
    }
    .active{
        background-color: var(--accent1);
        font-weight: bold;
        
    }
    
}
@keyframes move-in-from-top{
    form{
        transform: translate(-30%);
        opacity: 0;
    }
    to{
        transform: translateY(0);
        opacity: 1;
    }
}

.site-nav__button{
    position: absolute;
    top: -0.25em;
    right: 0;
    border:var(--text) 1px solid;
    border-radius: .5rem;
    padding: .75rem;
    transition: background-color .2s ease;

    .show-menu &{
        background-color: var(--accent1);
        svg{
            rotate: 90deg;
        }
    }

    @media screen and (min-width:850px) {
        display: none;

        
    }
    svg{
        display: block;
        transition: rotate .3s;
    }
}

.wrapper{
    @media screen and (min-width:850px) {
        max-width: var(--max-width);
        margin-left: auto;
        margin-right: auto; 
    }
    
    
}
.hero{
    background: linear-gradient(-45deg,  var(--accent2),var(--accent2--dark)100%);
    padding: 1rem 1rem 0;
    margin-bottom: var(--margin-bottom);
    

    @media screen and (min-width:850px) {
       display: grid;
       grid-template-columns: 1fr 1fr;
       align-items: center;
       margin-left: var(--margin-outside);
       margin-right: var(--margin-outside);
       border-radius: 1rem;
        padding-top: 2.5rem;
    }
}
.hero__header{
    text-align: center;
    font-family: "Changa One", cursive;
    font-size: 3rem;
    font-style: normal; 
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.09rem;
    text-align: center;

    @media screen and (min-width:850px) {
        order: 100;
        font-size: 5rem;
        text-align: left;
         
     }


    em{
        font-style: normal;
        color: var(--bg);  
    }
}
.hero__image{
    width: 100%;
    display: block;
    max-width: 25rem;
    margin-left: auto;
    margin-right: auto;
    @media screen and (min-width:850px) {
        justify-self: right;
        margin: 0;
         
     }

    




}
.quote{
    margin-left: var(--margin-outside);
    margin-right: var(--margin-outside);
    margin-bottom: var(--margin-bottom);
    text-align: center;
}
.quot__text{
    font-size: 1.5rem;
    

    @media screen and (min-width:850px) {
        font-size: 1.75rem;
        max-width:40ch ;
        margin-left: auto;
        margin-right: auto;
     }
}
.quot__attributiom{
    margin-top: 0.5rem;
    font-size: 1.25rem;

    @media screen and (min-width:850px) {
        font-size: 1.5rem;
        
     }
}
.cards{
    margin-left: var(--margin-outside); 
    margin-right: var(--margin-outside);
    margin-bottom: var(--margin-bottom);
}
.cards__header{
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    color: var(--accent1-dark);
    font-family: "PT Sans";
    font-style: normal;
    letter-spacing: 0.04;
    text-transform: uppercase;
}
.cards__wrapper{
  display: grid;  
  gap: 2rem;
  @media screen and (min-width:850px) {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    
     
 }

  
}
 .card{
    background-color: var(--bg-light);
    border-radius: 0.5;
    box-shadow: 4px 4px 16px 0px rgba(30,37,52,0.10);
    margin-bottom: 2rem;
 }
 .card__link{ 
    padding: 1.5rem;
    text-decoration: none;
    text-align: center;
    display: block;

 }
 .card__image{
    background-color: rgb(255, 245, 167);
    width: 10rem;
    height: 10rem;
    border-radius: 50%; 
    padding: 1.5rem;
    margin-left:  auto ;
    margin-right: auto;
    margin-bottom: 1.5rem;

    img{
        width: 100%;
        mix-blend-mode:multiply ;

    }

 }
 .card__header{
    font-size: 1.25rem;
    margin-bottom: 5rem;
    text-transform: uppercase;
    font-weight: bold;
    text-align: center;
    font-style: normal;
 }
  .card__text{
    line-height: 1.35;
    font-weight: 400;
  }

  .mailing-list{
    margin-left: var(--margin-outside);
    margin-right: var(--margin-outside);
    margin-bottom: var(--margin-bottom);
    text-align: center;
  }
  .site-footer{
    background-color: var(--text);
    color: var(--bg);

    p{
        padding: 3rem var(--margin-outside) ;
        
        @media screen and (min-width:850px) {
            max-width: var(--max-width);
            margin-left: auto;
            margin-right: auto;
            
        }

        
    }
}