html {
    margin: 0;
    font-size: clamp(12px, 2vw, 17px);
}

@font-face {
    font-family: 'LacaPro_SemiBold';
    src: url("../fonts/LacaPro-SemiBold.woff") format('woff')
}

@font-face {
    font-family: 'LacaPro_Regular';
    src: url("../fonts/LacaPro-Regular.woff") format('woff')
}

@font-face {
    font-family: 'LacaText_Book';
    src: url("../fonts/LacaText-Book.woff") format('woff')
}

@font-face {
    font-family: 'LacaText_SemiBold';
    src: url("../fonts/LacaText-SemiBold.woff") format('woff')
}

.ligature {
    font-feature-settings: "dlig" 1; /* Ativa ligaduras opcionais */
}
.no_ligature {
    font-feature-settings: "dlig" 0; /* Desativa ligaduras opcionais */
}

body {
    margin: 0%;
    color: #1a1a1a;
}

h1 {
    font-family: 'LacaPro_SemiBold';
    font-size: 5rem; /* 60pt */
    line-height: 5.17rem; /* 62pt */
    text-transform: uppercase;
    margin-bottom: 3%;
}

h2 {
    font-family: 'LacaPro_Regular';
    text-transform: uppercase;
    font-size: 1.67rem; /* 20pt */
    line-height: 1.83rem; /* 22pt */
}

h3, h4, h5 {
    font-family: 'LacaText_SemiBold';
}

h3 {
    margin: 0;
    margin-bottom: 2%;
    font-size: 1.58rem; /* 19pt */
    line-height: 1.75rem; /* 21pt */
}

h4 {
    font-size: 1.42rem; /* 17pt */
    line-height: 1.58rem; /* 19pt */
    margin-bottom: 3%;
}

h5 {
    font-size: 1.2rem; /* 14.4pt */
    line-height: 1.37rem; /* 16.4pt */
    margin: 0;
}

p, a {
    font-family: 'LacaText_Book';
    margin-top: 0;
    font-size: 1.2rem; /* 14.4pt */
    line-height: 1.37rem; /* 16.4pt */
}

a {
    color: #1a1a1a;
}

a:hover {
    cursor: pointer;
}

header > aside { /* idiomas/idioms */
    align-items: center;
    display: flex;
    justify-content: right;
    margin-right: 5%;
    margin-left: 5%;
    margin-top: 2%;
    margin-bottom: 2%;
}

#favicon { /* favicon */
    width: 5%;
    position: fixed;
    margin-left: 3%;
    cursor: pointer;
    z-index: 40;
}

#back { /* back */
    position: absolute;
    top: 1%;
    margin-left: 3%;
    cursor: pointer;
    width: 15%;
}

#back > img { 
    width: 30%;
}

header > aside > h3 {
    margin: 0;
    margin-left: 2%;
    cursor: pointer;
}

header > aside > h3:hover {
    text-decoration: underline;
}

.underline {
    text-decoration: underline;
}

main {
    margin: 5%;
    margin-top: 8%;
}

#eng, #pt {
    text-transform: uppercase;
}

footer {
    margin: 3%;
    margin-top: 7%;
    margin-left: 5%;
    display: flex;
    height: 4vh;
    /*justify-content: center;*/
    align-items: center;
    gap: 2rem;
}

.with_margin {
    margin-right: 30%;
}

.top {
    margin-top: 8%;
}

/* Secções de imagens */
.scroll {
    overflow: auto; 
    white-space: nowrap;
    margin-bottom: 2%;
    width: 101vw;
    margin-left: 0;
    position: relative;
    left: -6%;
}

.scroll > img {
    padding-right: 0.5%;
    height: 50vh; 
    width: auto; 
}


@media(max-width: 750px) {
    #favicon { /* favicon */
        width: 12%;
    }
}

@media(max-width: 600px) {
    h1 {
        font-size: 4rem; /* 60pt */
        line-height: 4.17rem; /* 62pt */
    }
}

@media(max-width: 510px) {
    #favicon { 
        width: 13%;
    }

    .with_margin {
        margin-right: 25%;
    }

    .scroll > img {
        height: 35vh;
    }
}

@media(max-width: 450px) {
    .with_margin {
        margin-right: 15%;
    }

    h1 {
        font-size: 3.5rem; /* 60pt */
        line-height: 4.07rem; /* 62pt */
    }
    
    h2 {
        font-size: 1.67rem; /* 20pt */
        line-height: 1.83rem; /* 22pt */
    }

    h3 {
        font-size: 1.58rem; /* 19pt */
        line-height: 1.75rem; /* 21pt */
    }
    
    h4 {
        font-size: 1.42rem; /* 17pt */
        line-height: 1.58rem; /* 19pt */
    }
    
    h5 {
        font-size: 1.2rem; /* 14.4pt */
        line-height: 1.37rem; /* 16.4pt */
    }
    
    p, a {
        font-size: 1.5rem; /* 14.4pt */
        line-height: 1.67rem; /* 16.4pt */
    }

    header {
        margin-top: 5%;
    }

    header > aside > h3 {
        margin-left: 5%;
        font-size: 1.7rem;
    }

    #favicon { 
        width: 15%;
    }

    #back > img { 
        width: 100%;
    }

    main {
        margin-top: 15%;
    }

    footer {
        margin-top: 20%;
        gap: 1rem;
    }

    footer > a {
        font-size: 1.2rem; 
    }
}