@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto&display=swap');


*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

main{
    display: grid;
    place-content: center;
}

body{
    
    background: #1AB7AD;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    width: 100%; 
    height: 100vh;
    
    
}


/*nav*/

nav{
    
    margin-top: 1em;
    margin-right:1.25em;
    margin-left: 1.25em;
    height: 5em;
    border-radius: 1.25em;
    background: #209DD8;
    display: flex;
    align-items: center;
    justify-content:space-between;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); 
    max-width: 123.75em;
    
    
}

.swwIcon { 
    width: 11.125em;
    height: 10.25em;
    margin-left: 0.5em;

}

.donate-btn{ 
    width: 5.625em;
    height: 1.875em;
    margin-right: 0.5em;
    background: #C0E081;
    border-radius: 2em;
    font-size: 2em;
    border: none;
    color: #f8efed;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.donate-btn:hover{
    font-size: 2.25em;
    transition-duration: 0.8s;
}

.bannerText ul{
    list-style: none;
    font-size: 2em;
    display: flex;
    align-items: center;
    gap: 3.375em;
    color: #f8efed;
}

.bannerText a{
    text-decoration:none;
    color: #f8efed;
}

.li-about:hover{
    font-size: 1.5em;
    transition-duration: 0.8s;
}

.li-help:hover{
    font-size: 1.5em;
    transition-duration: 0.8s;
}

.li-visitors:hover{
    font-size: 1.5em;
    transition-duration: 0.8s;
}


/*gabout*/

.g-about{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 1em;
    background: #F8EFED;
    border-radius: 1.5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    margin-right:1.25em;
    margin-left: 1.25em;
    gap: 1.25em;
    max-width: 123.75em;
    text-align: left;
    
}

.about{
    margin-left: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.about h1{
    font-size: 6em;
    color: #209DD8;
    font-weight: bold;
    
}

.about h2{
    font-size: 3em;    
    color: #1AB7AD;
    margin-top: 0.25em;
    font-weight: bold;
}

.about p{
    font-size: 1em;
    color: #20312E;
    margin-top: 1em;
    font-weight: normal;
    max-width: 40.75em;
}

.walterPics-about{
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
    
}

.pic-1row{
    display: flex;
    align-items: flex-end;
    gap: 0.5em;
    margin-bottom: 0.5em;
}



.walter_2{
    width: 9.6875em;
    height: 12.75em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
   
}

.walter_1{
    width: 15.875em;
    height: 20.375em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.walter_3{
    width: 8.9375em;
    height: 11.875em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.walter_5{
    width: 23.375em;
    height: 16.1875em;
    align-self: center;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}



/*about-2*/
.about-2{
    margin-top: 1em;
    display:flex;
    align-items: center;
    justify-content: space-around;
    background: #F8EFED;
    border-radius: 1.5em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    margin-right:1.25em;
    margin-left: 1.25em;
    max-width: 123.75em;
    align-self: center;
    text-align: left;
    

}

.about-2 p{
    
    font-size: 1em;
    line-height: 1.1875em;
    color: #20312E;
    width: 50%;
    font-weight: normal;
    max-width: 60.75em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
    
}

.about-2 img{
    width: 19.625em;
    height: 30.625em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    margin-left: 1em;
    margin-top: 1em;
    margin-bottom: 1em;
}

/*about3*/
.about-3{
    display: flex;
    margin-top: 1em;
    margin-right:1.25em;
    margin-left: 1.25em;
    max-width: 123.75em;
    background: #F8EFED;
    border-radius: 1.5em;
    gap: 1.25em;
    justify-content: space-around;
    align-items: center;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    max-width: 123.75em;
    text-align: left;
    
}

.about-3 p{
    font-size: 1em;
    color: #20312E;
    width: 50%;
    font-weight: normal;
    max-width: 40.75em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 1em;
}

.about-3 img{
    width: 23.875em;
    height: 26em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
}

/*g-donate*/

.g-donate{

    margin-top: 1em;
    margin-right:1.25em;
    margin-left: 1.25em;
    background: #209DD8;
    border-radius: 1.5em;
    gap: 3em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 123.75em;
    

}

.container-donate-message{
    display: flex;
}

.container-donate-message img{
    width: 14.75em;
    height: 14.75em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    margin-top: 5em;
}

.p-donate-1{
    font-family: 'Roboto';
    font-style: normal;
    font-size: 2.25em;
    text-align: center;
    color: #F8EFED;
    margin-top: 1.5em;
}

.p-donate-2{
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 2.5em;
    text-align: center;
    color: #F8EEC0;
    margin-top: 1.5em;
    margin-bottom: 1.5em;

}

.save_walter_banner-donate{
    width: 58em;
    height: 10.3125em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 2em;
}

.donate_button-donate{
    width: 20.125em;
    height: 9.4375em;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    border-radius: 2em;
    margin-bottom: 1em;
}

/*g-visitors*/

.g-visitors{
    margin-top: 1em;
    margin-right:1.25em;
    margin-left: 1.25em;
    height: 17.1875em;
    background: #20312E;
    box-shadow: 0px 4px 8px 4px rgba(48, 62, 64, 0.25); 
    border-radius: 1.5em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5em;
    max-width: 123.75em;
    
    
}

.p-visitors-1{
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 2.5em;
    text-align: center;
    color: #F8EFED;

}

.p-visitors-2{
    font-family: 'Roboto';
    font-weight: bold;
    font-size: 2.25em;
    text-align: center;
    color: #C0E081;

}


/*footer*/

footer{
    font-family: 'Roboto';
    font-weight: normal;
    font-size: 1.5em;
    text-align: center;
    color: #F8EFED;
    max-width: 123.75em;
    margin-top: 1em;
    margin-bottom: 1em;
    
}



/*
Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
    body{
        font-size: 10px;
    }

 }

Medium devices (tablets, 768px and up)
@media (min-width: 768px) { 
    
    body{
        font-size: 12px;
    }
 }

 Large devices (desktops, 992px and up)
@media (min-width: 992px) { 
    body{
        font-size: 14px;
    }

}

Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { 

    body{
        font-size: 16px;
    }
    

}

*/
@media (max-width: 1200px)
{

    body{
        font-size: 14px;
    }
}



@media (max-width: 992px)
{

    body{
        font-size: 12px;
    }
}

@media (max-width: 768px)
{

    body{
        font-size: 10px;
    }

    .g-about{
        flex-direction: column;
        justify-content: center;
        text-align: center;
        font-size: 13px;
    }

    .about-2,.about-3{
        font-size: 12px;
        

    }
}

@media (max-width: 576px)
{

    body{
        font-size: 8px;
    }

    nav{
        font-size: 6px;
    }

    .g-about{
        flex-direction: column;
        justify-content: center;
        text-align: center;
        font-size: 10px;
    }

    .about{
        margin-left: 4px;
        margin-right: 4px;
    }

    .about-2,.about-3{
        font-size: 8px;
    }

    .g-donate{
        font-size: 6px;
    }

    .g-about img{
        font-size: 10px;
    }

    .walterPics-about{
        display: flex;
        flex-direction: column;
        margin-top: 1em;
        margin-bottom: 1em;
        margin-right: 0;
        
    }

}