@charset "UTF-8";
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
body {
    font-size: 1.07em;
    height: 100vh;
}
div.container {
    background-color: #e3e3e3;
    min-height: 100vh;
    padding: 5px;
    display: grid;
    gap: 5px;
    grid-template: repeat(3, auto) /  1fr;
}

div.person {
    width: 100%;
    grid-area: 1 / 1 / 2 / 1;
}

div.imagem {
    text-align: center;
    padding: 5px;
    width: 100%;
}
div.apresentacao {
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
    background-color: #faf8f6;
}
div.apresentacao p {
    padding: 5px;
    text-align: justify;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
div.contato {
    background-color: rgba(255, 255, 255, 0.397);
    text-align: center;
    border-radius: 10px;
    margin: 10px auto;
    margin-bottom: 10px;
}
div.contato p{
    padding: 10px;
    margin: 7px auto;
}
div.contato p a {
    text-decoration: none;
}
#parte {
    background-color: white;
    border-radius: 10px;
}
#iconh4 {
    color:blue;
}
nav {
    width: 100%;
    text-align: center;
}
nav a {
    margin-right: 35px;
    text-decoration: none;    
    color: black;
    text-align: center;
    position: relative;
    left: 4%;
}
div.imagem {
    border-radius: 10px; 
    /*background-image: url("images.jpeg");
    background-position: center right;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: cover;*/
}
/*  mENU DE NAVEGAÇÃO */
.a, .dash, div.brilho, .pess {
    display: none;
}


div.person div.im {
    border: auto solid ; /* borda branca */
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto;}
div.imagem img {
    width: 100%;
    border-radius: 50%;
    margin: auto;
    object-fit: cover;
    display: block;
}
div .person, .principal, .rodape {
    padding: 5px;
    border-radius: 10px;
}
div.principal {
    grid-area: 3 / 1 / 4 / 2;
    margin-top: 3em;
}

div.person h4 {
    font-size: 1.5em;
    text-align: center;
    margin-bottom: 10px;
}
section {
    background-color: white;
    border-radius: 10px;
}
section h2, h3, h4, p {
    padding: 5px;
    margin: auto;
    text-align: center;
    line-height: 1.5em;
}
section div {
    font-weight: bold;
    border-radius: 10px;
}
section div.cv {
    font-weight: normal;
}
aside {
    display: none;
    border-radius: 10px;
}
p.pp {
    text-align: left;
    line-height: 1.5em;
}
div.escala {
    margin-top: 10px;
    background-color: #d0e6fd;
    padding: 5px;
    display: grid;
    gap: 7px;
    place-content: space-around;
}
.escala h4 {
    font-weight: bold;
}
.tools {
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: space-around;
}

p.itens {
    background-color: #Daeaf7;
    padding: 7px 2px;
    border-radius: 7px;
    margin: auto 20px;
}

.lista {
    display: grid;
    grid-template: repeat(2, 1fr) / repeat(2, 1fr);
    gap: 15px;
    place-items: center;
    text-align: center;
}
.linux {
    background-color: #Daeaf7;
    margin-bottom: 30px;
}
.linux p {
    padding: 10px;
}
.debian {
    width: 35px;
    height: 35px;
}
.typescript {
    width: 40px;
    height: 40px;
    border-radius: 5px;
}
.database {
    border: 2px solid;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mysql {
    width: 40px;
    height: 40px;
}
.tecno {
    background-color: #faf8f6;
    border-radius: 7px;
}

.linear {
    margin: auto;
    grid-area: 2 / 1 / 3 / 2;
    width: 100%;
    display: flex;
    overflow-x: auto;
}
#carda {
    flex: 0 0 5em;
    text-align: center;
}
.list {
    animation: spin 9s infinite linear;
    display: flex;
    align-items: flex-start;
    
}

@keyframes spin {
    from {translate: 0;}
    to {translate: -100%;}
}

.linear::-webkit-scrollbar {
    display: none;
}

@keyframes rola {
    from {
        opacity: 0;
        scale: 0.5; /* MOVIMENTA-SE DE BAIXO PARA CIMA */
        /*clip-path: inset(100% 100% 0 0);*/
        /*transform: translateX(-100px); sAI DA ESQUERDA*/
    }
    to {
        opacity: 1;
        scale: 1;
        /*transform: translateX(0PX);*/
        /*clip-path: inset(0 0 0 0);*/
    }
}
#rolar {
    margin-top: 2em;
    animation: rola linear;
    animation-timeline: view() ;
    animation-range: entry 30% cover 40%;
}