* {
    box-sizing: border-box;
}

.main-image,
.section-image {
    max-width: 800px;
    width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    header {
        width: 92%;
        height: auto;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 16px;
    }

    header nav {
        margin: 4px;
        gap: 10px;
    }

    header nav a img {
        width: 22px;
    }

    section > div[style*="flex"] {
        flex-direction: column;
    }

    .sec {
        padding: 30px 20px;
    }

    .sec p {
        width: 100%;
        font-size: 1.2em;
    }

    .sec h3 {
        font-size: 1.8em;
    }
}

@media (max-width: 600px) {
    header {
        width: 94%;
    }

    header nav a {
        font-size: 16px;
    }

    h1 {
        font-size: 1.6em;
        line-height: 1.4;
    }

    .buttons {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .buttons a {
        width: 80%;
    }

    details {
        width: 92%;
    }
}