style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    color: var(--white);

    /* VARS */
    --main-color: #ef233c;
    --secondary-color: #2360ef;
    --black: #0e0d0d;
    --white: #edf2f4;
    --gray: #8d99ae;
    --background: black;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100%;
    color: var(--white);
    background-color: var(--background);
}

.w25 {
    width: 25%;
    padding: 0 10px;
}

.w33 {
    width: 33.3%;
    padding: 0 10px;
}

.w50  {
    width: 50%;
    padding: 0 10px;
}


/* HOME */
header {
    position: absolute;
    top: 5vh;
    width: 100%;
    font-size: 13pt;
    font-weight: 700;
    z-index: 2;
}

header .center {
    display: flex;
    padding: 0 250px;
    background: none;
}

header .center nav {
    text-align: right;
}

header .center nav ul {
    list-style: none;
    
}

header .center nav ul li {
    display: inline-block;
    margin: 0 5px;
}

.logo a {
    color: var(--main-color);
    text-decoration: none;
    font-weight: bold;
}

header .center nav ul li a {
    color: var(--white);
    text-decoration: none;
    transition: .5s;
    padding: 5px 15px;
    border-radius: 5px;
}

header .center nav ul li a:hover {
    background-color: var(--main-color);

}

.banner-principal {
    width: 100%;
    height: 100vh;
    background-image: url('images/bg-desktop.webp');
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    position: relative;
    z-index: 1;
}

.banner-principal .box-text {
    width: 100%;
    position: relative;
    top: 50vh;
    padding: 0 250px;
}

.banner-principal .box-text h2 {
    font-weight: 400;
}

.banner-principal .box-text h2 b.red {
    color: var(--main-color);
}

.banner-principal .box-items {
    position: relative;
    top: 83vh;
    padding: 0 250px;
    font-size: 40pt;
    z-index: 11;
}

.banner-principal .align-button {
    width: 100%;
    position: absolute;
    top: 90vh;
    font-size: 40pt;
    text-align: center;

    z-index: 10;
    cursor: pointer;
}

.banner-principal .align-button span {
    cursor: pointer;
}

.banner-principal .box-items a {
    color: var(--white);
}



/* Sobre */
.sections-app {
    padding: 40px 250px;
}

.sections-app h2 {
    font-family: 'Comfortaa', cursive;
    text-align: center;
    margin-bottom: 15px;
}

#sobre .flex {
    display: flex;
    flex-wrap: wrap;
}

#sobre .text-box-sobre {
    margin-top: 15vh;
    margin-right: 10%;
    text-align: justify;
    font-size: 15pt;
    width: 50%;
}

#sobre .img-box-sobre {
    width: 40%;
}

#sobre .img-box-sobre img {
    width: 100%;
    border-radius: 50%;
}

/* Trabalho */
.github {
    text-align: center; 
    font-size: 15pt; 
    display: block; 
    margin-top: 10px;
}


.box-trabalhos {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
}

.box-trabalho {
    width: 31%;
    padding: 20px 50px;
    border-radius: 10px;
    text-align: center;
    margin: 10px;
    border: 2px solid var(--white);
}

.box-trabalho img {
    width: 100%;
    border-radius: 50%;
}

.box-trabalho p.desc {
    margin-top: 20px;
    font-size: 10pt;
    text-align: justify;
}

.box-trabalho a {
    background-color: var(--secondary-color);
    padding: 10px 40px;
    display: block;
    width: 100%;
    margin-top: 15px;
    border-radius: 5px;
    text-decoration: none;
    font-family: 'Comfortaa', cursive;
    font-weight: bold;
    text-align: bottom;
}

/* TECNOLOGIA */
.box-tecnologias {
    display: flex;
}

.box-tecnologia {
    margin: 5px;
    text-align: center;
}

.box-tecnologia img {
    width: 100%;
}

/* CERTIFICADOS */
.box-certificados {
    display: flex;
    flex-wrap: wrap;
}

.box-certificado {
    text-align: center;
}

.box-certificado img {
    width: 100%;
}

.box-certificado h3 {
    font-size: 13pt;
    font-weight: 600;
}

.box-certificado a {
    display: block;
    padding: 10px 40px ;
    background-color: var(--main-color);
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bold;
    font-size: 10pt;
    border-radius: 10px;
    border-bottom: 1px solid #a21627;
    border-right: 1px solid #a21627;
    margin: 10px 0;
}

/* footer */
footer {
    padding: 20px 250px;
    background-color: #0e0d0d;
    width: 100%;
}

footer h2 {
    text-align: center;
}

footer .logo {
    font-size: 25pt;
}

footer ul {
    margin-top: 10px;
    list-style: none;
}

footer ul li a {
    text-decoration: none;
}

#button {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 100;
    font-size: 20pt;
    border: 2px solid var(--white);
    border-radius: 50%;
    padding: 5px 10px;
}

/* Animação */

[data-animation] {
    opacity: 0;
    transition: .3s;
  }
  
  [data-animation="left"] {
    transform: translate3d(-50px, 0, 0);
  }
  
  [data-animation="right"] {
    transform: translate3d(50px, 0, 0);
  }
  
  [data-animation="top"] {
    transform: translate3d(0, -50px, 0);
  }
  
  [data-animation].animate {
    opacity: 1;
    transform: translate3d(0px, 0px, 0px);
  }


@media screen and (max-width: 1200px) {
    body {
        overflow-x: hidden;
    }
    .w50 {
        width: 100%;
    }
    .w25 {
        width: 100%;
    }
    .w33 {
        width: 100%;
    }

    /* HEADER */
    header .center {
        padding: 0 20px;
    }

    /* HOME */
    .banner-principal {
        background-image: url('images/bg.png');
    }
    .banner-principal .box-items {
        display: none;
    }

    .banner-principal .box-items span {
        position: unset;
    }
    .sections-app {
        padding: 40px 20px;
        text-align: center;
    }

    .banner-principal .box-text {
        padding: 0 20px;
    }

    /* Trabalho */
    .box-trabalhos {
        margin-left: 10px;
    }
    .box-trabalho {
        width: 100%;
    }

    /* foooter */
    footer {
        padding: 40px 20px;
    }

    /* SOBRE */
    #sobre .text-box-sobre {
        width: 100%;
    }
    
    #sobre .img-box-sobre {
        width: 100%;
    }

    /* TECNOLOGIAS  */
    .box-tecnologias {
        display: block;
    }

    /* animação */
    [data-animation="left"] {
        transform: translate3d(0, -50px, 0);
      }
      
      [data-animation="right"] {
        transform: translate3d(0, -50px, 0);
      }
      
      [data-animation="top"] {
        transform: translate3d(0, -50px, 0);
      }
}