:root {
  --accent-color: #f6bb17;
  --primary-dark-color: #1A2330;
  --secondary-dark-color: #393E46;
  --white-gray: #eeeeee;
  font-size: 62.5%;
}

.darkMode {
  --accent-color: #f6bb17;
  --primary-dark-color: #EEEEEE;
  --white-gray: #1A2330;
}

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

a {
  text-decoration: none;
  color: unset;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background-color: var(--white-gray);
  color: var(--primary-dark-color);
  font-family: "Montserrat", sans-serif;
  font-size: 1.6rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
}

#main {
  position: relative;
}

.paperOverlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  mix-blend-mode: multiply;
  opacity: 0.9;
  background-repeat: repeat;
  pointer-events: none;
  background-image: url("data:image/jpeg;base64,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");
}

/* ------------------------------Test ----------------------------*/
.intro {
  height: 100vh;
}

.intro video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.vid h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: white;
  text-align: center;
  text-transform: capitalize;
}

section.vid {
  height: 3000px;
  position: relative;
}

section.vid div.holder {
  position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
}

section.vid canvas {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* scrolldown icon  */
.container_scrollDown {
  position: absolute;
  bottom: 10%;
  left: 50%;
  z-index: 999;
  width: 24px;
  height: 24px;
}

.chevron {
  position: absolute;
  width: 28px;
  height: 8px;
  opacity: 0;
  transform: scale3d(0.5, 0.5, 0.5);
  animation: move 3s ease-out infinite;
}

.chevron:first-child {
  animation: move 3s ease-out 1s infinite;
}

.chevron:nth-child(2) {
  animation: move 3s ease-out 2s infinite;
}

.chevron:before,
.chevron:after {
  content: " ";
  position: absolute;
  top: 0;
  height: 100%;
  width: 51%;
  background: var(--primary-dark-color);
}

.chevron:before {
  left: 0;
  transform: skew(0deg, 30deg);
}

.chevron:after {
  right: 0;
  width: 50%;
  transform: skew(0deg, -30deg);
}

@keyframes move {
  25% {
    opacity: 1;
  }
  33% {
    opacity: 1;
    transform: translateY(30px);
  }
  67% {
    opacity: 1;
    transform: translateY(40px);
  }
  100% {
    opacity: 0;
    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);
  }
}
.text {
  display: block;
  margin-top: 75px;
  margin-left: -30px;
  font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
  font-size: 12px;
  color: var(--primary-dark-color);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.25;
  animation: pulse 2s linear alternate infinite;
}

@keyframes pulse {
  to {
    opacity: 1;
  }
}
/* From Uiverse.io by BHARGAVPATEL1244 */
.buttons button {
  outline: none;
  cursor: pointer;
  border: none;
  padding: 1.5rem 3rem;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  position: relative;
  display: inline-block;
  letter-spacing: 0.05rem;
  font-weight: 700;
  font-size: 17px;
  border-radius: 500px;
  overflow: hidden;
  background: var(--accent-color);
  color: var(--white-gray);
  margin-bottom: 10px;
  transition-duration: 0.1s;
}
.buttons button:hover {
  transform: translateY(-5px);
  cursor: pointer;
}
.buttons button:active {
  transform: translateY(3px);
  transform: scale(1);
}
.buttons button span {
  position: relative;
  z-index: 10;
  transition: color 0.4s;
}
.buttons button:hover span {
  color: var(--white-gray);
}
.buttons button::before,
.buttons button::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.buttons button::before {
  content: "";
  background: var(--primary-dark-color);
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}
.buttons button:hover::before {
  transform: translate3d(100%, 0, 0);
}

/* ------------------------------------------ */
.faded {
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0;
  background: linear-gradient(0deg, var(--white-gray) 0%, rgba(0, 0, 0, 0) 60%);
}

.afterIntro {
  height: 100vh;
  color: black;
}

.afterIntro h1 {
  padding-top: 300px;
  text-align: center;
  font-size: 50px;
}

/* ------------------------------Test ----------------------------*/
.container {
  width: 70%;
  margin: 0 auto;
}

nav.nav-bar {
  animation: 1s fadeInDown ease-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  /* contact button style */
}
nav.nav-bar .logo {
  width: 140px;
  height: 50px;
}
nav.nav-bar .logo img {
  width: 45px;
  transition-duration: 0.1s;
}
nav.nav-bar .logo img:hover {
  cursor: pointer;
  transform: scale(1.1) rotate(-10deg);
}
nav.nav-bar .nav-elements {
  display: inline-block;
  width: 50%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: center;
}
nav.nav-bar .nav-elements ul.nav-list {
  border: 2px solid var(--accent-color);
  border-radius: 50px;
  padding: 15px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style-type: none;
  width: 100%;
}
nav.nav-bar .nav-elements ul.nav-list li a {
  padding: 15px 30px;
  border-radius: 50px;
  color: var(--primary-dark-color);
  font-size: 1.7rem;
  text-transform: capitalize;
  font-weight: 300;
}
nav.nav-bar .nav-elements ul.nav-list li a:hover {
  background-color: var(--primary-dark-color);
  color: var(--accent-color);
  font-weight: 700;
  cursor: pointer;
}
nav.nav-bar .nav-elements ul.nav-list li:active {
  transform: translateY(5px);
}
nav.nav-bar .nav-elements button {
  display: flex;
  justify-content: center;
  padding: 15px;
  margin-right: 10px;
  background-color: var(--primary-dark-color);
  border: none;
  border-radius: 30px;
}
nav.nav-bar .nav-elements button svg {
  fill: var(--white-gray);
}
nav.nav-bar .nav-elements button:hover {
  cursor: pointer;
}
nav.nav-bar .nav-elements button:hover svg {
  fill: var(--accent-color);
  transform: scale(1.2);
}
nav.nav-bar .nav-elements button:active {
  transform: translateY(5px);
}
nav.nav-bar .nav-elements button svg:last-child {
  display: none;
}
nav.nav-bar .menu-btn {
  display: none;
}
nav.nav-bar .menu-btn svg {
  width: 30px;
  fill: var(--secondary-dark-color);
}
nav.nav-bar .contact-nav-btn {
  color: var(--white-gray);
}
nav.nav-bar .contact-nav-btn .button-86 {
  all: unset;
  width: 100px;
  height: 30px;
  font-size: 1.6rem;
  font-weight: 600;
  background: transparent;
  border: none;
  position: relative;
  cursor: pointer;
  z-index: 1;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
nav.nav-bar .contact-nav-btn:hover {
  color: var(--accent-color);
}
nav.nav-bar .contact-nav-btn .button-86::after,
nav.nav-bar .contact-nav-btn .button-86::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -99999;
  transition: all 0.2s;
}
nav.nav-bar .contact-nav-btn .button-86::before {
  transform: translate(0%, 0%);
  width: 100%;
  height: 100%;
  background: var(--primary-dark-color);
  border-radius: 50px;
}
nav.nav-bar .contact-nav-btn .button-86::after {
  transform: translate(10px, 10px);
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.0823529412);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 50px;
}
nav.nav-bar .contact-nav-btn .button-86:hover::before {
  transform: translate(5%, 20%);
  width: 110%;
  height: 110%;
}
nav.nav-bar .contact-nav-btn .button-86:hover::after {
  border-radius: 50px;
  transform: translate(0, 0);
  width: 100%;
  height: 100%;
}
nav.nav-bar .contact-nav-btn .button-86:active::after {
  transition: 0s;
  transform: translate(0, 5%);
}

.darkMode #theme-switch svg:first-child {
  display: none;
}

.darkMode #theme-switch svg:last-child {
  display: block;
}

/* ------------------------------hero section ----------------------------*/
section.hero-section {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 80vh;
  min-height: 500px;
}
section.hero-section img {
  position: absolute;
  height: 100vh;
  min-height: 800px;
  width: 100%;
  opacity: 0.4;
  z-index: -5;
  mix-blend-mode: exclusion;
  filter: blur(2px);
  -o-object-fit: cover;
     object-fit: cover;
}
section.hero-section .hero-text {
  animation: 1s fadeInDown ease-out;
  text-align: center;
}
section.hero-section .hero-text h6 {
  font-size: 2rem;
  font-weight: 400;
}
section.hero-section .hero-text h1 {
  font-size: 6.3rem;
  display: inline;
  font-weight: 800;
  text-transform: uppercase;
}
section.hero-section .hero-text h3 {
  font-size: 2.6rem;
  letter-spacing: 1px;
  font-weight: 500;
}
section.hero-section .buttons {
  animation: 1s fadeInDown ease-in-out;
  margin: 30px;
}
section.hero-section .buttons .type--A {
  --line_color: var(--primary-dark-color) ;
  --back_color: var(--accent-color) ;
  margin: 50px 0;
}
section.hero-section .buttons .button {
  position: relative;
  z-index: 0;
  width: 240px;
  height: 56px;
  text-decoration: none;
  font-size: 2rem;
  font-weight: bold;
  color: var(--line_color);
  transition: all 0.3s ease;
}
section.hero-section .buttons .button__text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 20px 40px;
}
section.hero-section .buttons .button::before,
section.hero-section .buttons .button::after,
section.hero-section .buttons .button__text::before,
section.hero-section .buttons .button__text::after {
  content: "";
  position: absolute;
  height: 3px;
  border-radius: 2px;
  background: var(--line_color);
  transition: all 0.5s ease;
}
section.hero-section .buttons .button::before {
  top: 0;
  left: 54px;
  width: calc(100% - 112px - 16px);
}
section.hero-section .buttons .button::after {
  top: 0;
  right: 54px;
  width: 8px;
}
section.hero-section .buttons .button__text::before {
  bottom: 0;
  right: 54px;
  width: calc(100% - 112px - 16px);
}
section.hero-section .buttons .button__text::after {
  bottom: 0;
  left: 54px;
  width: 8px;
}
section.hero-section .buttons .button__line {
  position: absolute;
  top: 0;
  width: 56px;
  height: 100%;
  overflow: hidden;
}
section.hero-section .buttons .button__line::before {
  content: "";
  position: absolute;
  top: 0;
  width: 150%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 300px;
  border: solid 3px var(--line_color);
}
section.hero-section .buttons .button__line:nth-child(1),
section.hero-section .buttons .button__line:nth-child(1)::before {
  left: 0;
}
section.hero-section .buttons .button__line:nth-child(2),
section.hero-section .buttons .button__line:nth-child(2)::before {
  right: 0;
}
section.hero-section .buttons .button:hover {
  letter-spacing: 6px;
}
section.hero-section .buttons .button:hover::before,
section.hero-section .buttons .button:hover .button__text::before {
  width: 8px;
}
section.hero-section .buttons .button:hover::after,
section.hero-section .buttons .button:hover .button__text::after {
  width: calc(100% - 112px - 16px);
}
section.hero-section .buttons .button__drow1,
section.hero-section .buttons .button__drow2 {
  position: absolute;
  z-index: -1;
  border-radius: 16px;
  transform-origin: 16px 16px;
}
section.hero-section .buttons .button__drow1 {
  top: -16px;
  left: 40px;
  width: 32px;
  height: 0;
  transform: rotate(30deg);
}
section.hero-section .buttons .button__drow2 {
  top: 44px;
  left: 77px;
  width: 32px;
  height: 0;
  transform: rotate(-127deg);
}
section.hero-section .buttons .button__drow1::before,
section.hero-section .buttons .button__drow1::after,
section.hero-section .buttons .button__drow2::before,
section.hero-section .buttons .button__drow2::after {
  content: "";
  position: absolute;
}
section.hero-section .buttons .button__drow1::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-60deg);
}
section.hero-section .buttons .button__drow1::after {
  top: -10px;
  left: 45px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(69deg);
}
section.hero-section .buttons .button__drow2::before {
  bottom: 0;
  left: 0;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-146deg);
}
section.hero-section .buttons .button__drow2::after {
  bottom: 26px;
  left: -40px;
  width: 0;
  height: 32px;
  border-radius: 16px;
  transform-origin: 16px 16px;
  transform: rotate(-262deg);
}
section.hero-section .buttons .button__drow1,
section.hero-section .buttons .button__drow1::before,
section.hero-section .buttons .button__drow1::after,
section.hero-section .buttons .button__drow2,
section.hero-section .buttons .button__drow2::before,
section.hero-section .buttons .button__drow2::after {
  background: var(--back_color);
}
section.hero-section .buttons .button:hover .button__drow1 {
  animation: drow1 ease-in 0.06s;
  animation-fill-mode: forwards;
}
section.hero-section .buttons .button:hover .button__drow1::before {
  animation: drow2 linear 0.08s 0.06s;
  animation-fill-mode: forwards;
}
section.hero-section .buttons .button:hover .button__drow1::after {
  animation: drow3 linear 0.03s 0.14s;
  animation-fill-mode: forwards;
}
section.hero-section .buttons .button:hover .button__drow2 {
  animation: drow4 linear 0.06s 0.2s;
  animation-fill-mode: forwards;
}
section.hero-section .buttons .button:hover .button__drow2::before {
  animation: drow3 linear 0.03s 0.26s;
  animation-fill-mode: forwards;
}
section.hero-section .buttons .button:hover .button__drow2::after {
  animation: drow5 linear 0.06s 0.32s;
  animation-fill-mode: forwards;
}
@keyframes drow1 {
  0% {
    height: 0;
  }
  100% {
    height: 100px;
  }
}
@keyframes drow2 {
  0% {
    width: 0;
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  100% {
    width: 120px;
  }
}
@keyframes drow3 {
  0% {
    width: 0;
  }
  100% {
    width: 80px;
  }
}
@keyframes drow4 {
  0% {
    height: 0;
  }
  100% {
    height: 120px;
  }
}
@keyframes drow5 {
  0% {
    width: 0;
  }
  100% {
    width: 124px;
  }
}
section.hero-section .buttons:active {
  transform: translateY(5px);
}
section.hero-section .blob {
  position: absolute;
  opacity: 0.5;
  width: 400px;
  aspect-ratio: 1/1;
  animation: animate 9s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite alternate forwards;
  filter: blur(10px);
  z-index: -1;
  background: linear-gradient(47deg, rgb(246, 187, 23) 21%, rgb(245, 203, 88) 67%, rgb(246, 187, 23) 81%);
  /*  Optional  */
  /*   box-shadow: inset 50px 50px 17px 0px #ff588b,
    inset 100px 100px 17px 0px #66319f; */
}
@keyframes animate {
  0% {
    translate: 40% -25%;
    border-radius: 60% 40% 30% 70%/100% 85% 92% 74%;
  }
  50% {
    translate: 0% 13%;
    border-radius: 20% 71% 47% 70%/81% 15% 22% 54%;
    rotate: 41deg;
    scale: 1.15;
  }
  100% {
    translate: -45% 39%;
    border-radius: 100% 75% 92% 74%/60% 80% 30% 70%;
    rotate: -60deg;
    scale: 1.05;
  }
}
@keyframes anim-lineUp {
  0% {
    opacity: 0;
    transform: translateY(80px);
  }
  20% {
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes fadeInUp {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
@keyframes fadeInDown {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.title {
  margin-bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.title .title-graphic {
  height: 20px;
  width: 10px;
  border-radius: 50px;
  background-color: var(--accent-color);
  margin-right: 20px;
}
.title .section-title {
  text-transform: capitalize;
  font-size: 3rem;
}

section.about-section {
  padding-top: 200px;
  height: 100vh;
  min-height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
section.about-section .about-content {
  display: flex;
  flex-direction: row-reverse;
  width: 55%;
}
section.about-section .about-content .right-colum {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
}
section.about-section .about-content .right-colum p {
  font-size: 2rem;
}
section.about-section .about-content .left-colum {
  position: relative;
}
section.about-section .about-content .left-colum .pic-graphic {
  background-color: var(--accent-color);
  width: 300px;
  height: 300px;
  border-radius: 50px;
  position: absolute;
  z-index: -5;
  top: -10px;
  left: -10px;
}
section.about-section .about-content .left-colum img {
  transform: rotateY(180deg);
  width: 300px;
  border-radius: 50px;
  margin-right: 30px;
  transition-duration: 0.1s;
}
section.about-section .about-content .left-colum img:hover {
  transform: rotate(-5deg) rotateY(180deg);
}

/*  ------------------ skill section ---------------------------------*/
.skills-section {
  height: 100vh;
  min-height: 800px;
  padding-top: 100px;
}

.skills-icons {
  display: flex;
  justify-content: center;
  align-items: center;
}
.skills-icons .icons-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  gap: 20px;
}
.skills-icons .icons-container .item {
  height: 150px;
  width: 150px;
  border-radius: 30%;
  background-color: var(--secondary-dark-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
.skills-icons .icons-container .item img {
  height: 100px;
  width: 100px;
  transition-duration: 0.1s;
}
.skills-icons .icons-container .item img:hover {
  transform: rotate(-25deg);
}

/*  ------------------ portfolio section ---------------------------------*/
.portfolio-section {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: column;
  height: 80vh;
  min-height: 500px;
}
.portfolio-section .bg {
  position: absolute;
  min-height: -moz-fit-content;
  min-height: fit-content;
  width: 100%;
  opacity: 0.1;
  z-index: -5;
  mix-blend-mode: exclusion;
  filter: blur(2px);
  -o-object-fit: cover;
     object-fit: cover;
}
.portfolio-section .title {
  margin-bottom: 200px;
  padding-top: 100px;
}
.portfolio-section .portfolio-content {
  display: flex;
  justify-content: center;
  width: 55%;
}
.portfolio-section .portfolio-content .left-colum {
  position: relative;
}
.portfolio-section .portfolio-content .left-colum .pic-graphic {
  background-color: var(--accent-color);
  width: 200px;
  height: 200px;
  border-radius: 50px;
  position: absolute;
  z-index: -5;
  top: -10px;
  left: -10px;
}
.portfolio-section .portfolio-content .left-colum img {
  height: 300px;
  width: 300px;
  margin-right: 30px;
  border-radius: 50px;
  transition-duration: 0.1s;
}
.portfolio-section .portfolio-content .left-colum img:hover {
  transform: rotate(-5deg);
}
.portfolio-section .portfolio-content .right-colum {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.portfolio-section .portfolio-content .right-colum p {
  font-size: 2rem;
}
.portfolio-section .portfolio-content .right-colum .buttons {
  display: flex;
  flex-wrap: wrap;
}
.portfolio-section .portfolio-content .right-colum .buttons button:first-child {
  margin-right: 20px;
}

section.contact {
  margin-top: 300px;
}
section.contact .contact-container {
  padding: 100px;
  height: 50vh;
  min-height: 500px;
  background-color: var(--primary-dark-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
section.contact .contact-container .contact-icons ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}
section.contact .contact-container .contact-icons ul a {
  color: var(--white-gray);
  font-size: 5rem;
  transition: all 0.1s;
}
section.contact .contact-container .contact-icons ul a:hover {
  color: var(--accent-color);
  transform: scale(1.3) rotate(-20deg);
}
section.contact .contact-container .contact-icons ul a:active {
  transform: scale(1);
}

@media screen and (max-width: 1700px) {
  .container {
    width: 80%;
  }
  section.about-section .about-content {
    width: 60%;
  }
  .portfolio-section .portfolio-content {
    width: 60%;
  }
}
@media screen and (max-width: 1500px) {
  .container {
    width: 90%;
  }
}
@media screen and (max-width: 1300px) {
  .container {
    width: 90%;
  }
  section.about-section .about-content {
    width: 60%;
  }
  .portfolio-section .portfolio-content {
    width: 60%;
  }
}
@media screen and (max-width: 1280px) {
  section.about-section .about-content {
    width: 70%;
  }
  .portfolio-section .portfolio-content {
    width: 70%;
  }
}
@media screen and (max-width: 1080px) {
  section.about-section .about-content {
    width: 80%;
  }
  .portfolio-section .portfolio-content {
    width: 80%;
  }
  nav.nav-bar .nav-elements ul.nav-list {
    display: none;
  }
  .skills-section {
    height: auto;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .skills-icons .icons-container {
    display: grid;
    grid-template-columns: auto auto auto;
  }
}
@media screen and (max-width: 800px) {
  .contact-nav-btn {
    display: none;
  }
  nav.nav-bar .nav-elements {
    width: auto;
  }
  section.about-section {
    margin-bottom: 150px;
    height: auto;
  }
  section.about-section .about-content {
    padding-top: 50px;
    width: 80%;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }
  section.about-section .about-content .right-colum {
    justify-content: left;
    align-items: center;
    gap: 30px;
  }
  section.about-section .about-content .right-colum .buttons button {
    margin-right: 30px;
  }
  .skills-section {
    height: auto;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .skills-icons .icons-container {
    display: grid;
    grid-template-columns: auto auto;
  }
  .portfolio-section {
    height: auto;
  }
  .portfolio-section .title {
    margin-bottom: 100px;
  }
  .portfolio-section .portfolio-content {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
  }
  .portfolio-section .portfolio-content .right-colum {
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  .portfolio-section .portfolio-content .right-colum p {
    width: 70%;
  }
  nav.nav-bar .nav-elements ul.nav-list {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .portfolio-section {
    height: auto;
  }
  .portfolio-section .title {
    margin-bottom: 100px;
  }
  .portfolio-section .portfolio-content {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
  }
  .portfolio-section .portfolio-content .right-colum {
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  .portfolio-section .portfolio-content .right-colum p {
    width: 90%;
  }
  section.contact .contact-container .contact-icons ul {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 750px) {
  section.hero-section .hero-text h1 {
    font-weight: 800;
  }
  section.about-section {
    margin-bottom: 150px;
    height: auto;
  }
  section.about-section .about-content {
    padding-top: 50px;
    width: 80%;
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 40px;
  }
  section.about-section .about-content p {
    text-align: left;
  }
  section.about-section .about-content .right-colum {
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  section.about-section .about-content .right-colum .buttons {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
  }
  section.hero-section .buttons .button {
    font-size: 1.6rem;
  }
  section.hero-section .buttons {
    margin: 30px 0;
  }
  .intro {
    height: 90vh;
  }
  section.hero-section .blob {
    width: 200px;
  }
}
@media screen and (max-width: 355px) {
  section.hero-section .buttons .button {
    font-size: 1.4rem;
  }
}
.reveal {
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active {
  transform: translateY(0);
  opacity: 1;
  color: unset;
  text-decoration: none;
}/*# sourceMappingURL=style.css.map */