@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;700&family=Roboto:wght@100;300;500;700&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: var(--lato-cursiva);
}

:root {

    /* Cores de fundo (Background) */
    --background-page: #FFF9E7;
    --background-sobre: #F8CD53;
    --background-footer: #29282B;

    /* Cores de fonte */
    --cor-fonte-padrao: #000000;
    --cor-fonte-nav: #FFFFFF;
    --cor-fonte-by: orange;
    --cor-fonte-button-hover: yellow;

    /* Fontes da pagina */
    --lato-roboto: 'lato', Roboto;
    --lato-cursive: 'lato', cursive;

    /* Coree de Efeito */
    --cor-sombra: #C0C0C0;
    --cor-sombra-hover: #191970;
    --cor-button-hover: #191970;
    --cor-placeholder-effect: #191970;

    --height-padron: 10px;
    --boder-radius-padron: 20px;
}

body {
    background-color: var(--cor-sombra);
}

section {
    margin: var(--height-padron);
    border-radius: var(--boder-radius-padron);
    background-color: var(--background-page);
}

.menu-inicial {
    display: flex;
    height: 110px;
    padding: 10px;
    align-items: center;
    justify-content: space-between;
    background-color: var(--background-footer);
}

.menu-inicial>a {
    float: left;
    margin: var(--height-padron);
}

.menu-inicial>a>img {
    border-radius: 100%;
}

.menu-inicial-itens {
    flex-direction: row;
    margin-right: 25%;
    margin-top: 30px;
}

.menu-inicial-itens>li {
    padding-left: 25px;
}

.menu-inicial-itens>li>a {
    text-decoration: none;
    color: var(--cor-fonte-nav);
}

main {
    display: inline;

    padding-bottom: 80px;
    text-align: center;
    background-color: var(--cor-sombra);
}

#about-me {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    margin-top: 20px;
    padding: 10px;
}

#resume {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding: 10px;
}

#resume>a{
    height: 20px;
    width: 150px;
    text-decoration: none;
    background-color: var(--background-footer);
    color: var(--cor-fonte-nav);
    border-radius: 20px;
    text-align: center;
    margin: 10px 5px;
}

#resume>h1,
#resume>hr,
#resume>object,
#card-contact>h1,
#card-contact>hr,
#card-network-contact>h1,
#card-network-contact>hr,
#about-me>h1,
#about-me>hr,
#about-me>div,
#about-me>h3,
#videos>hr,
#videos>h1,
#videos>h2,
#videos>h3,
h3,
label {
    margin: var(--height-padron)
}

form {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
}

#card-contact {
    display: flex;
    flex-direction: column;
    align-content: center;

}

#card-network-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    padding: 10px;
}

.skills,
.skill-img {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    padding: 10px;
}

#videos {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding: 10px;
    align-items: center;
}

p {
    margin-bottom: 1.5rem;
    font-size: 1.10rem;
    margin: var(--height-padron)
}

ul {
    list-style-type: none;
    display: flex;
}

footer {
    position: absolute;
    height: 100px;
    width: 100%;
    margin-top: 20px;
    display: flex;
    background-color: var(--background-footer);
    justify-content: center;
}

.box-footer {
    display: flex;
}

.footer-img {
    align-items: center;
    padding-right: 10px;
    padding-left: 10px;
}

.footer-directs {
    display: flex;
    color: var(--cor-fonte-nav);
    align-items: center;
    padding-right: 20px;
}

iframe {
    border-radius: 5%;
}

@media (min-width: 800px) {
    iframe {
        width: 560px;
        height: 315px;
    }
}

@media (max-width: 400px) {
    iframe {
        width: 250px;
        height: 130px;
    }

    footer {
        position: relative;
        height: 100px;
        width: 100%;
        margin-top: 20px;
        display: flex;
        background-color: var(--background-footer);
        justify-content: center;
    }
}