header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 10vh;
  padding: 15px 50px 15px 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #ffffff00;
  color: white;
  z-index: 10;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

header .logo a {
  margin-left: 70px;
  text-decoration: none;
  font-size: 30px;
  color: white;
  font-family: "Ubuntu", sans-serif;
  font-weight: 700;
  cursor: pointer;
}

header nav {
  width: 40%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

header nav ul {
  width: 70%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

header nav ul li {
  display: inline-block;
  list-style: none;
}

header nav ul li .before,
header nav ul li .after {
  width: 0%;
  height: 3px;
  background-color: #fcdab7;
  margin: 2px auto;
}

header nav ul li:hover .before {
  width: 100%;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

header nav ul li:hover .after {
  width: 100%;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

header nav ul li a {
  display: inline-block;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: 500;
  color: #fcdab7;
  font-family: "Roboto", sans-serif;
}

header nav .contact {
  background-color: rgba(0, 0, 0, 0);
  padding: 10px 15px;
  border-radius: 5em;
  border: 2px solid #fcdab7;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: #fcdab7;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 2px;
  font-family: "Roboto", sans-serif;
  transition: 0.2s ease;
  opacity: 0;
  -webkit-animation: button-anime 0.8s ease-out 2.6s;
          animation: button-anime 0.8s ease-out 2.6s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

header nav .contact:hover {
  background-color: #fcdab7;
  color: #1a1b4b;
  -webkit-box-shadow: 0px 0px 10px 2px #fcdab7;
          box-shadow: 0px 0px 10px 2px #fcdab7;
  font-weight: 700;
}

@-webkit-keyframes button-anime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes button-anime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#home {
  width: 100%;
  overflow: hidden;
  height: 100vh;
  background-color: #000000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  background-image: url(../images/yeah.jpg);
  background-attachment: fixed;
  background-size: cover;
  text-align: left;
  color: white;
}

#home #intro {
  width: auto;
  font-family: "Poppins", sans-serif;
  position: relative;
  margin-bottom: 10vh;
  margin-left: 3.5vw;
}

#home #intro .name {
  font-size: 4.5vw;
  color: #ff3f81;
  background-color: #ff3f81;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%2323153c' fill-opacity='0.4' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
  background-clip: content-box;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}

#home #intro p {
  font-size: 1.2vw;
}

#home #intro .typed {
  color: #f7a400;
  font-weight: 700;
}

#home #intro .ctas button {
  display: inline-block;
  text-decoration: none;
  font-size: clamp(12px, 1.4vw, 14px);
  padding: 0.7vw 1.2vw;
  margin: 1vw auto;
  font-weight: 900;
  border-radius: 5px;
  text-transform: uppercase;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  outline: none;
}

#home #intro .ctas button:hover {
  cursor: pointer;
}

#home #intro .ctas .resume {
  background: #23153c;
  mix-blend-mode: screen;
  border: 2px solid #ff3f81;
}

#home #intro .ctas .resume a {
  color: #ff3f81;
  text-decoration: none;
}

#home #intro .ctas .resume:hover {
  background: #ff3f81;
  color: #23153c;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

#home #intro .ctas .resume:hover a {
  color: #23153c;
}

#home #intro .ctas .cta {
  background: #ff3f81;
  mix-blend-mode: screen;
  border: 2px solid #ff3f81;
}

#home #intro .ctas .cta a {
  color: #23153c;
  text-decoration: none;
}

#home #intro .ctas .cta:hover {
  color: #ff3f81;
  background: #23153c;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

#home #intro .ctas .cta:hover a {
  color: #ff3f81;
}

@-webkit-keyframes cursoranimation {
  0% {
    opacity: 0;
    content: "";
  }
  10% {
    opacity: 0.1;
    content: "|";
  }
  100% {
    opacity: 1;
  }
}

@keyframes cursoranimation {
  0% {
    opacity: 0;
    content: "";
  }
  10% {
    opacity: 0.1;
    content: "|";
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes intro-anime {
  0% {
    height: 30%;
  }
  100% {
    height: 0%;
  }
}

@keyframes intro-anime {
  0% {
    height: 30%;
  }
  100% {
    height: 0%;
  }
}

@-webkit-keyframes cta-anime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes cta-anime {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#about {
  background-color: #330033;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg fill-opacity='0.5'%3E%3Cpath fill='%23330033' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23330033' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23330033' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23330033' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23330033' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%233a003a' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23400040' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23470047' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%234e004e' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23550055' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 100vh;
  color: whitesmoke;
}

#about h2 {
  font-family: "Open Sans", sans-serif;
  font-size: 2.3vw;
  margin-left: 10px;
}

#about .container {
  height: 100%;
  padding: 5vh 5vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: auto;
}

#about .container p {
  font-family: "Ubuntu", sans-serif;
  font-size: 20px;
  line-height: 30px;
}

#about .container p a {
  color: #f7a400;
  text-decoration: none;
}

#about .container p a:hover {
  text-decoration: underline;
}

#about .container p span {
  color: #f7a400;
}

#about .container .wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5vw;
}

#about .container .wrap .study {
  border-left: 10px solid #f7a400;
  padding-left: 5px;
  margin: 15px;
  margin-left: 0px;
  color: white;
}

#about .container .wrap .college {
  font-family: "Ubuntu", sans-serif;
  font-size: 25px;
  font-weight: 500;
  margin: 5px auto;
}

#about .container .wrap .cgpa {
  color: #f7a400;
  font-style: italic;
  font-size: 14px;
}

#about .container .wrap .course {
  font-family: "Ubuntu", sans-serif;
  font-size: 18px;
  font-weight: 500;
  margin: 5px auto;
}

#about .container .wrap .branch {
  font-family: "Ubuntu", sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin: 5px auto;
}

#skills {
  height: 100vh;
  padding: 3%;
  position: fixed;
  top: 0;
  z-index: -10;
  background-color: #000433;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='268' height='268' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23404' stroke-width='2.5'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23505'%3E%3Ccircle cx='769' cy='229' r='11'/%3E%3Ccircle cx='539' cy='269' r='11'/%3E%3Ccircle cx='603' cy='493' r='11'/%3E%3Ccircle cx='731' cy='737' r='11'/%3E%3Ccircle cx='520' cy='660' r='11'/%3E%3Ccircle cx='309' cy='538' r='11'/%3E%3Ccircle cx='295' cy='764' r='11'/%3E%3Ccircle cx='40' cy='599' r='11'/%3E%3Ccircle cx='102' cy='382' r='11'/%3E%3Ccircle cx='127' cy='80' r='11'/%3E%3Ccircle cx='370' cy='105' r='11'/%3E%3Ccircle cx='578' cy='42' r='11'/%3E%3Ccircle cx='237' cy='261' r='11'/%3E%3Ccircle cx='390' cy='382' r='11'/%3E%3C/g%3E%3C/svg%3E");
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 1fr 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
  -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

#skills #skill-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 250px;
  height: 250px;
  margin: auto;
  color: #f7a400;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
 "Lucida Sans", Arial, sans-serif;
  font-size: 60px;
  text-align: center;
  line-height: 250px;
  background-color: #292a73;
  border-radius: 50%;
  -webkit-box-shadow: 0px 0px 20px 10px rgba(41, 42, 115, 0.6);
          box-shadow: 0px 0px 20px 10px rgba(41, 42, 115, 0.6);
}

#skills .skill {
  position: relative;
  font-size: 18px;
  color: #070a3f;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #3a9efd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-self: center;
  -ms-flex-item-align: center;
      align-self: center;
  -webkit-box-shadow: 0px 0px 20px #3a9efd;
          box-shadow: 0px 0px 20px #3a9efd;
}

#skills .skill span {
  display: block;
}

#skills #python {
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3/4;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

#skills #js {
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4/5;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

#skills #django {
  -ms-grid-column: 5;
  -ms-grid-column-span: 1;
  grid-column: 5/6;
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

#skills #express {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
}

#skills #tableau {
  -ms-grid-row: 2;
  -ms-grid-row-span: 1;
  grid-row: 2/3;
  -ms-grid-column: 6;
  -ms-grid-column-span: 1;
  grid-column: 6/7;
}

#skills #html {
  -ms-grid-column: 1;
  -ms-grid-column-span: 1;
  grid-column: 1/2;
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3/4;
}

#skills #css {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3/4;
  -ms-grid-column: 7;
  -ms-grid-column-span: 1;
  grid-column: 7/8;
}

#skills #react {
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4/5;
  -ms-grid-column: 2;
  -ms-grid-column-span: 1;
  grid-column: 2/3;
}

#skills #davinci {
  -ms-grid-row: 4;
  -ms-grid-row-span: 1;
  grid-row: 4/5;
  -ms-grid-column: 6;
  -ms-grid-column-span: 1;
  grid-column: 6/7;
}

#skills #wordpress {
  -ms-grid-row: 5;
  -ms-grid-row-span: 1;
  grid-row: 5/6;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3/4;
}

#skills #sql {
  -ms-grid-row: 5;
  -ms-grid-row-span: 1;
  grid-row: 5/6;
  -ms-grid-column: 4;
  -ms-grid-column-span: 1;
  grid-column: 4/5;
}

#skills #numpy {
  -ms-grid-row: 5;
  -ms-grid-row-span: 1;
  grid-row: 5/6;
  -ms-grid-column: 5;
  -ms-grid-column-span: 1;
  grid-column: 5/6;
}

#skills #cpp {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3/4;
  -ms-grid-column: 3;
  -ms-grid-column-span: 1;
  grid-column: 3/4;
}

#skills #matplotlib {
  -ms-grid-row: 3;
  -ms-grid-row-span: 1;
  grid-row: 3/4;
  -ms-grid-column: 5;
  -ms-grid-column-span: 1;
  grid-column: 5/6;
}

#projects {
  background-color: #292a73;
  background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='58' height='100.23' patternTransform='scale(5) rotate(40)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(214,85.1%,13.1%,1)'/><path d='M.111-33.307l-28.997 16.744zm.012.006l28.993 16.738-.004 33.485L.115 33.492l-28.997-16.57.004-33.485m40.992 43.198v-5.672l4.937 2.85M29.113 9.995L12.117.18l17-9.815M6.114 30.062L6.114 10.57l16.967 9.798m-51.963-3.446l57.998-33.485m-29 50.055l-.005-66.8m29.001 50.23l-57.99-33.485m57.992 19.63l-5-2.887 5.002-2.887m28.872-30.805L28.99-16.768zm.012.006l28.993 16.738-.004 33.485-28.997 16.57-28.997-16.57.004-33.485m-.004 33.485l57.998-33.485M57.992 33.287l-.004-66.799m29 50.229C67.615 5.529 48.285-5.633 28.999-16.768M28.998 2.86l4.998-2.886-4.998-2.886m6.029 23.076l16.964-9.794.002 19.49m-6-3.43v-5.67l-4.936 2.85M28.995 9.789L45.994-.026 28.998-9.84M-.003 66.943L-29 83.687zm.012.006l28.993 16.738-.004 33.485m0 0L.001 133.742m0 0l-28.997-16.57m0 0l.004-33.485m57.991 26.557l-16.996-9.814 17-9.815m-58 26.557l57.999-33.485M.001 133.742l-.004-66.8m29.001 50.23l-57.99-33.485m45.994-6.928l-5.005 2.89V73.87m11.005 6.353L5.999 90.04l-.002-19.633M29 103.317l-5-2.887 5.002-2.887m28.99-30.6L28.993 83.687zm.011.006l28.993 16.738-.004 33.485m0 0l-28.997 16.57m0 0l-28.997-16.57m0 0l.004-33.485m22.99-13.28v19.627l-16.995-9.813m-5.999 36.95l57.998-33.484m-29 50.055l-.005-66.8m29.001 50.23l-57.99-33.485M29 103.314L34 100.428 29 97.542m11.996-20.786l4.996 2.885v-5.77m-16.994 36.373l17-9.815L29 90.615M57.998 66.94l-.003-33.484zm-.012.008l-28.992 16.74L-.002 66.94l.148-33.397 28.849-16.827L57.99 33.463M.084 47.363L4.997 50.2.06 53.05m5.936 17.356l16.998-9.812v19.63m35.003-20.212L41 50.2l16.996-9.812m-57.878.067l16.88 9.745L.03 59.996m28.966-43.28v66.971M.144 33.544L57.999 66.94m-58 .001L57.99 33.463M40.994 76.759v-5.78l5.004 2.89m-5.004-50.221v5.772l5-2.886m-11 53.689V60.589l17.004 9.815m-40.003 3.467l5-2.887v5.775m41.002-29.444L53 50.2l4.998 2.885M22.995 20.217v19.589l-16.88-9.744m5.97-3.481l4.91 2.835v-5.7m18-3.535v19.63l16.997-9.813'  stroke-linecap='square' stroke-width='3' stroke='hsla(311,39.4%,19.4%,1)' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
  background-position: center;
  background-size: cover;
  display: -ms-grid;
  display: grid;
  place-items: center;
}

#projects .container {
  margin-top: 12vh;
  margin-bottom: 20vh;
}

#projects .container h2 {
  color: #f7a400;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  font-size: 40px;
  text-align: center;
  padding: 3vh 0 4vh 0;
  background-color: #292a73;
}

#projects .container .project {
  margin: 10vh auto;
  width: 95%;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 3.5fr 1.5fr;
      grid-template-columns: 3.5fr 1.5fr;
  height: 35vh;
  -webkit-box-shadow: 0px 1px 5px black;
          box-shadow: 0px 1px 5px black;
}

#projects .container .project:nth-of-type(2n) {
  -ms-grid-columns: 1.5fr 3.5fr;
      grid-template-columns: 1.5fr 3.5fr;
}

#projects .container .project:nth-of-type(2n) .pro-txt {
  text-align: left;
  border-left: 0px solid #000;
  border-right: 3px solid #f7a400;
}

#projects .container .project:nth-of-type(2n) .pro-txt .tools {
  margin-left: 0;
}

#projects .container .project:nth-of-type(2n) a {
  -ms-grid-row: 1;
  -ms-grid-row-span: 1;
  grid-row: 1/2;
}

#projects .container .project:nth-of-type(2n) a img {
  float: left;
}

#projects .container .project .pro-txt {
  text-align: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  padding-left: 10px;
  border-left: 3px solid #f7a400;
}

#projects .container .project .pro-txt h3 {
  color: #fcdab7;
  font-size: 25px;
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
}

#projects .container .project .pro-txt p {
  color: white;
  font-family: "Poppins";
  line-height: 1.2em;
  margin: 10px auto;
}

#projects .container .project .pro-txt .tools {
  margin-right: 0px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
}

#projects .container .project .pro-txt .tools span {
  display: block;
  margin: auto 4px;
  padding: auto 4px;
  background-color: #fcdab7;
  color: #1a1b4b;
  font-weight: 600;
}

#projects .container .project .pro-img img {
  width: 95%;
  height: 35vh;
  float: right;
}

#contact {
  height: 60vh;
  display: -ms-grid;
  display: grid;
  place-items: center;
  background-color: #1a1b4b;
}

#contact .container {
  margin-top: 10vh;
  height: 30vh;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 30px;
}

#contact .container article {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 40px auto;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

#contact .container article .icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #3a9efd;
  line-height: 60px;
  font-size: 21px;
}

#contact .container article .icon:hover {
  -webkit-box-shadow: 0px 0px 10px 2px #3a9efd;
          box-shadow: 0px 0px 10px 2px #3a9efd;
}

#contact .container article .icon:hover i {
  -webkit-transform: translateY(-5px) scale(1.4);
          transform: translateY(-5px) scale(1.4);
}

#contact .container article .icon i {
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

#contact .container article div h3 {
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
 sans-serif;
  font-size: 25px;
  font-weight: 400;
  color: #fcdab7;
  margin: 5px auto;
}

#contact .container article div p {
  font-family: "Raleway";
  font-size: 16px;
  font-weight: 500;
  color: #f7a400;
  margin: 5px auto;
}

#contact .container article div p a {
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  color: #f7a400;
  margin: 5px auto;
}

footer {
  width: 100%;
  height: 30vh;
  display: -ms-grid;
  display: grid;
  place-items: center;
  background-color: #292a73;
}

footer > div {
  margin-top: 20px;
  text-align: center;
}

footer > div p {
  margin: 15px auto;
  font-size: 18px;
  color: #fcdab7;
  font-family: "Raleway";
  font-weight: 500;
}

footer > div > div {
  margin: 20px auto;
  width: 60%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

footer > div > div a:hover i {
  color: aqua;
}

footer > div > div a i {
  font-size: 25px;
  color: #3a9efd;
  -webkit-transition: all 0.1s ease-in;
  transition: all 0.1s ease-in;
}

footer > div #rights {
  font-size: 16px;
  margin: 10px auto;
}

footer > div #time {
  margin: 5px auto;
  font-size: 14px;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  scroll-behavior: smooth;
}

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

section {
  width: 100%;
}

#third {
  height: 100vh;
  background-color: rgba(0, 0, 0, 0);
}

.container {
  width: 85%;
}

.hide {
  height: 15vh;
  background-color: #3a9efd;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.nav-back {
  background-color: #3a9efd;
}

.nav-back .logo a {
  color: #070a3f;
}

.nav-back ul li .before,
.nav-back ul li .after {
  background-color: #070a3f;
}

.nav-back ul li a {
  color: #070a3f;
}

.nav-back nav .contact {
  color: #070a3f;
  border-color: #070a3f;
}

.nav-back nav .contact:hover {
  background-color: #070a3f;
  color: #3a9efd;
  -webkit-box-shadow: 0px 0px 10px 2px #070a3f;
          box-shadow: 0px 0px 10px 2px #070a3f;
}

.nav-back2 {
  background-color: #1a1b4b;
}

.nav-back2 .logo a {
  color: white;
}

.nav-back2 ul li .before,
.nav-back2 ul li .after {
  background-color: #fcdab7;
}

.nav-back2 ul li a {
  color: #fcdab7;
}

.nav-back2 nav .contact {
  color: #fcdab7;
  border-color: #fcdab7;
}

.nav-back2 nav .contact:hover {
  background-color: #fcdab7;
  color: #1a1b4b;
  -webkit-box-shadow: 0px 0px 10px 2px #fcdab7;
          box-shadow: 0px 0px 10px 2px #fcdab7;
}

.toast {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  padding: 1rem;
  font-size: 0.7rem;
  font-family: Montserrat;
  background: black;
  color: white;
  border-radius: 5px;
  z-index: 1000000;
}
/*# sourceMappingURL=styles.css.map */