@charset "UTF-8";
/*========================== IMPORT FONTS ==========================*/
@import url("https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght@400;500;600;700;800&family=Cabin+Sketch&family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400&display=swap");
/*========================== IMPORT VARIABLES, MIXINS AND ANIMATIONS ==========================*/
/*========================== COLORS ==========================*/
/*========================== BACKGROUNDS ==========================*/
/*========================== FONT FAMILY ==========================*/
/*========================== FONT SIZE FOR TITLES AND SUBTITLES ==========================*/
/*========================== FONT SIZE FOR SMALLER TEXTS ==========================*/
/*========================== FONT WEIGHT ==========================*/
/*========================== MIXINS ==========================*/
/*========================== ANIMATIONS ==========================*/
@keyframes moveBanner {
  from {
    opacity: 0;
    transform: translateY(5rem) rotateY(-30deg);
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes moveBanner-2 {
  from {
    opacity: 0;
    transform: translateX(-10rem);
  }
  to {
    transform: translateX(0);
    opacity: 0.8;
  }
}
@keyframes imageOpacity {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 1200px;
  }
}
@keyframes toUp {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
}
@keyframes showDD {
  from {
    opacity: 0;
    transform: translate3d(0, -15px, 0);
    max-height: 0;
  }
  to {
    opacity: 0.8;
    transform: translate3d(0, 0, 0);
    max-height: 500px;
  }
}
/*========================== ANIMATION WHEN SCROLLING ==========================*/
/*========== ALL ==========*/
.js .js-scroll-toUp,
.js .js-scroll-toRight,
.js .js-scroll-toLeft,
.js .js-scroll-opacity {
  opacity: 0;
  transition: all 0.8s ease-in-out;
}

/*========== TO UP ==========*/
.js .js-scroll-toUp {
  transform: translate3d(0, 5rem, 0) rotateY(-30deg);
}

.js .js-scroll-toUp.active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

/*========== TO RIGHT ==========*/
.js .js-scroll-toRight {
  transform: translate3d(-5rem, 0, 0);
}

.js .js-scroll-toRight.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/*========== TO LEFT ==========*/
.js .js-scroll-toLeft {
  transform: translate3d(5rem, 0, 0);
}

.js .js-scroll-toLeft.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/*========== OPACITY ==========*/
.js .js-scroll-opacity.active {
  transition-delay: 0.2s;
  opacity: 1;
}

/*========================== IMPORT PAGES ==========================*/
/*========================== ABOUT ==========================*/
.about {
  width: 100%;
  background: #0b0a17;
  padding: 40px 20px 100px 20px;
}
.about .about-container {
  max-width: 1200px;
  margin: 0 auto;
}
.about .about-container h1 {
  color: #fafafa;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  font-size: 2.5em;
  font-weight: 600;
}
.about .about-container h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: #4829a6;
}
.about .about-container p {
  color: #cccccc;
  text-align: center;
  font-size: 1.25em;
  margin-bottom: 80px;
}
.about .about-container p::before, .about .about-container p::after {
  content: "*";
  color: #4829a6;
}
.about .about-container .about-content {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
.about .about-container .about-content .dl-about {
  width: 420px;
}
.about .about-container .about-content .dl-about .text {
  color: #cccccc;
  margin-bottom: 40px;
}
.about .about-container .about-content .dl-about .text:last-child {
  margin-bottom: 0;
}
.about .about-container .about-content .dl-about dt {
  margin-top: -10px;
  margin-bottom: 5px;
  font-size: 1.25em;
  font-weight: 600;
}
.about .about-container .about-content .dl-about dt i {
  font-size: 1em;
  margin-right: 0.5em;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}
.about .about-container .about-content .dl-about dt.active i {
  transform: rotateZ(90deg);
}
.about .about-container .about-content .dl-about dd {
  font-size: 1.125em;
  font-weight: 400;
  margin-left: 1.1em;
  animation: showDD 0.5s forwards;
}
.js .about .about-container .about-content .dl-about dd {
  display: none;
}
.about .about-container .about-content .dl-about dd.active {
  display: block;
}
.about .about-container .about-content .dl-about dd a {
  font-weight: 600;
  color: #4829a6;
}
.about .about-container .about-content .dl-about dd a:hover {
  text-decoration: underline;
}
.about .about-container .about-content .img img {
  width: 200px;
  height: 200px;
  border: 2px solid #4829a6;
  border-radius: 50%;
  padding: 8px;
  animation: toUp 2.5s ease-in-out infinite alternate;
}

/*========================== RESPONSIVE ABOUT ==========================*/
@media screen and (max-width: 825px) {
  .about .about-container p {
    display: none;
  }
  .about .about-container .about-content {
    flex-direction: column-reverse;
    align-items: center;
  }
  .about .about-container .about-content .dl-about {
    max-width: 100%;
    text-align: center;
  }
  .about .about-container .about-content .dl-about dd {
    margin-left: 0;
  }
  .about .about-container .about-content .img {
    margin-bottom: 40px;
  }
  .about .about-container .about-content .img img {
    animation: none;
  }
}
@media screen and (max-width: 390px) {
  .about .about-container .about-content .dl-about dt {
    font-size: 1.125em;
  }
  .about .about-container .about-content .dl-about dd {
    font-size: 1em;
  }
  .about .about-container .about-content .img img {
    width: 170px;
    height: 170px;
  }
}
/*========================== SKILLS ==========================*/
.skills {
  width: 100%;
  background: #080713;
  padding: 40px 20px 100px 20px;
}
.skills .skills-container {
  max-width: 1200px;
  margin: 0 auto;
}
.skills .skills-container h1 {
  font-size: 2.5em;
  font-weight: 600;
  color: #fafafa;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}
.skills .skills-container h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: #4829a6;
}
.skills .skills-container p {
  color: #cccccc;
  text-align: center;
  margin-bottom: 80px;
  font-size: 1.25em;
}
.skills .skills-container .skills-content .cards-container {
  max-width: 500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}
.skills .skills-container .skills-content .cards-container .card {
  width: 140px;
  height: 140px;
  background: #0e0d1e;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 2px solid #4829a6;
  border-radius: 8px;
  transition: all 0.5s ease-in-out;
  position: relative;
}
.skills .skills-container .skills-content .cards-container .card:hover {
  transform: scale(1.1);
}
.skills .skills-container .skills-content .cards-container .card i {
  font-size: 70px;
  color: #4829a6;
}
.skills .skills-container .skills-content .cards-container .html:hover:before,
.skills .skills-container .skills-content .cards-container .css:hover:before,
.skills .skills-container .skills-content .cards-container .js:hover:before,
.skills .skills-container .skills-content .cards-container .sass:hover:before,
.skills .skills-container .skills-content .cards-container .linux:hover:before,
.skills .skills-container .skills-content .cards-container .git:hover:before {
  position: absolute;
  color: #fafafa;
  background: #0e0d1e;
  width: 140px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 8px;
}
.skills .skills-container .skills-content .cards-container .html::after,
.skills .skills-container .skills-content .cards-container .css::after,
.skills .skills-container .skills-content .cards-container .js::after,
.skills .skills-container .skills-content .cards-container .sass::after,
.skills .skills-container .skills-content .cards-container .linux::after,
.skills .skills-container .skills-content .cards-container .git::after {
  position: absolute;
  bottom: 0;
  font-weight: 600;
  background: #0b0a17;
  width: 100%;
  text-align: center;
  padding: 2px 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.skills .skills-container .skills-content .cards-container .html:hover::before,
.skills .skills-container .skills-content .cards-container .css:hover::before,
.skills .skills-container .skills-content .cards-container .js:hover::before {
  top: -45px;
}
.skills .skills-container .skills-content .cards-container .sass:hover::before,
.skills .skills-container .skills-content .cards-container .linux:hover::before,
.skills .skills-container .skills-content .cards-container .git:hover::before {
  bottom: -45px;
}
.skills .skills-container .skills-content .cards-container .html:hover::before {
  content: "HTML";
  box-shadow: 0 2px 0 #FF5733;
}
.skills .skills-container .skills-content .cards-container .html::after {
  content: "HTML";
}
.skills .skills-container .skills-content .cards-container .css:hover::before {
  box-shadow: 0 2px 0 dodgerblue;
  content: "CSS";
}
.skills .skills-container .skills-content .cards-container .css::after {
  content: "CSS";
}
.skills .skills-container .skills-content .cards-container .js:hover::before {
  content: "JavaScript";
  box-shadow: 0 2px 0 yellow;
}
.skills .skills-container .skills-content .cards-container .js::after {
  content: "JavaScript";
}
.skills .skills-container .skills-content .cards-container .sass:hover::before {
  content: "Sass";
  box-shadow: 0 -2px 0 rgb(172, 0, 172);
}
.skills .skills-container .skills-content .cards-container .sass::after {
  content: "Sass";
}
.skills .skills-container .skills-content .cards-container .linux:hover::before {
  content: "Linux";
  box-shadow: 0 -2px 0 #6d57b0;
}
.skills .skills-container .skills-content .cards-container .linux::after {
  content: "Linux";
}
.skills .skills-container .skills-content .cards-container .git:hover::before {
  content: "Git";
  box-shadow: 0 -2px 0 #FF5733;
}
.skills .skills-container .skills-content .cards-container .git::after {
  content: "Git";
}
.skills .skills-container .skills-content .cards-container .html::after,
.skills .skills-container .skills-content .cards-container .css::after,
.skills .skills-container .skills-content .cards-container .js::after,
.skills .skills-container .skills-content .cards-container .sass::after,
.skills .skills-container .skills-content .cards-container .linux::after,
.skills .skills-container .skills-content .cards-container .git::after {
  display: none;
}

/*========================== RESPONSIVE SKILLS ==========================*/
@media screen and (max-width: 825px) {
  .skills .skills-container .skills-content .cards-container .card {
    padding-bottom: 24px;
  }
  .skills .skills-container .skills-content .cards-container .html:hover::before,
  .skills .skills-container .skills-content .cards-container .css:hover::before,
  .skills .skills-container .skills-content .cards-container .js:hover::before,
  .skills .skills-container .skills-content .cards-container .sass:hover::before,
  .skills .skills-container .skills-content .cards-container .linux:hover::before,
  .skills .skills-container .skills-content .cards-container .git:hover::before {
    display: none;
  }
  .skills .skills-container .skills-content .cards-container .html::after,
  .skills .skills-container .skills-content .cards-container .css::after,
  .skills .skills-container .skills-content .cards-container .js::after,
  .skills .skills-container .skills-content .cards-container .sass::after,
  .skills .skills-container .skills-content .cards-container .linux::after,
  .skills .skills-container .skills-content .cards-container .git::after {
    display: block;
    color: #cccccc;
  }
}
/*========================== PROJECTS ==========================*/
.projects {
  width: 100%;
  background: #0b0a17;
  padding: 40px 20px 140px 20px;
  overflow-x: hidden;
}
.projects .projects-container {
  max-width: 1200px;
  margin: 0 auto;
}
.projects .projects-container h1 {
  font-size: 2.5em;
  font-weight: 600;
  color: #fafafa;
  margin-bottom: 80px;
  text-align: center;
  position: relative;
}
.projects .projects-container h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: #4829a6;
}
.projects .projects-container .cards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}
.projects .projects-container .cards-container .card {
  width: 300px;
  height: 200px;
  text-align: center;
  line-height: 200px;
  background: #0e0d1e;
  border-radius: 8px;
  border: 2px solid #4829a6;
  transition: all 0.5s ease-in-out;
}
.projects .projects-container .cards-container .card:hover {
  transform: scale(1.1);
  box-shadow: 0 0 12px #4829a6;
}
.projects .projects-container .cards-container .card:hover p {
  opacity: 1;
}
.projects .projects-container .cards-container .card p {
  font-style: italic;
  font-size: 1.5em;
  color: #fafafa;
  opacity: 0.8;
  transition: all 0.5s ease-in-out;
}

/*========================== START CONTACT ==========================*/
.contact {
  width: 100%;
  background: #080713;
  padding: 40px 20px 100px 20px;
  overflow-x: hidden;
}
.contact .contact-container {
  max-width: 1200px;
  margin: 0 auto;
}
.contact .contact-container h1 {
  font-size: 2.5em;
  font-weight: 600;
  color: #fafafa;
  margin-bottom: 40px;
  position: relative;
}
.contact .contact-container h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: #4829a6;
}
.contact .contact-container .contact-content {
  display: flex;
  justify-content: space-between;
}
.contact .contact-container .contact-content .networks {
  margin-top: 80px;
}
.contact .contact-container .contact-content .networks .ul-networks {
  list-style: none;
  border-radius: 2px;
}
.contact .contact-container .contact-content .networks .ul-networks li a {
  color: #fafafa;
  display: block;
  padding: 15px 20px;
  text-align: center;
  border-radius: 2px;
  font-size: 1.125em;
  transition: all 0.3s ease-in-out;
  opacity: 0.8;
}
.contact .contact-container .contact-content .networks .ul-networks li a:hover {
  opacity: 1;
  background: #4829a6;
}
.contact .contact-container .contact-content .form {
  width: 500px;
}
.contact .contact-container .contact-content .form .spacer-input {
  margin-bottom: 1em;
}
.contact .contact-container .contact-content .form .spacer-input label {
  display: block;
  margin-bottom: 0.125em;
  font-size: 1.125em;
  color: #cccccc;
}
.contact .contact-container .contact-content .form .spacer-input label::after {
  content: " *";
  color: #4829a6;
}
.contact .contact-container .contact-content .form .spacer-input input,
.contact .contact-container .contact-content .form .spacer-input textarea {
  background: #0e0d1e;
  color: #cccccc;
  font-size: 1em;
  border: none;
  outline: none;
  border-radius: 2px;
  width: 100%;
  padding: 0.8em;
  border: 1px solid transparent;
}
.contact .contact-container .contact-content .form .spacer-input input:focus,
.contact .contact-container .contact-content .form .spacer-input textarea:focus {
  border: 1px solid #4829a6;
}
.contact .contact-container .contact-content .form .spacer-input textarea {
  resize: vertical;
  height: 225px;
}
.contact .contact-container .contact-content .form button {
  width: 150px;
  height: 50px;
  border-radius: 2px;
  border: none;
  outline: none;
  color: #fafafa;
  background: #4829a6;
  background: -moz-linear-gradient(to right, #4829a6, #251554);
  background: -webkit-linear-gradient(to right, #4829a6, #251554);
  background: linear-gradient(to right, #4829a6, #251554);
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  font-size: 1.125em;
  font-weight: 600;
}
.contact .contact-container .contact-content .form button:hover {
  width: 180px;
}

/*========================== RESPONSIVE CONTACT ==========================*/
@media screen and (max-width: 825px) {
  .contact .contact-container h1 {
    text-align: center;
  }
  .contact .contact-container .contact-content {
    flex-direction: column;
    align-items: center;
    gap: 80px;
  }
  .contact .contact-container .contact-content .networks {
    margin-top: 0;
  }
  .contact .contact-container .contact-content .networks .ul-networks {
    display: flex;
    flex-direction: row;
  }
  .contact .contact-container .contact-content .form {
    width: 100%;
    margin: 0 auto;
  }
  .contact .contact-container .contact-content .form button {
    width: 100%;
    transition: all 0.3s ease-in-out;
  }
  .contact .contact-container .contact-content .form button:hover {
    width: 100%;
    box-shadow: 0 0 10px #4829a6;
  }
}
/*========================== THANKS PAGE ==========================*/
/*========================== THANKS PAGE ==========================*/
.thanks {
  width: 100%;
  height: 100vh;
  background: #080713;
  padding: 80px 20px;
}
.thanks .thanks-container {
  max-width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.thanks .thanks-container .img {
  margin-bottom: 20px;
}
.thanks .thanks-container .img img {
  width: 200px;
  height: 200px;
  border: 1px solid #4829a6;
  border-radius: 50%;
  padding: 8px;
  opacity: 0;
  animation: moveBanner-2 1.5s 0.2s forwards;
}
.thanks .thanks-container h1 {
  color: #4829a6;
  line-height: 1;
  opacity: 0;
  animation: moveBanner 1.5s 0.4s forwards;
  font-size: 2.5em;
  font-weight: 600;
}
.thanks .thanks-container h2 {
  color: #cccccc;
  margin-bottom: 40px;
  opacity: 0;
  animation: moveBanner 1.5s 0.6s forwards;
  font-size: 2em;
  font-weight: 600;
}
.thanks .thanks-container h2::after {
  content: " :)";
  color: #4829a6;
}
.thanks .thanks-container a {
  display: block;
  color: #fafafa;
  background: #4829a6;
  padding: 10px 20px;
  text-align: center;
  border-radius: 2px;
  font-size: 1.125em;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  animation: moveBanner 1.5s 0.8s forwards;
}
.thanks .thanks-container a:hover {
  transform: scaleX(1.1);
  box-shadow: 0 0 10px #4829a6;
}
.thanks .thanks-container a::before {
  content: "🡨";
  margin-right: 15px;
}

/*========================== RESPONSIVE THANKS PAGE ==========================*/
@media screen and (max-width: 536px) {
  .thanks .thanks-container .img img {
    transform: scale(0.8);
  }
  .thanks .thanks-container h1,
  .thanks .thanks-container h2 {
    text-align: center;
  }
  .thanks .thanks-container h1 {
    font-size: 2em;
  }
  .thanks .thanks-container h2 {
    font-size: 1.5em;
  }
}
@media screen and (max-height: 430px) {
  .thanks {
    height: 100%;
  }
}
/*========================== RESET ==========================*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family: "Kanit", Arial, Helvetica, sans-serif;
}

a {
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #fafafa;
  font-size: 1em;
  -webkit-font-smoothing: antialiased;
}
body::-webkit-scrollbar {
  width: 8px;
  background: #0b0a1a;
}
body::-webkit-scrollbar-thumb {
  background: #4829a6;
  background: -moz-linear-gradient(to bottom, #4829a6, #251554);
  background: -webkit-linear-gradient(to bottom, #4829a6, #251554);
  background: linear-gradient(to bottom, #4829a6, #251554);
  border-radius: 5px;
}

/*========================== HEADER ==========================*/
.header {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  padding: 0 20px;
  background: #0b0a1a;
  border-bottom: 1px solid rgba(114, 114, 126, 0.2);
  z-index: 1;
}
.header .header-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header .header-container .logo a {
  color: #fafafa;
  font-size: 1.5em;
  font-family: "Cabin Sketch", Arial, Helvetica, sans-serif;
  font-weight: bold;
}
.header .header-container .logo a::before {
  content: "<";
  color: #4829a6;
}
.header .header-container .logo a::after {
  content: "/>";
  color: #4829a6;
}
.header .header-container #btn-menu-mobile {
  display: none;
}
.header .header-container .ul-menu {
  display: flex;
  list-style: none;
  line-height: 80px;
}
.header .header-container .ul-menu li:first-child a {
  background: #4829a6;
  opacity: 1;
}
.header .header-container .ul-menu li:first-child a::after {
  display: none;
}
.header .header-container .ul-menu a {
  display: block;
  padding: 0 20px;
  font-size: 1.125em;
  font-weight: 600;
  color: #fafafa;
  opacity: 0.8;
  transition: all 0.3s ease-in-out;
  position: relative;
}
.header .header-container .ul-menu a::after {
  content: "";
  width: 0%;
  height: 2px;
  background: #4829a6;
  background: -webkit-linear-gradient(to right, #160d33, #4829a6);
  background: -moz-linear-gradient(to right, #160d33, #4829a6);
  background: linear-gradient(to right, #160d33, #4829a6);
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 0.3s ease-in-out;
}
.header .header-container .ul-menu a:hover {
  background: #151231;
  opacity: 1;
}
.header .header-container .ul-menu a:hover::after {
  width: 100%;
}

/*========================== RESPONSIVE HEADER + MENU MOBILE ==========================*/
@media screen and (max-width: 825px) {
  .header {
    position: absolute;
  }
  .header .header-container .ul-menu {
    display: block;
    position: absolute;
    top: 80px;
    right: 0;
    width: 100%;
    height: 0;
    text-align: center;
    line-height: 0;
    background: #0b0a1a;
    z-index: 1000;
    transition: all 0.5s ease-in-out;
    visibility: hidden;
    overflow-y: hidden;
  }
  .header .header-container .ul-menu li:first-child a {
    background: #4829a6;
    background: -moz-linear-gradient(to right, transparent, #512eba, transparent);
    background: -webkit-linear-gradient(to right, transparent, #512eba, transparent);
    background: linear-gradient(to right, transparent, #512eba, transparent);
  }
  .header .header-container .ul-menu a {
    padding: 2.5em !important;
  }
  .header .menu-navigation.active .ul-menu {
    visibility: visible;
    height: calc(100vh - 80px);
    overflow-y: auto;
  }
  .header .header-container .menu-navigation a {
    display: block;
    padding: 1.25em;
  }
  .header .header-container .menu-navigation a:hover {
    opacity: 1;
    background: #100e26;
    background: -moz-linear-gradient(to right, transparent, #160d33, transparent);
    background: -webkit-linear-gradient(to right, transparent, #160d33, transparent);
    background: linear-gradient(to right, transparent, #160d33, transparent);
  }
  .header .header-container .menu-navigation a::after {
    transition: all 0.5s linear;
  }
  .header .menu-navigation #btn-menu-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 3px;
    background: #4829a6;
  }
  .header .menu-navigation #btn-menu-mobile #menu-hamburguer {
    color: #fafafa;
    border-top: 3px solid;
    width: 25px;
  }
  .header .menu-navigation #btn-menu-mobile #menu-hamburguer::before, .header .menu-navigation #btn-menu-mobile #menu-hamburguer::after {
    content: "";
    display: block;
    width: 25px;
    height: 3px;
    background: currentColor;
    margin-top: 6px;
    transition: all 0.5s;
    position: relative;
  }
  .header .menu-navigation.active #btn-menu-mobile #menu-hamburguer {
    border-top-color: transparent;
  }
  .header .menu-navigation.active #btn-menu-mobile #menu-hamburguer::before {
    transform: rotate(135deg);
  }
  .header .menu-navigation.active #btn-menu-mobile #menu-hamburguer::after {
    transform: rotate(-135deg);
    top: -9px;
  }
}
@media screen and (max-height: 376px) {
  .header {
    height: 60px;
  }
  .header .header-container .ul-menu {
    top: 60px;
  }
  .header .menu-navigation.active .ul-menu {
    height: calc(100vh - 60px);
  }
}
/*==========================  HOME ==========================*/
.main {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  background: #080713;
  background: -moz-linear-gradient(120deg, #080713, #100e26);
  background: -webkit-linear-gradient(120deg, #080713, #100e26);
  background: linear-gradient(120deg, #080713, #100e26);
  padding: 80px 20px 20px 20px;
}
.main .main-container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main .main-container .sec-content {
  display: flex;
  align-items: center;
  gap: 40px;
}
.main .main-container .sec-content .network-navigation ul {
  list-style: none;
}
.main .main-container .sec-content .network-navigation ul li:first-child a {
  animation: moveBanner-2 1s 0.2s forwards;
}
.main .main-container .sec-content .network-navigation ul li:last-child a {
  animation: moveBanner-2 1s 0.6s forwards;
}
.main .main-container .sec-content .network-navigation ul li a {
  color: #fafafa;
  display: block;
  padding: 15px 20px;
  text-align: center;
  border-radius: 2px;
  font-size: 1.125em;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  animation: moveBanner-2 1s 0.4s forwards;
}
.main .main-container .sec-content .network-navigation ul li a:hover {
  opacity: 1 !important;
  background: #4829a6;
}
.main .main-container .sec-content .content {
  max-width: 400px;
}
.main .main-container .sec-content .content h1 {
  color: #fafafa;
  animation: moveBanner 1s 0.2s forwards;
  opacity: 0;
  line-height: 1.125;
  margin-bottom: 1rem;
  text-transform: uppercase;
  font-size: 3em;
  font-weight: 600;
}
.main .main-container .sec-content .content h1::after {
  content: ":)";
  color: #4829a6;
  font-size: 0.92em;
  font-family: sans-serif;
}
.main .main-container .sec-content .content strong {
  color: #cccccc;
  display: block;
  margin-bottom: 15px;
  opacity: 0;
  animation: moveBanner 1s 0.4s forwards;
  font-size: 1.25em;
  font-weight: 600;
}
.main .main-container .sec-content .content p {
  max-width: 380px;
  color: #cccccc;
  font-size: 1.125em;
  font-weight: 400;
  opacity: 0;
  animation: moveBanner 1s 0.6s forwards;
}
.main .main-container .sec-content .content a {
  display: block;
  max-width: 150px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 2px;
  font-size: 1.125em;
  color: #fafafa;
  background: #4829a6;
  background: -webkit-linear-gradient(to right, #4829a6, #251554);
  background: -moz-linear-gradient(to right, #4829a6, #251554);
  background: linear-gradient(to right, #4829a6, #251554);
  margin-top: 40px;
  transition: all 0.5s ease-in-out;
  opacity: 0;
  animation: moveBanner 1s 0.8s forwards;
}
.main .main-container .sec-content .content a:hover {
  max-width: 180px;
}
.main .main-container .sec-content .content a i {
  margin-left: 10px;
}
.main .main-container .isometric {
  background: none;
  background: -moz-linear-gradient(to top, #251554, transparent 50%);
  background: -webkit-linear-gradient(to top, #251554, transparent 50%);
  background: linear-gradient(to top, #251554, transparent 50%);
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  opacity: 0;
  animation: imageOpacity 1.5s 0.2s forwards;
}
.main .main-container .isometric img {
  width: 240px;
  padding: 0 10px 20px 10px;
}

/*========================== RESPONSIVE HOME ==========================*/
@media screen and (max-width: 825px) {
  .main .main-container .isometric,
  .network-navigation {
    display: none;
  }
  .main .main-container .sec-content .content h1 {
    font-size: 2.5em;
  }
}
@media screen and (max-width: 390px) {
  .main .main-container .sec-content .content {
    max-width: 300px;
  }
  .main .main-container .sec-content .content h1 {
    font-size: 1.85em;
  }
  .main .main-container .sec-content .content strong,
  .main .main-container .sec-content .content p,
  .main .main-container .sec-content .content a {
    font-size: 1em;
  }
}
@media screen and (max-height: 376px) {
  .main {
    height: 100%;
    padding: 80px 20px;
  }
}
@media screen and (max-width: 285px) {
  .main .main-container .sec-content .content {
    max-width: 220px;
  }
}
/*========================== FOOTER ==========================*/
.footer {
  width: 100%;
  height: 120px;
  background: #080713;
  padding: 0 20px;
}
.footer .footer-container {
  max-width: 1200px;
  margin: 0 auto;
  height: 100%;
  border-top: 1px solid rgba(114, 114, 126, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer .footer-container div p:first-child {
  text-decoration: line-through;
}
.footer .footer-container p {
  font-size: 1.125em;
  color: #cccccc;
  line-height: 1.3;
}
.footer .footer-container p a {
  color: #fafafa;
  font-family: "Cabin Sketch", Arial, Helvetica, sans-serif;
  font-weight: bold;
}
.footer .footer-container p a::before {
  content: "<";
  color: #4829a6;
}
.footer .footer-container p a::after {
  content: "/>";
  color: #4829a6;
}

/*========================== RESPONSIVE FOOTER ==========================*/
@media screen and (max-width: 825px) {
  .footer {
    height: 150px;
  }
  .footer .footer-container {
    flex-direction: column;
    justify-content: center;
    gap: 30px;
  }
  .footer .footer-container div {
    text-align: center;
  }
}

/*# sourceMappingURL=styles.css.map */