:root {
    --folga: 20px;
    --cor-fundo: #f7f7f7;
    --cor-fundo-media: #8eb8ea;
    --cor-fundo-escura:#021938;
    --bt-primario: rgba(26, 122, 2, 0.683);
}
header nav a, footer a {
    text-decoration: none;

}
body {
    font-family: system-ui, sans-serif; /* Fonte moderna e genérica */
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    background-color: #fff;
    color: #031a38;
  }
  select, input {
    font-size:15px;
    padding: 5px;
  }
.wrapper {
    clear: both;
}
.pad {
    padding:  calc(var(--folga)*2) var(--folga);
}
.wrapper.center {
    margin: 0 auto;
}
main p {
    text-align: justify;
}

main dt {
    font-weight: bold;
}
main * + dt {
    margin-top: 10px;
}

figure.overlay {
    position: relative;
    height: 85vh;
    width: 100%;
    overflow: hidden;
}
figure.overlay figcaption {
    font-size: 40px;
    font-weight: bold;
    position: absolute;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    padding: var(--folga);
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: white;
    text-shadow: 1px 1px 10px #000000, 1px 1px 10px #ccc;
    font-size: 2rem;
    text-align: center !important;
}
figure.overlay figcaption h2,figure.overlay figcaption h3 {
    margin: 0;
}
figure.overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
#handler {
    display: none;
}
main section:nth-child(even) {
    background-color: var(--cor-fundo);
}
section h2:first-child {
    margin-bottom: calc(var(--folga) * 2);
}
header {
    background-color: var(--cor-fundo);
    padding: calc(var(--folga) * 3) var(--folga);
}
footer {
    background-color: var(--cor-fundo-escura);
    padding: calc(var(--folga) * 3) var(--folga);
    color: white;
}
footer p {
    margin: 0;
}
footer p:first-child {
    text-transform: uppercase;
    margin-bottom: var(--folga);
}
footer a {
    color: white !important;
}
footer a:not([href^='http']) {
    text-decoration: underline;
} 
.img-round {
    width: 50%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    overflow: hidden;
    transform: translate(50%);
    -webkit-transform: translate(50%);
    -moz-transform: translate(50%);
    -ms-transform: translate(50%);
    -o-transform: translate(50%);
}
.img-round img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
header h1 span {
    display: none;
}
header h1  {
    display: block;
    width: 150px;
    height: 130px;
    background: url(girafa.jpg) no-repeat 100%;
    background-size: contain;
    background-position: center center;
}
dd {
    margin-left: var(--folga);
    margin-bottom: calc(var(--folga)*2);
}


@media screen and (max-width:500px) {
    figure.overlay figcaption {

        font-size: 1.2rem;

    }
}
@media screen and (max-width:799px) {
    .wrapper.center {
        width: 100%;
    }
    .cols {
        margin: var(--folga) 0;
        width: 100%;
        display: block;
    }
    .cols > * + * {
        margin-top: var(--folga);
    }
    .cols.foto>div:nth-child(1) {
        max-width:300px;
        margin: 0 auto;
    }
    .cols.foto>div:nth-child(2) {

        margin: var(--folga) auto;
        text-align: center;
    }
    .cols.foto>div:nth-child(2) h3 {
        margin-bottom: calc(var(--folga)*2);
    }

    .handler {
        display: block;
        width: 40px;
        height: 40px;
        outline: 1px solid black;
        position: fixed;
        top: var(--folga);
        right: var(--folga);
        z-index: 101;
        cursor: pointer;
        text-align: center;
        font-size: 27px;
        background-color: white;
    }
    header {
        padding: calc(var(--folga)* 1) var(--folga);
    }
    header ul {
        position: fixed;
        top: calc(var(--folga)* 4);
        right: -100%;
        z-index: 100;
        background-color: var(--cor-fundo-escura);
        padding: var(--folga);
        padding-right: calc(var(--folga)*3);
        transition: all 1s ease-in-out;
        -webkit-transition: all 1s ease-in-out;
        -moz-transition: all 1s ease-in-out;
        -ms-transition: all 1s ease-in-out;
        -o-transition: all 1s ease-in-out;
    }
    nav a, footer a {
        color: white;
        text-decoration: ;
    }
    #handler:checked + ul {
        right: 0;
    }
    header nav li + li {
        margin-top: var(--folga);
    }
    header a {
        color: white !important;
    }
    header a i {
        min-width: 25px;
        text-align: center;
    }
    footer {
        text-align: center;
    }
    footer .cols > * + * {
        margin-top: calc(var(--folga)*3);
    }
}
@media screen and (min-width:800px) {
    .wrapper.center {
        width: 800px;
    }
    figure.overlay figcaption {
        width: 800px;
        margin: 0 auto;
    }
    .cols {
        margin: var(--folga) 0;
        width: 100%;
        display: flex;
        gap: var(--folga);
        justify-content: space-between;
    }
    .cols > * {
        width: 10%;
        flex-grow: 1;
    }    
    .cols + * {
        margin-top: calc(var(--folga)*2);
    }
    .columns {
        columns: 2;
        column-gap: calc(var(--folga)*3);
    }
    .cols.foto>div:nth-child(1) {
        width:35%;
    }
    .cols.foto>div:nth-child(2) {
        width:65%;
    }
    .handler {
        display: none;
        
    }
    header {
        position: relative;
        top:0;
        z-index: 99;
        
    }
    header .wrapper {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        gap: calc(var(--folga)*1);
    }
    header ul { 
        display: flex; 
        gap: calc(var(--folga));
        text-transform: uppercase;
        font-size:14px;
    }
    header nav {
        text-align: right;
    }
    nav a {
        color: black;
    }
    nav a.destaque {
        background-color: var(--bt-primario);
        outline: 4px solid var(--bt-primario);
        color: white;
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
    }
    nav a:hover {
        background-color: var(--bt-primario);
        outline: 4px solid var(--bt-primario);
        color:white;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
    }
    footer a {
        color: inherit;
    }
}

.cols > .c10 {
    width: 10%;
}
.cols > .c15 {
    width: 15%;
}
.cols > .c20 {
    width: 20%;
}
.cols > .c25 {
    width: 25%;
}
.cols > .c30 {
    width: 30%;
}
.cols > .c35 {
    width: 35%;
}
.cols > .c40 {
    width: 40%;
}
.cols > .c45 {
    width: 40%;
}
.cols > .c50 {
    width: 40%;
}
.cols > .c60 {
    width: 40%;
}
.cols > .c70 {
    width: 40%;
}