@importar url('https://fonts.cdnfonts.com/css/calculator');

body {
  background-color: #081c29;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  user-select: none;
  height: 2230px;
  overflow-x: hidden;
}

body::-webkit-scrollbar {
  display: none;
}

.siteName {
  position: absolute;
  color: white;
  left: 5%;
  bottom: -1vw;
}
.bar {
  user-select: none;
}

.m {
  color: #ddd;
  background: none;
  position: absolute;
  border: none;
  bottom: 93%;
  font-size: 100%;
  font-weight: bold;
  cursor: pointer;
}

.m:hover {
  color: #24a4df;
}
.m:active {
  color: #1b7daa;
}

#a {
  left: 60%;
  font-weight: bold;
  bottom: 30%;
}

#b {
  left: 67%;
  font-weight: bold;
  bottom: 30%;
}

#c {
  left: 78.5%;
  font-size: 120%;
  bottom: 30%;
}

#d {
  left: 87%;
  font-weight: bold;
  bottom: 30%;
}

.title {
  color: white;
  position: absolute;
  left: 5%;
  bottom: 50%;
  font-size: 300%;
}

.job {
  position: relative;
  color: #24a4df;
  font-size: 75%;
  top: -10px;
}

.textI {
  color: white;
  position: absolute;
  font-size: 125%;
  left: 5%;
  bottom: 30%;

  max-width: 50%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.b6 {
  background-color: #24a4df;
  border: 1px solid #ddd;
  border-radius: 15px;
  position: absolute;
  height: 65px;
  width: 150px;
  font-weight: bold;
  color: white;
  font-size: 17px;
  left: 5%;
  bottom: 15%;
  cursor: pointer;
  transition: background-color 500ms ease-in-out, color 500ms ease-in-out;
  box-shadow: 3px 3px 10px black;
}

.b6:hover {
  animation: b6 800ms ease-in-out;
  background-color: #081c29;
  color: white;
}
.b6:active {
  background-color: #081c29;
  color: white;
  box-shadow: inset 3px 3px 10px black;
}

@keyframes b6 {
  0% {
    background-color: #24a4df;
  }
  100% {
    background-color: #081c29;
    color: white;
  }
}

.b7 {
  background-color: #081c29;
  border: 1px solid #ddd;
  border-radius: 15px;
  position: absolute;
  height: 65px;
  width: 150px;
  font-weight: bold;
  color: white;
  font-size: 17px;
  left: 18%;
  bottom: 15%;
  cursor: pointer;
  transition: background-color 500ms ease-in-out, color 500ms ease-in-out;
  box-shadow: 3px 3px 10px black;
}

.b7:hover {
  animation: b7 800ms ease-in-out;
  background-color: #24a4df;
  color: white;
}
.b7:active {
  background-color: #24a4df;
  color: white;
  box-shadow: inset 3px 3px 10px black;
}

@keyframes b7 {
  0% {
    background-color: #081c29;
  }
  100% {
    background-color: #24a4df;
    color: white;
  }
}

#budy2 {
  width: 100%;
  height: 120%;
  background-color: #122e43;
  position: absolute;
  bottom: -120%;
  left: 0%;
  border-top: 1px solid rgba(23, 87, 160, 0.479);
  border-bottom: 1px solid rgba(23, 87, 160, 0.479);
}

.eu_img {
  position: absolute;
  border-radius: 100%;
  height: 300px;
  width: 300px;
  top: 250px;
  left: 190px;
  border: 4px solid #ffffff;
  border-width: 2px 3px;
  pointer-events: none;
}

.divisão {
  position: absolute;
  width: 5px;
  height: 285px;
  background-color: #ffffff;
  border-radius: 5%;
  top: 260px;
  left: 500px;
}

.divisão_ {
  position: absolute;
  width: 298px;
  height: 5px;
  background-color: #ffffff;
  border-radius: 5%;
  top: 315px;
  left: 500px;
}

.name2 {
  color: white;
  position: absolute;
  top: 215px;
  left: 515px;
  font-size: 45px;
  font-family: Arial, Helvetica, sans-serif;
  animation: sombraColorida 4s infinite;
}

@keyframes sombraColorida {
  0% {
    text-shadow: 2px 2px 4px rgba(0, 0, 255, 0.5); /* Sombra azul */
  }
  25% {
    text-shadow: 2px 2px 4px rgba(0, 255, 0, 0.5); /* Sombra verde */
  }
  50% {
    text-shadow: 2px 2px 4px rgba(255, 255, 0, 0.5); /* Sombra amarela */
  }
  75% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5); /* Sombra branca */
  }
  100% {
    text-shadow: 2px 2px 4px rgba(0, 0, 255, 0.5); /* Sombra azul novamente */
  }
}

.user_icon {
  position: absolute;
  top: 345px;
  left: 515px;
}

.time_icon {
  position: absolute;
  top: 380px;
  left: 515px;
}

.home_icon {
  position: absolute;
  top: 415px;
  left: 515px;
}

.mala_icon {
  position: absolute;
  top: 450px;
  left: 515px;
}

.notebook_icon {
  position: absolute;
  top: 485px;
  left: 515px;
}

.school_icon {
  position: absolute;
  top: 520px;
  left: 515px;
}

.info {
  position: absolute;
  color: #175aa8;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  font-size: 100%;
  left: 40%;
}

.BA {
  position: absolute;
  bottom: -23.9rem;
}

.BB {
  position: absolute;
  bottom: -26rem;
}

.BC {
  position: absolute;
  bottom: -28.3rem;
}

.BD {
  position: absolute;
  bottom: -30.5rem;
}

.BE {
  position: absolute;
  bottom: -32.7rem;
}

.BF {
  position: absolute;
  bottom: -35rem;
}

.perfil {
  position: relative;
  left: 15%;
  bottom: 5%;
}

#slider-wrapper {
  width: 940px;
  height: 470px;
  margin: 50px auto;
  position: relative;
  margin-bottom: 0px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 5px 5px 10px #1757a0;
  border: 2px solid #175aa8;
  bottom: -110%;
}

#s1 {
  padding: 6px;
  background: #24a4df;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: -36px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s2 {
  padding: 6px;
  background: #24a4df;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: -12px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s3 {
  padding: 6px;
  background: #24a4df;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: 12px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s4 {
  padding: 6px;
  background: #24a4df;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: 36px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
  opacity: 0.5;
}

.inner-wrapper {
  width: 940px;
  height: 470px;
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 0px;
  overflow: hidden;
}

.control {
  display: none;
}

#Slide1:checked ~ .overflow-wrapper {
  margin-left: 0%;
}

#Slide2:checked ~ .overflow-wrapper {
  margin-left: -100%;
}

#Slide3:checked ~ .overflow-wrapper {
  margin-left: -200%;
}

#Slide4:checked ~ .overflow-wrapper {
  margin-left: -300%;
}

#Slide1:checked + #s1 {
  opacity: 1;
}

#Slide2:checked + #s2 {
  opacity: 1;
}

#Slide3:checked + #s3 {
  opacity: 1;
}

#Slide4:checked + #s4 {
  opacity: 1;
}

.overflow-wrapper {
  width: 400%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: hidden;
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.slide img {
  width: 25%;
  float: left;
}

.git {
  fill: #24a4df;
  position: absolute;
  height: 5%;
  width: 5%;
  left: 3.6%;
  bottom: 5%;
}

.insta {
  fill: #24a4df;
  position: absolute;
  height: 5%;
  width: 5%;
  left: 7%;
  bottom: 5%;
}

.git:hover {
  fill: #175aa8;
}

.insta:hover {
  fill: #175aa8;
}

.body3 {
  width: 100%;
  height: 25%;
  background-color: #122e43;
  position: absolute;
  bottom: -120%;
  left: 0%;
  border-top: 1px solid rgba(23, 87, 160, 0.479);
}

@media screen and (max-width: 767px) {
  .m {
    font-size: 80%;
  }
  #a {
    left: 40%;
    font-weight: bold;
  }

  #b {
    left: 50%;
    font-weight: bold;
  }

  #c {
    left: 70%;

    font-size: 90%;
  }

  #d {
    left: 82%;
    font-weight: bold;
  }

  .textI {
    bottom: 10%;
  }

  .budy2 {
    bottom: -150%;
  }

  .b6 {
    bottom: -10%;
    font-size: 50%;
  }

  .b7 {
    bottom: -10%;
    font-size: 50%;
  }

  .git {
    bottom: -20%;
    left: 5%;
  }
  .insta {
    bottom: -20%;
    left: 12%;
  }

  .eu_img {
    position: absolute;
    border-radius: 100%;
    height: 150px;
    width: 150px;
    bottom: 100%;
    left: 10%;
    border: 4px solid #ffffff;
    border-width: 2px 3px;
    pointer-events: none;
  }

  .divisão {
    position: absolute;
    width: 2px;
    height: 150px;
    background-color: #ffffff;
    border-radius: 5%;
    left: 45%;
  }

  .divisão_ {
    position: absolute;
    width: 150px;
    height: 2px;
    background-color: #ffffff;
    border-radius: 5%;
    top: 280px;
    left: 45%;
  }

  .name2 {
    color: white;
    position: absolute;
    top: 250px;
    left: 47%;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
    animation: sombraColorida 4s infinite;
  }

  .user_icon {
    position: absolute;
    top: 285px;
    left: 47%;
    width: 15px;
    height: 15px;
  }

  .time_icon {
    position: absolute;
    top: 305px;
    left: 47%;
    width: 15px;
    height: 15px;
  }

  .home_icon {
    position: absolute;
    top: 322px;
    left: 46%;
    font-size: 15px;
    scale: 75%;
  }

  .mala_icon {
    position: absolute;
    top: 347px;
    left: 47.2%;
    width: 15px;
    height: 15px;
  }

  .notebook_icon {
    position: absolute;
    top: 365.5px;
    left: 47.3%;
    width: 15px;
    height: 15px;
  }

  .school_icon {
    position: absolute;
    top: 383px;
    left: 46.1%;
    scale: 75%;
  }

  .info {
    position: absolute;
    color: #175aa8;
    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
    font-size: 55%;
    left: 52%;
  }

  .BA {
    position: absolute;
    top: 279px;
  }

  .BB {
    position: absolute;
    top: 298px;
  }

  .BC {
    position: absolute;
    top: 320px;
  }

  .BD {
    position: absolute;
    top: 340px;
  }

  .BE {
    position: absolute;
    top: 359px;
  }

  .BF {
    position: absolute;
    top: 383px;
  }

  .perfil {
    position: relative;
    left: 15%;
    bottom: 5%;
  }

  #slider-wrapper {
    width: 90%;
    height: 80%70px;
    margin: 50px auto;
    position: relative;
    margin-bottom: 0px;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #1757a0;
    border: 2px solid #175aa8;
    bottom: -100%;
  }

  body {
    height: 0vw;
  }
}

.a__ {
  text-decoration: none;
  color: none;
  color: white;
}

.a__:hover {
  color: #24a4df;
}
.a__:active {
  color: #1b7daa;
}

#p__ {
  text-decoration: none;
  color: none;
  color: white;
}

.fixar {
  width: 100%;
  background-color: #081c29;
  height: 10%;
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: 100;
  border-bottom: 1px solid #122e43;
}

.social {
  color: #081c29;
  position: relative;
}

.social2 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  text-decoration: none;
  color: #1757a0;
  font-weight: bold;
  font-size: 120%;
  position: relative;
}

.social2:hover {
  color: #1e75d8;
}

#desc2 {
  position: absolute;
  bottom: 35%;
  margin-left: 3%;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  color: white;

  max-width: 48%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

#divisao_ {
  height: 90%;
  width: 2px;
  background-color: #175aa8;
  position: absolute;
  bottom: 5%;
  left: 51%;
}

.contatosS {
  position: absolute;
  bottom: 10%;
  left: 52%;
}

#slides_ {
  position: absolute;
  width: 100%;
  height: 5%;
  bottom: -5%;
}

#go_inicio {
  position: absolute;
  bottom: 100%;
}

.like {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  bottom: 25%;
  left: 2.6%;
}

.like2 {
  fill: #1757a073;
}

.like4 {
  fill: #1e75d8;
}

.tL {
  color: #1e75d8;
  position: relative;
  top: -5px;
  font-weight: bold;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

@media (max-width: 768px) {
  #desc2 {
    bottom: 15%;
  }

  .like {
    bottom: 5%;
  }

  .inner-wrapper {
    width: 100%;
    height: 50vw;
  }

  #slider-wrapper {
    height: 50vw;
    top: 150%;
    left: 45%;
    transform: translate(-50%, -50%);
  }

  .textI {
    top: 50%;
    max-width: 100%;
  }

  .git {
    height: 7vw;
    width: 7vw;
    position: absolute;
    left: 25px;
    bottom: 15px;
    z-index: 10;
  }

  .insta {
    height: 7vw;
    width: 7vw;
    position: absolute;
    left: calc(25px + 7vw + 2vw);
    bottom: 15px;
    z-index: 10;
  }

  .b6 {
    z-index: 20;
    bottom: 90px;
    font-size: 17px;
  }

  .b7 {
    z-index: 20;
    bottom: 90px;
    font-size: 17px;
    left: calc(5% + 35vw);
  }

  .contatosS {
    position: absolute;
    bottom: 20%;
    left: 52%;
  }

  .a__ {
    font-size: 2.8vw;
  }
}

@media (max-width: 395px) {
  .title {
    top: 20vw;
    font-size: 10vw;
  }

  .textI {
    top: 60vw;
    font-size: 5vw;
  }

  #desc2 {
    font-size: 50%;
    top: 0%;
  }
  .social2 {
    font-size: 5vw;
  }
  .social {
    font-size: 5vw;
  }
}

@media (max-width: 240px) {
  /* Limite */
}