.custom-cursor {
  width: 30px;
  height: 30px;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  position: fixed;
  top: 50;
  left: 50;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.2s ease;
  mix-blend-mode: difference;
}


@font-face {
  font-family: icon;
  src: url("/static/font/material_symbols/MaterialSymbolsRounded-VariableFont_FILL,GRAD,opsz,wght.ttf");
}

@font-face {
  font-family: anton;
  src: url(/static/font/Anton-Regular.ttf);
}

@font-face {
  font-family: poppins;
  src: url(/static/font/Poppins-Regular.ttf);
}

@font-face {
  font-family: climate_crisis;
  src: url(/static/font/ClimateCrisis-Variable.woff2);
}

.t {
  font-size: calc(28px + 8vh);
  font-weight: bold;
  font-family: climate_crisis;
}


@view-transition {
  navigation: auto;
}
::view-transition-group(root) {
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
}
::view-transition-old(root) {
  animation-name: vt-out;
  z-index: 1;
}
::view-transition-new(root) {
  animation-name: vt-in;
  z-index: 2;
}
@keyframes vt-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  40% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(-6vh) scale(0.94);
    filter: blur(10px);
  }
}
@keyframes vt-in {
  0% {
    opacity: 0;
    transform: translateY(8vh) scale(0.96);
    filter: blur(10px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) {
    animation: none !important;
  }
}


:root {
  --accent-color: rgba(0, 191, 255, 0.5);
  --warm-white: #fefaee;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: none !important;
}

*:active > .custom-cursor {
  transform: translate(-50%, -50%) scale(1.1);
}

::selection {
  background-color: var(--accent-color);
  color: #000000;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
    Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--warm-white);
  background-color: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: var(--warm-white);
  text-decoration: none;
}

#app {
  min-height: 100vh;
}


#three-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

#three-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  opacity: 0.1;
}


.hero {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  background-color: black;
}

.hero > .t {
  user-select: none;
  font-size: calc(28px + 8vw);
}

.icon {
  font-family: icon;
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 1,
    "opsz" 24;
  line-height: 1;
  font-size: 1.5em;
}

section {
  padding: 15px;
  color: black;
}


.navbar_wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  padding: 5px;
}

.navbar {
  height: 6vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: 15px;
  pointer-events: none;
  border-radius: 25px;
  font-family: poppins;
  background-color: black;
  color: var(--warm-white);
}


#about {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: poppins;
  font-size: calc(16px + 1vw);
  color: black;
}

#about_inner {
  width: 90%;
  display: flex;
  align-items: center;
  height: 90%;
  padding: 20px;
  border-radius: 50px;
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
}

#about_text_housing {
  width: 50%;
  justify-self: flex-start;
}

#about_viewer {
  width: 40%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: grab;
  flex-shrink: 0;
  justify-self: flex-end;
}

#about_viewer:active {
  cursor: grabbing;
}

#about_viewer canvas {
  background: transparent;
}

#stats {
  min-height: 50vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#st_title {
  display: flex;
  justify-content: center;
  align-items: center;
}

#stats_inner {
  width: 90%;
  height: 15vh;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 100vh;
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  align-items: center;
}

.stat_box:not(:last-child) {
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.stat_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 100%;
  border-radius: 5vh;
}
.stat_box h2 {
  margin: 0;
  line-height: 1;
}

.stat_box p {
  margin: 5px 0 0 0;
}

#footer {
  width: 100%;
  height: 30vh !important;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 4vh;
}

#footer > .t {
  color: rgb(39, 37, 37);
  font-size: calc(28px + 5vh) !important;
}

#footer > .links {
  display: flex;
  align-items: center;
  gap: 3vw;
}

.link_item {
  color: black;
  opacity: 1;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  font-size: calc(12px + 1vh);
  display: flex;
  width: 80px;
  aspect-ratio: 1/1;
  align-items: center;
  justify-content: center;
  border: none;
  transition: transform 200ms ease-in-out;
}

.link_item:active {
  transform: scale(1.1);
}

.link_item > img {
  width: 50px;
}

.link_item {
  position: relative;
}

.tooltip {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  white-space: nowrap;
}

.link_item:hover .tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}