@font-face {
    font-family:'Lexend';
    font-weight:400;
    src: url(../assets/fonts/LexendDeca-Black.woff2) format("woff2"),
        url(../assets/fonts/LexendDeca-Black.woff) format("woff");
         
}

@font-face {
    font-family:'Lexend';
    font-weight:100;
    src: url(../assets/fonts/LexendDeca-Thin.woff2) format("woff2"),  
         url(../assets/fonts/LexendDeca-Thin.woff) format("woff");  
}
@font-face {
    font-family:'Lexend';
    weight:200;
    src: url(../assets/fonts/LexendDeca-Light.woff2) format("woff2"),  
         url(../assets/fonts/LexendDeca-Light.woff) format("woff");  
}

@font-face {
    font-family:'Lexend';
    font-weight:600;
    src: url(../assets/fonts/LexendDeca-ExtraBold.woff2) format("woff2"),  
         url(../assets/fonts/LexendDeca-ExtraBold.woff) format("woff");  
}


body{
    font-family: 'Lexend', sans-serif;
    font-weight:200;
    color:white;
    margin:0; 
    background-color: rgb(106, 191, 131);
    background-image: url("../assets/img/fontain_crop.png");
    background-size: cover;
    background-blend-mode: multiply;
    position: relative; 
    height:100vh;
}

audio {
    display: none;
}

/* header{
    
  
    background-repeat: no-repeat;
    height:100vh;
    
    border:3px blue dashed;
} */

h1{
    width:40%;
    margin: 0 3em;
    padding-top:2em;
    text-transform: uppercase;
    font-weight:200;
}

 

button{
    border:none;
    padding:0.7em 1.3em;
    background-color: rgba(43, 212, 84, 0.5);
    font-family:'Lexend';
    font-weight:400;
    color:aliceblue;
}

.start{
    font-weight:400;
    margin-top:20em;
    padding:2em 5em;
}

button:hover, a:hover{
    background-color: rgba(240, 255, 255, 0.8);
    color: rgb(1, 27, 7);
}

.btn{
    
    display:flex; 
    justify-content: center;
}
  
nav{
    margin:2em;
    position:absolute;
    top:0;
    right:0;
    font-weight:400;   
}
 
.res {
    text-decoration: none;
    color:white;
    padding:0.25em 0.5em;
    background-color: rgba(43, 212, 84, 0.5);
} 

dialog{
    background-color: rgba(66,154, 56, 0.8);
    padding:4em 0 ;
    width: 70%;
    line-height:2em;
    color:white;
    font-weight:400;
    text-align: justify;
    letter-spacing: 2;
 
}

.wrapper{
    padding:16px; 
    margin: auto;
    

}



.close{
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

.popout{

    margin-top:3em auto;
}

@media (min-width:600px){

    body{
        background-image: url("../assets/img/fontain.jpg");
        background-repeat: no-repeat;
        background-size: cover;
    }

    h1{
        margin: 0 2em;
        font-weight:400;
    }

    dialog{
        border:none;
        width:50%;
    }

}