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

    .aldrich-regular {
        font-family: "Aldrich", sans-serif;
        font-weight: 400;
        font-style: normal;
    }

    body {
      font-family: "Aldrich", sans-serif;
      color: #fff;
      background: #414141;
    }

    .container-1 {
      display: flex;
      height: 100vh;
      width: 100%;
    }


    .left-1 {
      flex: 1;
      background: #3ca55c;
      display: flex;
      padding: 3vw;
      clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
    }

    .right-1 {
      flex: 1.5;
      background: #414141;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: end;
      padding: 0 2vw 0 0;
    }

    .avatar {
      width: 18vw;
      height: 23vw;
      filter: drop-shadow(0 .1em 10px #000);
    }

    .name {
      font-size: 5vw;
      margin: 0 0 8vw 0;
      text-align: right;
      transition: font-size 0.5s;
    }

    .name:hover {
      font-size: 5.5vw;
    }

    .description {
      font-size: 1.65vw;
      text-align: right;
      margin-bottom: 30px;
      transition: font-size 0.5s;
    }

    .description:hover {
      font-size: 1.7vw;
    }

    .skills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 15px;
      position: absolute;
      top: 90vh;
      right: 2vw;
    }

    .skill {
      background: #5a5a5a;
      padding: 0.55vw 1.35vw;
      border-radius: 10px;
      font-size: 0.95rem;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
      transition: background 1s;
      transition: padding 0.5s;
    }

    .skill:hover {
      background: #999999;
      padding: 0.6vw 1.4vw;
    }

    @media (max-width: 768px) {
      .container-1 {
        flex-direction: column;
        height: auto;
      }
      .left, .right {
        flex: none;
        width: 100%;
        height: auto;
        padding: 20px;
      }
      .name {
        font-size: 2rem;
      }
    }
    
    .container-2{
      height: 100vh;
      width: 100vw;
      padding: 4vw 2vw 0 0;
      display: flex;
    }

    .left-2 {
      width: 70vw;
    }

    .right-2 {
      background: #414141;
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: end;
      padding: 0 0 2vh 0;
      width: 30vw;
    }

    .exp{
      background: #3ca55c;
      padding:    2vw;
      font-size:  1.4vw;
      width:      70vw;
      max-height: 25vw;
      margin:     2vw 0;
      box-shadow: #000 0 .1em 1em;
    }

    #exp-img{
      position:  absolute;
      transform: translateY(-30vh) translateX(40vw);
    }

    .cur{
      background: #3ca55c;
      padding:    2vw;
      font-size:  1.4vw;
      width:      70vw;
      max-height: 25vw;
      box-shadow: #000 0 .1em 1em;
    }
    
    .exp-title{
      font-size: 1.8vw;
      font-weight: bold;
    }

    @keyframes larguraAnimacao {
        0% {
            width: 18vw;
        }
        50% {
            width: 16vw;
        }
        100% {
            width: 18vw;
        }
    }

    .animar {
      animation: larguraAnimacao 2s ease-in-out infinite;
    }

    .container-3{
      height: 100vh;
      width: 100vw;
      padding: 4vw 2vw 0 0;
    }

    .tit-portifolio{
      background: #3ca55c;
      padding:    2vw;
      font-size:  1.4vw;
      width:      70vw;
      max-height: 25vw;
      box-shadow: #000 0 .1em 1em;
    }

    .portifolio{
      padding: 2vw;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .port-img{
        width: 20vw;
        height: 16vw;
        margin: auto;
        transition: 0.8s;
        box-shadow: #000 0 .3em 1em;
    }

    .port-img:hover{
      transform: scale(1.1);
      box-shadow: #000 0 .4em 2em;
    }