@font-face {
  font-family: "Lexend";
  src: url(../fonts/Lexend-VariableFont_wght.ttf);
}

@font-face {
  font-family: "Open-Sans Italic";
  src: url(../fonts/OpenSans-Italic-VariableFont_wdth\wght.ttf);
}

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

:root {
  --ff--title: "Lexend", sans-serif;
  --ff--body: "Lexend", sans-serif;
  --fs--title: 3rem;
  --fs--title--main: 7rem;
  --fs--title--sub: 3.5rem;
  --fs--small: 1.5rem;
  --fs--body: 2rem;
  --color--fg--main: #141411;
  --color--fg--accent: #347fc4;
  --color--bg--main: #ebebee;
  --color--bg--accent: ;
  --margin--inner: 1.5rem;
  --margin--outer: 2rem;
  --width: calc(100% - 3 * var(--margin--outer));
  --max-width: 50rem;
  --border-radius: 7px;
  --scroll: mandatory;
}

@keyframes introduction-slide {
  100% {
    left: var(--margin--outer);
    opacity: 1;
    filter: blur(0px);
  }
}

/* fa icons */

.big {
  font-size: 3rem;
}

/* finish fa icons */
/* options */

.options__wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 20;
  visibility: hidden;
  opacity: 0;
  transition: all 500ms ease-in-out;
}

.active.options__wrapper {
  opacity: 1;
  visibility: visible;
}

.options {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  background-color: var(--color--fg--main);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--margin--inner) var(--margin--outer);
  border-radius: var(--border-radius);
}

.options__label.body {
  color: var(--color--bg--main);
  /* display: inline-block; */
  margin-right: var(--margin--inner);
}

.options__group {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.options__group:not(:last-of-type) {
  margin-bottom: var(--margin--inner);
}

.options__button {
  position: absolute;
  bottom: 0px;
  right: 0px;
  background-color: var(--color--fg--main);
  color: var(--color--bg--main);
  padding: 1rem;
  border-radius: var(--border-radius) 0 0 0;
  transition: color 500ms ease-in-out, background-color 500ms ease-in-out;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 2rem;
  z-index: 10;
}

.options__button:hover {
  background-color: var(--color--bg--main);
  color: var(--color--fg--main);
}

.invert.options__button {
  background-color: var(--color--bg--main);
  color: var(--color--fg--main);
}

.invert.options__button:hover {
  background-color: var(--color--fg--main);
  color: var(--color--bg--main);
}

/* finish options */
/* floating links */

.floating-links {
  position: absolute;
  right: 0;
  z-index: 11;
  margin: var(--margin--outer) calc(2 * var(--margin--outer));
  padding: var(--margin--inner) var(--margin--outer);
  background-color: var(--color--fg--main);
  border-radius: var(--border-radius);
  transition: background-color 500ms ease-in-out;
  display: none;
}

.floating-links__list {
  list-style-type: none;
  display: flex;
  gap: var(--margin--outer);
}

.floating-links__li a {
  color: var(--color--bg--main);
  transition: color 500ms ease-in-out;
}

.invert.floating-links {
  background-color: var(--color--bg--main);
}

.invert .floating-links__li a {
  color: var(--color--fg--main);
}

@media screen and (min-width: 1300px) {
  .floating-links {
    display: inline-block;
  }
}

/* finish floating links */
/* bubble */

#bubble {
  position: absolute;
  padding: max(5rem, 15vmin);
  background-color: white;
  mix-blend-mode: difference;
  z-index: 15;
  transform: translate(-50%, -50%);
  opacity: 0;
  filter: blur(8px);
  border-radius: 50%;
  pointer-events: none;
}

#bubble.visible {
  animation: bubble 2s ease-in-out forwards;
}

#bubble.popped {
  animation: bubble-pop 2s ease-in-out forwards;
}

@keyframes bubble {
  100% {
    opacity: 1;
    filter: blur(0);
    box-shadow: 0 0 4px 1px var(--color--bg--main);
  }
}

@keyframes bubble-pop {
  0% {
    opacity: 1;
    filter: blur(0px);
    box-shadow: 0 0 4px 1px var(--color--bg--main);
  }
  100% {
    opacity: 0;
    filter: blur(8px);
  }
}
/* finish bubble */
/* page dots */

main {
  position: relative;
  overflow: hidden;
}

.page-dots {
  position: fixed;
  /* background-color: black; */
  right: -3rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  transition: right 500ms ease-in-out;
}

.visible.page-dots {
  right: var(--margin--outer);
}

.page-dots__list {
  list-style-type: none;
  display: flex;
  gap: 2rem;
  flex-direction: column;
}

.page-dots__li {
  /* border: 2px solid black; */
  background-color: var(--color--fg--main);
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 500ms ease-in-out;
}

.page-dots__li.active {
  /* border: 2px solid black; */
  background-color: var(--color--bg--main);
  box-shadow: 0 0 0 5px var(--color--fg--main);
  padding: 0.5rem;
  border-radius: 50%;
}

.invert .page-dots__li {
  /* border: 2px solid black; */
  background-color: var(--color--bg--main);
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 500ms ease-in-out;
}

.invert .page-dots__li.active {
  /* border: 2px solid black; */
  background-color: var(--color--fg--main);
  box-shadow: 0 0 0 5px var(--color--bg--main);
  padding: 0.5rem;
  border-radius: 50%;
}

/* finish page dots */
/* page scrolling */

.content__container {
  scroll-snap-type: y var(--scroll);
  height: 100vh;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.content__container::-webkit-scrollbar {
  display: none;
}

.fullpage {
  padding: var(--margin--outer);
  padding-bottom: calc(2 * var(--margin--outer));
  min-height: 100vh;
  scroll-snap-align: start;
  position: relative;
  /* max-width: var(--max-width); */
  margin: 0 auto;
  background-color: var(--color--bg--main);
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.fullpage.nointeract {
  pointer-events: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.fullpage > * {
  z-index: 2;
}

.fullpage__wrapper {
  position: relative;
}

.fullpage__image {
  width: 100vw;
  position: absolute;
  bottom: -5px;
  z-index: 1;
  height: 30vh;
  pointer-events: none;
}

.fullpage__image.top {
  top: -5px;
}

/* end page scrolling */
/* fonts */

.title {
  font-family: var(--ff--title);
  font-weight: 300;
  color: var(--color--fg--main);
  font-size: var(--fs--title);
  /* font-size: 10rem; */
  width: var(--width);
}

.body {
  font-family: var(--ff--body);
  font-weight: 300;
  color: var(--color--fg--main);
  font-size: var(--fs--body);
}

.small {
  font-family: var(--ff--body);
  font-weight: 300;
  color: var(--color--fg--main);
  font-size: var(--fs--small);
}

.main__title {
  font-family: var(--ff--title);
  font-weight: 600;
  color: var(--color--fg--main);
  font-size: var(--fs--title--main);
  margin: var(--margin--inner) 0;
}

.sub__title {
  font-family: var(--ff--title);
  font-weight: 600;
  color: var(--color--fg--main);
  font-size: var(--fs--title--sub);
  margin: var(--margin--inner) 0;
}

/* end fonts */
/* first page */

.landing__title {
  opacity: 0;
  filter: blur(8px);
  animation: fade-out-blur 1s ease-out forwards;
}

.landing__greeting {
  width: var(--width);
}

.landing__greeting > * {
  margin: calc(0.5 * var(--margin--inner)) var(--margin--outer);
}

.landing.active .landing__title:nth-child(1) {
  animation: fade-in-blur 1s ease-out forwards;
}

.landing.active .landing__title:nth-child(3) {
  animation: fade-in-blur 500ms ease-out forwards 4.5s;
}

@keyframes fade-in-blur {
  100% {
    filter: unset;
    opacity: 1;
  }
}

.landing__main__title {
  max-width: 1rem;
  max-height: 1rem;
  opacity: 0;
  filter: blur(8px);
  overflow: hidden;
  background-color: var(--color--fg--main);
  color: var(--color--fg--main);
  display: inline-block;
  border-radius: var(--border-radius);
}

.landing.active .landing__main__title {
  animation: expand-drop 3s ease-in-out forwards 1s;
}

@keyframes expand-drop {
  15% {
    opacity: 1;
    filter: blur(0px);
    max-height: 1rem;
    max-width: 1rem;
  }
  25% {
    max-height: 1rem;
    max-width: 1rem;
  }
  35% {
    padding-left: 0px;
    padding-right: 0px;
  }
  60% {
    filter: blur(0px);
    max-height: 1rem;
    max-width: 1000px;
    padding-left: var(--margin--outer);
    padding-right: var(--margin--outer);
    padding-top: 0;
    padding-bottom: 0;
    color: var(--color--fg--main);
  }
  61% {
    /* hehehe my head hurts i'm tired */
    color: var(--color--bg--main);
  }
  100% {
    max-width: 1000px;
    max-height: 500px;
    opacity: 1;
    filter: blur(0px);
    padding-top: var(--margin--inner);
    padding-bottom: var(--margin--inner);
    padding-left: var(--margin--outer);
    padding-right: var(--margin--outer);
    color: var(--color--bg--main);
  }
}

/* finish first page */
/* second page */

.fullpage.introduction {
  background-color: var(--color--fg--main);
}

.introduction__title {
  color: var(--color--bg--main);
  position: relative;
  left: 0%;
  opacity: 0;
  filter: blur(8px);
}

.active .introduction__title {
  animation: introduction-slide 500ms ease-out forwards;
}

.introduction__wrapper {
  width: var(--width);
  max-width: var(--max-width);
  position: relative;
  left: 0%;
  background-color: var(--color--bg--main);
  padding: var(--margin--inner) var(--margin--outer);
  border-radius: var(--border-radius);
  opacity: 0;
  filter: blur(8px);
}

.introduction__wrapper:not(:last-child) {
  margin-bottom: var(--margin--outer);
}

.active .introduction__wrapper:nth-child(2) {
  animation: introduction-slide 500ms ease-out forwards 500ms;
}

.active .introduction__wrapper:nth-child(3) {
  animation: introduction-slide 500ms ease-out forwards 1s;
}

/* finish second page */
/* third page */

.skills__title {
  width: var(--width);
  position: relative;
  left: 0%;
  opacity: 0;
  filter: blur(8px);
}

.skills__list {
  width: var(--width);
  position: relative;
  left: 0%;
  opacity: 0;
  filter: blur(8px);
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--margin--inner);
}

.experience__list {
  width: var(--width);
  position: relative;
  left: 0%;
  opacity: 0;
  filter: blur(8px);
}

.experience__item {
  margin-top: var(--margin--inner);
  margin-left: calc(2 * var(--margin--inner));
}

.active .skills__title:nth-child(1) {
  animation: introduction-slide 500ms ease-out forwards;
}

.active .skills__list:nth-child(2) {
  animation: introduction-slide 500ms ease-out forwards 500ms;
}

.active .skills__title:nth-child(3) {
  animation: introduction-slide 500ms ease-out forwards 1s;
}

.active .skills__title:nth-child(4) {
  animation: introduction-slide 500ms ease-out forwards 1.5s;
}

.active .skills__title:nth-child(5) {
  animation: introduction-slide 500ms ease-out forwards 2s;
}

.active .experience__list:nth-child(6) {
  animation: introduction-slide 500ms ease-out forwards 2.5s;
}

/* finish third page */
/* fourth page */

.fullpage.projects {
  background-color: var(--color--fg--main);
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  display: block;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.fullpage.projects::-webkit-scrollbar {
  display: none;
}

.projects .title,
.projects .body {
  color: var(--color--bg--main);
}

.projects__wrapper {
  opacity: 0;
  position: relative;
  left: 0;
  width: var(--width);
}

.active .projects__wrapper {
  animation: introduction-slide 500ms ease-out forwards 500ms;
}

.projects__title {
  top: var(--margin--outer);
  position: sticky;
  opacity: 0;
  filter: blur(8px);
  z-index: 1;
}

.active .projects__title {
  animation: introduction-slide-sticky 500ms ease-out forwards;
}

@keyframes introduction-slide-sticky {
  100% {
    transform: translateX(var(--margin--outer));
    opacity: 1;
    filter: blur(0px);
  }
}

.project__entry {
  min-height: 20vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.5s linear;
  margin: calc(2 * var(--margin--outer)) 0;
  max-width: var(--max-width);
}

.project__entry.visible {
  opacity: 1;
}

.project__entry:first-of-type {
  margin-top: 30vh;
}

.project__entry:last-of-type {
  margin-bottom: 30vh;
}

.project__entry a {
  color: var(--color--fg--accent);
  margin-bottom: var(--margin--inner);
}

/* finish fourth page */
/* fifth page */

.contact__title {
  position: relative;
  left: 0%;
  opacity: 0;
  filter: blur(8px);
}

.contact__form {
  position: relative;
  left: 0%;
  opacity: 0;
  filter: blur(8px);
  width: var(--width);
}

.contact__form:not(:last-child) {
  margin-bottom: var(--margin--inner);
}

.active .contact__title {
  animation: introduction-slide 500ms ease-out forwards;
}

.active .contact__form:nth-child(2) {
  animation: introduction-slide 500ms ease-out forwards 500ms;
}

.active .contact__form:nth-child(3) {
  animation: introduction-slide 500ms ease-out forwards 1s;
}

.active .contact__form:nth-child(4) {
  animation: introduction-slide 500ms ease-out forwards 1.5s;
}

.active .contact__form:nth-child(5) {
  animation: introduction-slide 500ms ease-out forwards 2s;
}

@media screen and (max-width: 1280px) {
  :root {
    --fs--title--main: 6rem;
    --fs--title: 2.5rem;
  }
}

@media screen and (max-width: 900px) {
  :root {
    --fs--title--main: 4.5rem;
    --fs--title: 2.5rem;
    --fs--body: 1.7rem;
    --margin--outer: 1.5rem;
    --margin--inner: 1rem;
  }
}

@media screen and (max-width: 600px) {
  :root {
    --fs--title--main: 3.5rem;
    --fs--title: 2.5rem;
  }
}