@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Color+Emoji&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Pacifico&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik+Moonrocks&family=Tangerine:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Comfortaa:wght@300..700&family=Host+Grotesk:ital,wght@0,300..800;1,300..800&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Color+Emoji&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Pacifico&family=Playwrite+GB+S:ital,wght@0,100..400;1,100..400&family=Raleway:ital,wght@0,100..900;1,100..900&family=Rethink+Sans:ital,wght@0,400..800;1,400..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Rubik+Moonrocks&family=Tangerine:wght@400;700&display=swap');
h1{
    font-family: "Josefin Sans";
}
body{
    font-family: "Raleway";
    margin: 0px;
   padding: 0px;
   
}
header{
    background-color:#3b4b36 ;
    padding: 25px;
    text-align: center;
}
h1 strong{
color: white;
}
h1{
    color:#688b5b;
    text-align: center;
    padding-top: 25px;
}
img {
    max-width: max-content;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}
nav a {
    color: white;
    text-decoration: none;
    text-align: center;
    margin: 15px;
    padding: 5px;
    
}
nav a:hover {
    background-color: #688b5b;
    transition: 0.5s;
}
nav {
    padding: 25px;
    padding-top: 0px;
    display: flex;
    flex-direction: column;
}
main {
    background-color: #688b5b;
    padding: 25px;
}
section {
    display: flex;
    flex-direction: column;
}
article {
    background-color: #3b4b36;
    padding: 25px;
    text-align: justify;
    margin: 5px;
    color: white;
}
main a {
    text-decoration: none;
    color:#3b4b36 ;
    background-color: #9ccb83;
    padding: 5px;
}
header p{
    display: none;
}
footer{
    color: #688b5b;
    text-align: center;
    background-color: #3b4b36;
}

@media(min-width:640px){
     nav {
        flex-direction: row;
        padding: 10px;
        order: 2;
        justify-content: center;
    }
    header img {
        border-top: black;
        border-top-color: black;
        border-top: 25px;
        
    }
    section {
        flex-direction: row;
        justify-content: center;
    }
    header p {
        display: block;
        text-align: center;
        color: white;
    }
    nav a{
        padding: 10px;
    }
    div.top {
        display:flex ;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    
    }
}
div {
    display: block;
    unicode-bidi: isolate;
}