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

body {
  font-family: "Figtree", sans-serif;
}

/*
 * ----------------------------------------
 * animation slide-in-blurred-bottom
 * credit: animista
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
    transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

@keyframes slide-in-blurred-bottom {
  0% {
    -webkit-transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    transform: translateY(1000px) scaleY(2.5) scaleX(0.2);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    -webkit-filter: blur(40px);
    filter: blur(40px);
    opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
    transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-filter: blur(0);
    filter: blur(0);
    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation flicker-1
  * credit: animista
 * ----------------------------------------
 */
 @-webkit-keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}
@keyframes flicker-1 {
  0%,
  100% {
    opacity: 1;
  }
  41.99% {
    opacity: 1;
  }
  42% {
    opacity: 0;
  }
  43% {
    opacity: 0;
  }
  43.01% {
    opacity: 1;
  }
  47.99% {
    opacity: 1;
  }
  48% {
    opacity: 0;
  }
  49% {
    opacity: 0;
  }
  49.01% {
    opacity: 1;
  }
}


.flicker-1 {
	-webkit-animation: flicker-1 3s linear infinite both;
	        animation: flicker-1 3s linear infinite both;
}

.slide-in-blurred-bottom {
  -webkit-animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s both;
  animation: slide-in-blurred-bottom 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.5s both;
}


.navbar {
  display: flex;
  position: absolute;
  z-index: 5;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  width: 100%;
  backdrop-filter: blur(10px);
  color: var(--text-color);
}

.logo {
  font-size: 24px;
  font-weight: bold;
  padding: 10px;
  font-weight: 300;
}

.container {
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.container::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}

.pages {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
  color: var(--text-color);
  scroll-snap-align: start;
}

#page-1 {
  display: flex;
  background-image: url("dark.svg");
  background-repeat: no-repeat;
  background-size: cover;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30pt;
  font-size: 20pt;
  font-family: "Figtree", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300 300;
  font-style: normal;
  font-display: swap;
  transition: background-image 2s;
}

h1 {
  font-weight: 300;

}

#introduction {
  font-size: calc(25pt + 2vw);
}

#stayintouch {
  position: relative;
  text-align: right;
  z-index: 10;
  color: var(--text-color);
  font-size: calc(20pt + 10vh);
  width: 200pt;
  margin-right: 3vw;
}
#stayintouch-mb {
  display: none;
}
.wrapper {
  max-width: 100%;
  overflow: hidden;
  background-color: var(--bg-color);
}

.marquee {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  animation: marquee 60s linear infinite;
  font-family: "Space Mono", serif;
}

#page-2 {
  padding: 30pt;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

#contacts {
  display: flex;
  justify-content: left;
  flex-direction: column;
  margin-left: 3vw;
}

.links {
  color: var(--text-color);
  font-size: 9vh;
  margin: 5px;
  text-decoration: none;
  position: relative;
  width: fit-content;
}

.links::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2pt;
  display: block;
  margin-top: 5px;
  right: 0;
  background: var(--text-color);
  transition: width 0.4s ease;
  -webkit-transition: width 0.4s ease;
}

.links:hover::after {
  width: 100%;
  left: 0;
  background: var(--text-color);
}

.marquee p {
  display: inline-block;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

#page-2 {
  background-color: var(--bg-color);
}

:root {
  --text-color: white;
  --bg-color: black;
}

@media (prefers-color-scheme: light) {
  :root {
    --text-color: black;
    --bg-color: white;
  }

  #page-1 {
    background-image: url("light.svg");
  }
}

@media only screen and (max-width: 600px) {
  #page-2 {
    justify-content: flex-end;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  #page-1, #page-2 {
    padding-bottom: 60pt !important;
  } /* you see, mobile view sucks */
  .wrapper {
    font-size: 13pt;
  }
  #stayintouch {
    display: none;
  }
  .links {
    font-size: 5vh;
    
  }
  #stayintouch-mb {
    display: inline-block;
    margin-bottom: 10pt;
  }
  #contacts {
    margin-left: 0;
  }
  #introduction {
    font-size: calc(18pt + 2vw);
  }
}

@media only screen and (max-height: 500px) {
  .navbar {
    display: none;
  }
  #introduction {
    font-size: calc(10pt + 2vw);
  }
  .wrapper {
    font-size: 10pt;
  }
}