html {
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

body {
    margin: 5%;
}

h3 {
    margin: 0;
}

header {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

header > h1 {
    margin: 0;
}

#exit {
    display: flex;
    justify-content: right;
    margin: 0.5%;
    cursor: pointer;
}

main > a,
main > h3,
main > h3 > a {
    display: block;
    width: fit-content;
    padding: 2%;
    padding-left: 0;
    text-decoration: none;
}

main > h3,
main > a > h3 {
    font-size: 2.4rem; 
}

a {
    font-size: 2rem; 
}

.edicao {
    margin-left: 10%;
}

main > a:hover,
main > a::selection {
    text-decoration: underline;
    cursor: pointer;
}

section {
    position: absolute;
    right: -2%;
    top: -10%;
    z-index: -1;
    overflow-y: hidden;
}

section > img {
    height: 120vh;
}

#socials {
    margin: 0%;
    position: absolute;
    bottom: 10%;
}

#socials > a {
    font-size: 1.2rem;
}

@media(max-width: 1070px) {
    main > a,
    main > h3,
    main > a > h3 {
        padding-bottom: 2.5%;
    }
}

@media(max-width: 650px) {
    main > a,
    main > h3,
    main > a > h3 {
        padding-bottom: 3%;
    }

    section {
        right: -7%;
    }
}

@media(max-width: 550px) {
    main > a,
    main > h3,
    main > a > h3 {
        padding-bottom: 5%;
    }

    section {
        display: none;
    }
}

@media(max-width: 450px) {
    #socials > a {
        font-size: 1.5rem; /* 14.4pt */
        line-height: 1.67rem; /* 16.4pt */
    }
}

@media(max-width: 400px) {
    main > a,
    main > h3,
    main > a > h3 {
        padding-bottom: 8%;
    }
}