/* BODY AND SECTIONS */
/* ----------------------------------------------------- */
/* All body and section styling available here (except for the fonts, which are declared in the defaults+fonts.css). Some properties have already been declared */

/* BODY AND SECTIONS */
/* ----------------------------------------------------- */
/* All body and section styling available here (except for the fonts, which are declared in the defaults+fonts.css). Some properties have already been declared */
/* Basteleur-Moonlight*/
@font-face  {
  font-family: 'Basteleur-Moonlight';
  src: url('Basteleur-Moonlight.eot');
  src: url('Basteleur-Moonlight.eot?#iefix') format('embedded-opentype'),
       url('Basteleur-Moonlight.woff2') format('woff2'),
       url('Basteleur-Moonlight.woff') format('woff'),
       url('Basteleur-Moonlight.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}


body {
  padding: 40px 10%;
  background-color: rgb(235, 235, 235) ;
  font-family: 'Basteleur-Moonlight';  
}

section {
  padding: 20px;
  margin-bottom: 20px;
  background-color: white;
}

section > h2 {
text-align: center;
line-height: 1;
border-bottom: 1px solid black;
padding-bottom: 8px;
}

section > em {
display: block;
margin: 8px 0;
text-align: center;
}

section > div {
  margin: 10px;
  bottom: 2px;
  }

#s1 > div {background-color: yellow; 
  margin-bottom: 2px;
  height: 70px;}
#s2 > div {background-color: #CDEAC0;}
#s3 > div {background-color: #FFFAE3;}
#s4 > div {background-color: #FF5964;}
#s5 > div {background-color: #B8F3FF;}
#s6 > div {background-color: #B298DC;}
#s7 > div {background-color: #BDC696;}



/* SECTION 1 */
/* ----------------------------------------------------- */

#s1 span {
  background-color: yellow ;
  mix-blend-mode:difference ;
}



/* SECTION 2 */
/* ----------------------------------------------------- */


#s2 > div > span {
background-color:yellow;
mix-blend-mode: difference; 
display: block;  
}



/* SECTION 3 */
/* ----------------------------------------------------- */

#s3 {
font-size: 24px;
}



/* SECTION 4 */
/* ----------------------------------------------------- */




/* SECTION 5 */
/* ----------------------------------------------------- */




/* SECTION 6 */
/* ----------------------------------------------------- */

#s6 > div:nth-of-type(3) {
  mix-blend-mode: difference;
}



/* SECTION 7 */
/* ----------------------------------------------------- */


#s1 div:first-of-type {
  display: inline;
}

#s1 div:nth-of-type(2) {
  display: inline-block;
}

#s1 div:nth-of-type(3),
#s1 div:nth-of-type(4) {
  display: block;
}

#s1 div:nth-of-type(4) {
  height: auto;
  text-align: center;
}

#s2 div {
  display: inline-block;
}

#s2 div:nth-of-type(2) {
  width: 600px;
  
}

#s2 div:nth-of-type(3) {
  width: 600px;
  display: block;
  margin: auto;
  
}

#s2 div:nth-of-type(4) {
  width: 100%;
  
}

#s2 div:nth-of-type(5) {
  width: 100vw;
  
}

#s2 div:nth-of-type(6) {
  width: 47%;
  
}

#s2 div:nth-of-type(7) {
  width: 47%;
  
}

#s2 div:nth-of-type(8) {
  width: 47%;
  
}

#s2 div:nth-of-type(9) {
  width: 47%;
  
}

#s2  div:nth-of-type(6) span {
  width: 50%;  
  }

#s2  div:nth-of-type(7) span {
    width: 50vw;  
    }

    


        #s2 div:nth-of-type(8) {
          overflow: hidden;
          
        }

        #s2 div:nth-of-type(9) {
          overflow: auto;
          
        }


        #s3 {
          font-size: 24px;
        }

        #s3 div:nth-of-type(2) {
          font-size: 15px;
          
        }

        #s3 div:nth-of-type(3) {
          font-size: 1.5vw;
          
        }

        #s3 div:nth-of-type(4) {
          font-size: 1em;
          
        }

        #s3 div:nth-of-type(5) {
          font-size: 1rem;
          
        }

        #s4 div {
          width: 50%;
          margin: auto;
        }

        #s4 div:nth-of-type(2) {
          margin-right: 0;
        
        }

        #s4 h3 {
          position: sticky;
          top: 1rem;
        }
        
        #s4 div:nth-of-type(2) h3 {
          top: 0;
          background-color: bisque;
        
        }

        #s5 div {
          width: 20%;
          position: static;
        }

        #s5 div:nth-of-type(2) {
          position: relative;
          right: 20px;
          bottom: 10px;
        
        }

        #s5 div:nth-of-type(3) {
          position: absolute;
          right: 20px;
          top: 10px;
          height: 50px;
        
        }

        #s6 {
          position: relative;
        }

        #s6 div {
          width: 50%;
        }

        #s6 div:nth-of-type(2) {
          position: absolute;
          right: 0px;
          bottom: 10px;
          width: 20%;
        
        }

        #s6 div:nth-of-type(3) {
          position: absolute;
          left: -40px;
          mix-blend-mode: difference;
        
        }

        #s7 div:nth-of-type(2) {
          top: 0px;
          left: 0px;
          margin: 0px;
        
        }