estilo.css

@import url('https://fonts.googleapis.com/css2?family=Josefin+Slab:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600;1,700&family=Mulish:ital,wght@0,200;0,300;1,200&display=swap');

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css');

*{ /* O "*" seleciona todos os itens para n propriedades*/
    text-decoration: none; /*tira o formato padrao dos links de sublinhado*/
    list-style: none; /*tira o estilo da lista UL*/
    margin: 0; /*margem em geral*/
    padding: 0; /**/
}

.hamburguer{
    cursor: pointer; /*cursor para mãozinha*/
    width: 2em; /*largura */
    height: 2em; /*altura*/
    position: fixed; /*posição fixa do meu icone do menu*/
    z-index: 100; /*posicionamento em ordem de camadas*/
    right: 2em; /*direita*/
    top: 2em; /*topo*/
    display: flex; /*posicionamento dos meus elementos dentro da minha div*/
    flex-direction: column; /* deixa os elemntos em coluna, flex-derection com o valor de coluna*/
    justify-content: space-around; /*Os conjuntos como os navegadores lidam com o espaço ao redor e entre elementos ao longo do eixo principal*/
}

.hamburguer span{
    position: absolute;
    left: 3em;
    height: 2em;
    width: 6em;
    background: #535cad;
    background: -webkit-linear-gradient(to right, #141053d5, #537dad9c);
    background: linear-gradient(to right, #141053d5, #537dad9c);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    opacity: 0;
}

.show-menu .hamburguer:hover span{
    transition: .7s;
    opacity: 1;
}
.hamburguer span::before{ /* triangulo do elemento pai*/
    content: "";
    position: absolute;
    border-right: .5rem solid #141053d5;
    border-top: .5rem solid ;
    border-left: .5rem solid ;
    border-bottom: .5rem solid;
    left: -1rem;
}

.show-menu .hamburguer{
    right: 15em;
    transition: 1s;
}

.line{
    width: 100%; /*largura*/
    height: .1em; /*altura*/
    background: white; /*cor dos elementos*/
    box-shadow: black 2px 2px 1px; /*sombra dos elementos*/
    transition: 1s; /*transition de um efeito*/
}

.show-menu #line1{
    transform: rotate(45deg) translate(.3rem, .45em);
}
.show-menu #line2{
    opacity: 0;
    visibility: hidden;
}

.show-menu #line3{
    transform: rotate(-45deg) translate(.3rem, -.45em);
}


header{
    width: 100%; /*largura 100%*/
    height: 100vh; /*altura, toda minha visao*/
    position: relative;
}

.img-wrapper{
    width: 100%;
    height: 100%;
    overflow: hidden;/*O conteúdo é cortado e nenhuma barra de rolagem é exibida*/
    background-color: rgba(0.0.0.8); /*(o,o,o,8:cor alfa  )*/
}

.img-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover; /*Essa propriedade instrui o conteúdo a preencher o contêiner de várias maneiras; como "preservar essa proporção de aspecto" ou "esticar e ocupar o máximo de espaço possível".*/
    opacity: 0.7 ;
    animation: zoom 25s ; /*@keyframes*/
}

@keyframes zoom {
    0%{
        transform: scale(1.3);
    }
    100%{
        transform: scale(1);
    }
}

.banner{
    position: absolute;
    top: 30%;
    left: 15%;
}

@keyframes movebanner{
    0%{
        transform: translateY(10rem) rotateY(-30deg);
    }
    100%{
        transform: translateX(0rem);
        opacity: 1;
    }
}

.banner h1{
    color: white;
    font-size: 4em;
    font-family: serif;
    font-weight: 200;
    text-shadow: .3rem .4rem 2px rgb(0.0.0.4);
    line-height: 3rem;
    margin-bottom: 3.5rem;
    animation: movebanner 0.5s forwards;
    opacity: 0;
}


.banner p{
    font-family: "Josefin Slab", serif;
    font-size: 2.5rem;
    color: #fff;
    text-shadow: .2rem .2rem rgb(0.0.0.4);
    margin-bottom: 2rem;
    animation: movebanner 0.7s forwards;
    opacity: 0;
}

.banner button{
    font-size: 1rem;
    font-family: "Muli", serif;
    color: rgba(255, 255, 255, 0.712);
    text-transform: uppercase;
    letter-spacing:  .1rem;
    background: #535cad;
    background: -webkit-linear-gradient(to right, #141053d5, #537dad9c);
    background: linear-gradient(to right, #141053d5, #537dad9c);
    padding: 1rem 2rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    animation: movebanner 1s forwards;
    opacity: 0;
}

.banner button:hover{
    position: relative;
    color: white;
    padding: 1.5rem 3rem;
    transition: 1s;
}

.sidebar{
    width: 20rem;
    height:  100vh;
    background: #fff;
    position: fixed;
    top: 0;
    right: -20rem;
    transition: all 1s;
}

.show-menu .sidebar{ /*esta ligado com meu script */
    right: 0;
}

.menu{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.menu-item{
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
}

.menu-link{
    font-family: serif;
    font-size: 1.5rem;
    color: #555;
    transition: color 1s ;
}

.menu-link:hover{
    transition: .7s;
    font-size: 2rem;
    color: #6a3093;
}

.social-media{
    position: absolute;
    bottom: 2rem;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.social-media i{
    background: #6a3093;
    color: rgba(255,255,255,1);
    height: 2.5rem;
    width: 2.5rem;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transition: color 1s;
}

.social-media i:hover{
    background: #a044ff;
}

.conhecimentos{
    display:grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(6, 6rem);
    row-gap: 1rem;
}

.conhecimento:nth-child(1){
    grid-column: 4 / 7 ;
    grid-row: 1 / 3 ;
}
.conhecimento:nth-child(2){
    grid-column: 3 / 6 ;
    grid-row: 3 / 5 ;
}
.conhecimento:nth-child(3){
    grid-column:  4 / 7 ;
    grid-row: 5 / -1 ;
}
.conhecimento:nth-child(4){
    grid-column:  11 / 14 ;
    grid-row: 1 / 3 ;
}
.conhecimento:nth-child(5){
    grid-column:  12 / 15 ;
    grid-row: 3 / 5 ;
}
.conhecimento:nth-child(6){
    grid-column:  11 / 14 ;
    grid-row: 5 / -1 ;
}

.sessao-header{
    display: flex;
    align-items: center;
    justify-content: center;
}

.sessao-header h1{
    text-transform: uppercase;
    font-size: 3rem;
    color: #4b4b4b;
    border-bottom: solid 3px #6a3093;
    margin-bottom: 1.5rem;
}

.conhecimento-header{
    display: flex;
    align-items: center;
}

.conhecimento-header i{
    font-size: 2.5rem;
}

.conhecimento-header h3{
    font-family: 'Times New Roman', Times, serif;
    font-size: 2rem;
    padding-left: 1rem;
}

.conhecimento-text{
    font-family: 'Times New Roman', Times, serif;
}

.conhecimentos-img{
    grid-column: 7 / 11;
    grid-row: 2 / 6;
    width: 100%;
}

.conhecimentos-img img{
    object-fit: cover;
    width: 100%;
}