* {
  font-family: Roboto;
  font-size: 24px;
}

:root {
  --primary-color: #051F39;
  --secundary-color: #0E2046;
  --terciary-color: #79A3FC;
  --quaternary-color: #354d80;
}

body {
  background-color: var(--primary-color);
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f100;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--terciary-color);
  border-radius: 30px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--quaternary-color);
  border-radius: 30px;
}

.bg_projetos {
  display: none;
}

.bg_main {
  background-color: var(--secundary-color);
  width: 93%;
  height: auto;
  margin: auto;
  margin-top: 4%;
  border-radius: 30px;
  border-style: solid;
  border-color: var(--terciary-color);
}

.go_up {
  position: fixed;
  top: 92%;
  left: 96.4%;
  display: flex;
  background: var(--secundary-color);
  width: 8px;
  height: 8px;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  font-size: 40px;
  color: white;
  margin-bottom: 1%;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.go_up:hover {
  background: #79A3FC;
}

.Details_Border {
  border-bottom-style: solid;
  border-color: var(--terciary-color);
}

.Info_details {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  justify-content: flex-start;
  width: 97%;
  margin: 1.5%;
  gap: 10px;
}

.Info_top {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  width: 100%;
  height: 580px;
  margin: auto;
  gap: 12%;
  justify-content: center;
  align-items: center;

  .img_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .info_container {
    width: 370px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    .name {
      text-align: center;
      font-size: 40px;
      color: white;
      margin-bottom: 1%;
    }
    .faded_job {
      font-size: 20px;
      text-align: center;
      color: #C2C2C2;
      margin-top: 5%;
      margin-bottom: 5%;
    }
    .info_btns {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-around;
      align-items: center;
      margin-bottom: 20px;

      .info_bnt_link {
        display: flex;
        width: 160px;
        height: 35px;
        gap: 15px;
        text-align: center;
        align-items: center;
        text-decoration: none;
        color: white;
        font-size: 17px;
        flex-wrap: nowrap;
        flex-direction: row;
        border-color: var(--terciary-color);
        border-style: solid;
        border-radius: 10px;
        justify-content: center;
      }

      .info_bnt_link:hover {
        color: #C2C2C2;
        border-color: var(--quaternary-color);
      }
    }
    .links_nav {
      display: flex;
      gap: 13px;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: center;
    }
    .indie_link_nav {
      opacity: 0.4;
    }
    .indie_link_nav:hover {
      opacity: 1;
    }
  }
}

.tools {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  height: 650px;
  margin: auto;
  padding-top: 100px;
  align-items: center;

  .tools_img_container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 2%;
    height: 500px;
    width: 100%;
    justify-content: space-between;
    align-content: center;
  }

  .tool_container {
    width: 200px;
    height: 200px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--primary-color);
    padding: 10px;
    border-radius: 20px;
  }

  .tool_container:hover {
    background: var(--quaternary-color);
    border-style: solid;
    border-color: var(--terciary-color);
  }
  
  .tool_text {
  font-size: 28px;
  }
  
  .html_css {
    width: 120px;
  }

  .python {
    width: 60px;
  }

  .kotlin {
    width: 50px;
  }

  .git {
    width: 60px;
  }

  .c_lang {
    width: 80px;
  }

  .visualstudio {
    width: 60px;
  }

  .flutter {
    width: 55px;
  }

  .supabase {
    width: 60px;
  }

  .zig {
    width: 60px;
  }
}

@media (max-width: 1025px) {
  .tool_container {
    width: 145px !important;
    height: 145px !important;
  }
  
  .html_css {
    width: 90px !important;
  }

  .python {
    width: 50px !important;
  }

  .kotlin {
    width: 50px !important;
  }

  .git {
    width: 50px !important;
  }

  .c_lang {
    width: 70px !important;
  }

  .visualstudio {
    width: 50px !important;
  }

  .flutter {
    width: 45px !important;
  }

  .supabase {
    width: 50px !important;
  }

  .zig {
    width: 60px !important;
  }
}

@media (max-width: 800px) {
  .bg_main {
    background-color: var(--secundary-color);
    width: 99%;
    height: auto;
    margin: auto;
    margin-top: 9%;
    border-radius: 20px;
  }
  
   .go_up {
    left: 100%;
  }
  
  .Info_details {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    width: 97%;
    margin: 2%;
    gap: 10px;
  }

  .tool_text {
    font-size: 22px !important;
  }
  
  .img_container {
    margin-top: 50px;
  }       
  
  .tools {
    margin-top: 150px;  
  }
  
  .tool_container {
    width: 125px !important;
    height: 125px !important;
  }
  
  .html_css {
    width: 90px !important;
  }

  .python {
    width: 50px !important;
  }

  .kotlin {
    width: 50px !important;
  }

  .git {
    width: 50px !important;
  }

  .c_lang {
    width: 70px !important;
  }

  .visualstudio {
    width: 50px !important;
  }

  .flutter {
    width: 45px !important;
  }

  .supabase {
    width: 50px !important;
  }

  .zig {
    width: 60px !important;
  }
}

@media (max-width: 600px) {
  .bg_main {
    background-color: var(--secundary-color);
    width: 99%;
    height: auto;
    margin: auto;
    margin-top: 9%;
    border-radius: 20px;
  }
  
  .go_up {
    left: 100%;
  }
    
  .img_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: nowrap;
  }
    
  .img_container > img {
    max-width: 80%;
    max-height: 80%;
  }
  
  .Info_details {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
    width: 97%;
    margin: 4.5%;
    gap: 10px;
  }
  
  .Info_top {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
    height: 580px;
    padding-top: 70px;
    margin: auto;
    gap: 0.2%;
    justify-content: center;
    align-items: center;
  
    .info_container {
      width: 370px;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
  
      .name {
        text-align: center;
        font-size: 40px;
        color: white;
        margin-bottom: 1%;
      }
      .faded_job {
        font-size: 20px;
        text-align: center;
        color: #C2C2C2;
        margin-top: 5%;
        margin-bottom: 5%;
      }
      .info_btns {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 20px;
  
        .info_bnt_link {
          display: flex;
          width: 140px;
          height: 35px;
          gap: 15px;
          text-align: center;
          align-items: center;
          text-decoration: none;
          color: white;
          font-size: 17px;
          flex-wrap: nowrap;
          flex-direction: row;
          border-color: var(--terciary-color);
          border-style: solid;
          border-radius: 10px;
          justify-content: center;
        }
  
        .info_bnt_link:hover {
          color: #C2C2C2;
          border-color: var(--quaternary-color);
        }
      }
      .links_nav {
        display: flex;
        gap: 13px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
      }
      .indie_link_nav {
        opacity: 0.4;
      }
      .indie_link_nav:hover {
        opacity: 1;
      }
    }
  }

  .img_container {
    margin-top: 10px;
  }       
  
  .tools {
    margin-top: 10px;
  }
  
  .tool_text {
  font-size: 20px !important;
  }
  
  .tool_container {
    width: 100px !important;
    height: 100px !important;
  }
  
  .html_css {
    width: 80px !important;
  }

  .python {
    width: 40px !important;
  }

  .kotlin {
    width: 40px !important;
  }

  .git {
    width: 50px !important;
  }

  .c_lang {
    width: 60px !important;
  }

  .visualstudio {
    width: 40px !important;
  }

  .flutter {
    width: 35px !important;
  }

  .supabase {
    width: 40px !important;
  }

  .zig {
    width: 50px !important;
  }
}

@media (max-width: 400px) {
  .tool_text {
    font-size: 15px !important;
  }

  .tools_img_container {
    justify-content: center !important;
    align-content: center !important;
  }
  
  .tool_container {
    width: 75px !important;
    height: 75px !important;
  }
  
  .html_css {
    width: 60px !important;
  }

  .python {
    width: 30px !important;
  }

  .kotlin {
    width: 30px !important;
  }

  .git {
    width: 30px !important;
  }

  .c_lang {
    width: 30px !important;
  }

  .visualstudio {
    width: 30px !important;
  }

  .flutter {
    width: 25px !important;
  }

  .supabase {
    width: 30px !important;
  }

  .zig {
    width: 40px !important;
  }
}