@import url('https://fonts.googleapis.com/css2?family=Handjet:wght,ELSH@100..900,2&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Press+Start+2P&display=swap');

body {
    background-color: darkblue;
    text-align: center;
    font-family: "Montserrat", sans-serif;
}

header {
    background-color: darkgray;
}

h1 {
    font-family: "Press Start 2P", system-ui;
}

h2,h3 {
   font-family: "Handjet", sans-serif; 
}

header a , footer a {
    text-decoration: none;
    background-color: lightblue;
    color: black;
    padding: 10px 15px;
    border-bottom: 4px solid black;
    border-right: 4px solid black;
}

header a:hover , footer a:hover {
    background-color: rgb(70, 87, 242);
    color: white;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
}

main {
margin: 70px;
background-color: mintcream;
}

header,nav,section {
    padding: 10px;
}

aside img {
    width: 200px;
    max-width: 95%;
}

aside img:hover {
    width: 250px;
}

footer{
    background-color: darkgrey;
}

ul {
    list-style-position: inside;

    padding: 0 ;
}

img {
    border: 3px solid black;
    
}

a {
    display: inline-block;
}

@media (max-width: 600px) {

    main {
        margin: 20px;
    }

    h1 {
        font-size: 28px;
    }

    header, nav, section {
        padding: 15px;
    }

    nav img {
        width: 90%;
        max-width: 350px;
    }

    section {
        display: block;
    }

    aside img {
        width: 80%;
        max-width: 200px;
    }

    aside img:hover {
        width: 80%;
    }

    header a, footer a {
        padding: 8px 10px;
    }
}