/*
 * CSS RESET
 */

body {margin:0;}

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

a {
  color: inherit;
  text-decoration: none;
}





/* STICKY FOOTER */
body {
display: flex;
min-height: 100vh; 
flex-direction: column;  
}	
main {
  flex: 1;
}







/*
 * SCROLL SNAP
 */
/* */

body {
  min-height: 100vh;
}

/*  .scroll-container,*/
main___NOT {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}
/* .scroll-section, */
section__NOT {
  scroll-snap-align: start;
  height: 100vh;
  /*
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  */
}














header#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-block: 2em;
    background-color: #b25838; /* darker orange */
}

footer#footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 2em;
    background-color: #114136; /* darker green */


    color: white;
    font-family: "Poppins", sans-serif;
    font-weight: 900;  
}



header#header,
footer#footer {
    padding-inline: 2em;
}


h1.logo {
    color: white;
    font-family: "Poppins", sans-serif;
    font-weight: 900;    

    a {
      &:hover {}
    }  
}


nav.desktop {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
    /* margin: 20px 0; */

    color: white;
    font-family: "Poppins", sans-serif;
    font-weight: 900;

    a {
      &:hover {}
    }

}









/*
 * "SECTIONS"
 */

.text-toon-background-monk{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
    background-size:cover;
    background-color:coral;
    color:#ffffff;
}
.text-toon-background-reed{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
    background-size:cover;
    background-color:#278e76;
    color:#ffffff;
}
.text-toon-background-juana{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden;
    background-size:cover;
    background-color:#191919;
    color:#ffffff;
}
.text-toon-monk{
    font-size:20em;
    color:transparent;
    -webkit-text-stroke:2px #fdaa4a;
    background-clip: text;
    -webkit-background-fill-color: transparent;
    -webkit-background-clip: text;
    text-shadow: #ee3f00;

    background-image:url('../img/monkHead.png');
        background-size: 35px;


    animation: textToonAnimation-one 100s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    
}
.text-toon-reed{
    font-size:20em;
    color:transparent;
    -webkit-text-stroke:2px #00ffc4;
    background-clip: text;
    -webkit-background-fill-color: transparent;
    -webkit-background-clip: text;
    text-shadow: #ee3f00;

    background-image:url('../img/louReedHead.png');
        background-size: 35px;


    animation: textToonAnimation-two 170s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    
}

.text-toon-juana{
    font-size:20em;
    color:transparent;
    -webkit-text-stroke:2px #c0dfd8;
    background-clip: text;
    -webkit-background-fill-color: #c0dfd8;
    -webkit-background-clip: text;
    text-shadow: #ee3f00;

    background-image:url('../img/louReedHead.png');
    background-size: 35px;
    background-color:#c0dfd8;/*mirar por que se corta*/

    animation:
                textToonAnimation-three 0,5s infinite;
               
    
}



/*
 * KEYFRAMES - CSS ANIMATIONS
 */

@keyframes textToonAnimation-one {
    0% {
        background-position: top;
    }
    50% {
         background-position: center;
    }
    100% {
        background-position: bottom;
    }
}
@keyframes textToonAnimation-two {
    0% {
        background-position: top right;
    }
    50% {
         background-position: center center;
    }
    100% {
        background-position: bottom left;
    }
}
@keyframes textToonAnimation-three {
    0% {
        top:-50%;
    }
    100% {
         top:0%;
    }
}


/*
 * TYPOGRAPHY
 */

/*fonts*/
.poppins-black {
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  font-style: normal;
}
.playwrite-au-qld-monk {
  font-family: "Playwrite AU QLD", cursive;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}