:root {
    --cor-bg: black;
    --cor-texto: white;
    --cor-h1: #a3956d;
    --cor-social: #37ac02;
    --imagem-bg: url(../images/ceu.jpg);
    --imagem-perfil: url(../images/perfil_g-removebg-preview.png);
    --bloquio: none;
    --cor-transparente: #0000007a;
    --font-titulos: 'Satisfy', cursive;
    --font-textos: 'Sofia Sans Extra Condensed', sans-serif;
}


* {
    padding: 0;
    margin: 0;
}



html,
body {
    box-sizing: border-box;
    font-family: var(--font-textos);
}

body {
    background-image: var(--imagem-bg);
    background-position: center;
    background-size: cover;
}

p {
    letter-spacing: 1px;
}

.contato {
    display: inline-block;
    padding-left: 1%;
    width: 68%;
}

.agenda .contato {
    display: block;
    background-color: var(--cor-transparente);
    margin-top: 10px;
    width: 100%;
}

header {
    width: 100%;
    height: 7vh;
    background-color: var(--cor-transparente);
    color: var(--cor-texto);
}

header nav {
    display: none;
    width: 70%;
}

header .logo {
    display: inline-block;
    width: 30%;
    color: var(--cor-h1);
}

header .logo img {
    padding-left: 2%;
}

header .logo h1,
header .logo img {
    display: inline-block;
}

header .logo h1,
header ul {
    position: relative;
    top: -10px;
}

header .logo h1 {
    padding-left: 1%;
    font-family: var(--font-titulos);
}

header ul,
header .logo {
    margin-top: 0.6%;
}

header ul {
    text-align: right;
    padding-right: 2%;
    font-weight: 600;
}

header ul li {
    display: inline-block;
    padding-left: 2%;

}

main {
    width: 100%;
    height: 93vh;
    background-image: var(--imagem-perfil);
    background-position: calc(100% + 270px) bottom;
    background-size: contain;
    background-repeat: no-repeat;
}

.container {
    margin: 0 5%;
}

main {
    overflow: auto;
}

main .lema {
    padding: 15% 0 0;
    width: 100%;
    text-align: center;
    color: var(--cor-texto);
}

main .lema img {
    width: 150px;
}

main .agenda {
    width: 100%;
}

main .lema h1 {
    font-size: 5rem;
    color: var(--cor-h1);
    font-family: var(--font-titulos);
}

main .lema h3 {
    font-size: 1.2rem;
    letter-spacing: 1.5px;
    padding-bottom: 7%;
    position: relative;
    top: -22px;
    left: -40px;
}

main .bio {
    color: var(--cor-texto);
    width: 75%;
}

main .bio h1 {
    color: var(--cor-h1);
    font-weight: bolder;
    padding: 2% 0;
}

main .bio p {
    background-color: var(--cor-transparente);
    padding: 2%;
    font-size: 1.2rem;
    text-align: justify;
}

main .agenda {
    padding-top: 3%;
    width: 75%;
    color: var(--cor-texto);
}

main .agenda h1 {
    color: var(--cor-h1);
    font-weight: bolder;
}

main .agenda h4 {
    padding-bottom: 10px;
}

footer {
    width: 100%;
    margin-top: 2%;

    background-color: var(--cor-transparente);
}

footer .logo {
    display: inline-block;
    width: 48%;
    text-align: right;
    position: relative;
    top: 6px;
}

footer .logo img {
    position: relative;
    top: 5px;
    padding-right: 8px;
}

footer .logo h1 {
    margin-right: 5%;
    display: inline-block;
    position: relative;
    top: -6px;
    font-family: var(--font-titulos);
    color: var(--cor-h1);
    font-weight: bolder;
}

.section-head {
    text-align: right;
    position: relative;
    top: -10px;
}

.agenda .section-head {
    text-align: center;
    padding-top: 20px;
}

.section-head .section-title,
.section-head h1 {
    display: inline-block;
}

.agenda .section-head .section-title {
    background-color: #006400;
    padding: 2%;
    border-radius: 5px;
    -webkit-box-shadow: 3px 8px 20px 6px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 3px 8px 20px 6px rgba(0, 0, 0, 0.75);
    box-shadow: 3px 8px 20px 6px rgba(0, 0, 0, 0.75);

}

.section-head a:link {
    color: var(--cor-texto);
    text-decoration: none;
}

.section-head a:hover {
    color: var(--cor-h1);
    text-decoration: none;
}

.section-head a:visited {
    color: var(--cor-h1);
    text-decoration: none;
}

.section-head p,
.section-head i {
    padding: 0.5% 0 0.5%;
}

.section-head>.section-title>span {
    display: inline-block;
}

.section-head .fa,
.section-head .fab,
.section-head .fas {
    color: var(--cor-social);
}

.section-head sub {
    position: relative;
    font-size: .75em;
    line-height: 0;
    vertical-align: baseline;
}

.section-head h1 {
    color: var(--cor-h1);
    padding-top: 1%;
}

.agenda .section-head h1 {
    display: block;
}
.social {
    display: inline-block;
    text-align: left;
    padding-left: 1%;
    padding-bottom: 0.5%;
    width: 50%;
}

.ot-socials {
    margin-top: 1px;
    padding: 0 2%;
}

.ot-socials span {
    font-family: "Montserrat", sans-serif;
    display: inline-block;
    font-weight: 600;
    color: var(--cor-texto);
    font-size: 12px;
    line-height: 35px;
    margin-right: 6px;
    vertical-align: top;
}

.ot-socials a {
    border: 1px solid;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    color: var(--cor-social);
    display: inline-block;
    text-align: center;
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 35px;
    margin-left: 6px;
}

.ot-socials a:hover {
    color: var(--cor-h1);
}

@media screen and (max-width:768px) {
    header .logo {
        width: 70%;
        display: none;
    }

    .contato {
        width: 100%;
    }

    main {
        background-position: calc(100% + 285px) bottom;
    }
}

@media screen and (max-width: 568px) {
    header {
        height: 9vh;
    }

    main {
        height: 91vh;
    }

    main {
        background-position: calc(100% + 240px) bottom;
    }

}

@media screen and (max-width: 488px) {
    main {
        background-position: calc(100% + 185px) bottom;
    }

    main .lema h1 {
        font-size: 3.4rem;
    }

    main .lema h3 {
        font-size: 0.9rem;
        letter-spacing: 0.7px;
        top: -17px;
        left: -29px;
    }

    footer .logo {
        width: 100%;
        text-align: left;
    }

    footer .logo img {
        padding-left: 2%;
    }

}

@media screen and (max-width: 375px) {
    header {
        height: 12vh;
    }

    main {
        height: 88vh;
    }

    main {
        background-position: calc(100% + 150px) bottom;
    }

    .social {
        width: 95%;
        padding-top: 4px;
    }
}