@import url('https://fonts.googleapis.com/css2?family=Monoton&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');


body {
    background-color: rgb(4, 4, 4);
    background-image: url("../images/bg.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}


h1,h2,h3,p {
    color: white
}
h1, h2, h3 {
    font-family: 'Monoton', cursive;
    font-weight: 800;
}
    /*font size will be set to 35px when the viewport width is less than 400 px, and it will increase by 1 px
    for every 100 px of viewport width */

h1 {
    font-size: clamp(35px, 4vw, 80px);
}

h2 {
    font-size: clamp(30px, 4vw, 50px);
}

p {
    font-size: clamp (17px, 4vw, 23px);
    font-family: 'Space Mono', monospace;
}

a:link,
a:visited {
    color: white;
}

a:hover {
    color: blue;
    text-decoration: none;
}

main, section, footer {
    width: 90%;
    margin: 0 auto;
}

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

section.container figure {
    margin: 0;
    padding: 0;
    margin-right: 15px;
}

section.container div{
    width: 33%;
}

section.container figure img {
    width: 80%;
    transition: transform 0.5s ease-in-out;
}

section.container figure img:hover {
    transform: scale(1.1);
    filter: drop-shadow(10px 10px 30px rgba(255, 255, 255, 0.905));
}   

/* changes below*/
@media (max-width: 768px) {
    section.container {
        flex-direction: column;
    }
    section.container div {
        width: 100%;
        margin-bottom: 130px;
    }
    section.container figure img:hover {
        transform: scale(1)
    }
}

section.container figure summary {
    cursor: pointer;
}

footer {
    display: flex;
    justify-content: center;
}