/* @import url('./fonts/fonts.css'); */

:root {
  /* --title-font: philosopher; */
  /* --main-font: quicksand; */
  /* --font-light: 300; */
  /* --font-normal: 400; */
  /* --font-bold: 700; */
  /* color-scheme: dark; */

  /* contrast */
  --black: #000000;
  --deep-dark: #121212;
  --dark: #202020;
  --dark-lighter: #323232;
  --light-darker: #afafaf;
  --light: #dfdfdf;
  --deep-light: #eeeeee;
  --white: #ffffff;

  /* colors */
  --orange: #ffc89b;
  --orange-light-mode: #e4c4c0;
  --purple: #801be5;
  --purple-light-mode: #b06df3;

  /* other colors */
  --green: #3dff3d;
  --blue: #7df0ff;

  /* meaning color (text contrast dark) */

  --valid: var(--green);
  --warn: #fa9459;
  --danger: #ff5555;
  --disabled: #adaeb3;

  /* fonts */
  font-family: var(--main-font);
  font-weight: var(--font-light);
  font-style: normal;
  font-size: clamp(12px, calc(8px + 0.5vmax), 22px);
}

*,
*::after,
*::before {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  outline: none;
  border: none;
  font-style: normal;
}

body {
  --he-height: calc(2lh + 40px);
  --text: var(--white);
  --text-inverse: var(--black);
  background: var(--deep-dark);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
}

body:has(.loader) {
  overflow: hidden;
}

h1 {
  font-size: 1.7rem;
  font-weight: var(--font-light);
  text-transform: uppercase;
  font-family: var(--title-font);
}

h2 {
  font-size: 1.5rem;
  font-weight: var(--font-light);
  font-family: var(--title-font);
}

h2.h1-like {
  font-size: 1.7rem !important;
}

h3 {
  font-size: 1.15rem;
  font-family: var(--title-font);
  font-weight: var(--font-normal);
}

p {
  line-height: 1.6;
  text-align: justify;
}

section {
  height: 100dvh;
}

a {
  color: inherit;
}

.link {
  --link-color: var(--blue);
  color: var(--link-color);
  position: relative;
  cursor: pointer;

  &::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: -2px;
    left: 0;
    background: var(--link-color);
    transform: scaleX(0);
    transform-origin: left center;
  }

  &:is(.disabled) {
    --link-color: var(--disabled);
    cursor: not-allowed;
    pointer-events: none;

    &::after {
      background: none;
    }
  }

  .icon {
    --color: var(--link-color);
  }
}

@media (hover: hover) {
  a {
    &::after {
      --duration: 0.3s;
      transition:
        transform var(--duration) ease,
        transform-origin 0s var(--duration);
    }

    &:hover::after {
      transform: scaleX(1);
      transform-origin: right center;
    }
  }
}

@media (hover: none) {
  a::after {
    transform: scaleX(1);
  }
}

picture {
  display: contents;

  source {
    display: none;
  }
}

#dot-background {
  z-index: -3;
}

#header {
  background: var(--deep-dark);
  border: solid 2px var(--dark);
  padding: 10px 25px;
  border-radius: 50px;

  h1 {
    text-align: center;
  }

  &:is(.fixed-header) {
    position: fixed;
    top: 10px;
    left: 50%;
    translate: -50%;
    z-index: 300;
  }
}

.box {
  background: color-mix(in srgb, var(--deep-dark) 40%, transparent);
  border: solid 1px var(--dark);
  box-shadow:
    0 0 4px 0px var(--dark),
    0 0 4px var(--deep-dark),
    inset 1px -1px 2px var(--dark),
    inset 2px -2px 4px var(--deep-dark);
  backdrop-filter: blur(8px);
  border-radius: 6px;
  padding: 6px 10px;
}

@media (hover: hover) {
  .open-nav:hover {
    .bar:nth-child(1) {
      transform-origin: center right;
    }

    .bar:nth-child(3) {
      transform-origin: center left;
    }
  }
}

:root {
  --nav-duration: 2s;
  --opacity-offset: 0.5s;
}

#container {
  height: 100vh;
}

.d-none {
  display: none !important;
}

.rel {
  position: relative;
}

.abs {
  position: absolute;
}

.fix {
  position: fixed;
}

.fix-center {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50% !important;
}

.justify {
  text-align: justify;
}

.icon {
  --color: var(--text);
  fill: var(--color);
  width: max-content;
  height: max-content;

  svg {
    width: 100%;
    height: 100%;
    fill: inherit;
  }

  &:is(.danger) {
    --color: var(--danger);
  }

  &:is(.valid) {
    --color: var(--valid);
  }

  &:is(.purple) {
    --color: var(--purple);
  }

  &:is(.orange) {
    --color: var(--orange);
  }
}

button {
  --color: var(--purple);
  font-family: var(--main-font);
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 4px;
  color: var(--text);
  border: solid 1px var(--color);
  background: var(--dark);
  transition:
    border 0.2s ease-out,
    background 0.2s ease-out;

  &:is(.valid) {
    --color: var(--valid);
  }

  &:is(.warn) {
    --color: var(--warn);
  }

  &:is(.danger) {
    --color: var(--danger);
  }

  &:is(.disabled) {
    --color: var(--disabled);
    cursor: not-allowed;
    pointer-events: none;
    background: color-mix(in srgb, var(--color) 10%, transparent);
  }

  &:has(.icon) {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  &:is(.wait) {
    position: relative;
    pointer-events: none;
    color: transparent;
    stroke: transparent;
    border-color: var(--disabled);
    overflow: hidden;
    --duration: 2s;

    svg {
      fill: transparent;
    }

    &::after,
    &::before {
      content: '';
      position: absolute;
      display: block;
      height: 20px;
      aspect-ratio: 1 / 1;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      border-radius: 50%;
      box-shadow:
        0px 0px 4px 0px var(--blue),
        inset 0px 0px 4px 0px var(--blue);
      opacity: 0;
    }

    &::after {
      animation: pulse-button var(--duration) ease-out infinite;
    }

    &::before {
      animation: pulse-button var(--duration) ease-out infinite calc(var(--duration) / 2);
    }
  }
}

@keyframes pulse-button {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: scale(5);
  }
}

@media (hover: hover) {
  button:hover {
    background: color-mix(in srgb, var(--color) 15%, var(--dark));
  }
}

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

small {
  font-size: 80%;
}

.over-hidden {
  overflow: hidden;
}

.over-y-auto {
  overflow-y: auto;
}

.over-x-auto {
  overflow-y: auto;
}

.to-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fluid {
  width: 100%;
}

.fluid-y {
  height: 100%;
}

.w-mc {
  width: max-content;
}

.h-mc {
  height: max-content;
}

.pad-10 {
  padding: 10px;
}

.pad-20 {
  padding: 20px;
}

.pad-t-10 {
  padding-top: 10px;
}

.pad-t-20 {
  padding-top: 20px;
}

.pad-b-10 {
  padding-bottom: 10px;
}

.pad-b-20 {
  padding-bottom: 20px;
}

.pad-l-10 {
  padding-left: 10px;
}

.pad-l-20 {
  padding-left: 20px;
}

.pad-r-10 {
  padding-right: 10px;
}

.pad-r-20 {
  padding-right: 20px;
}

.pad-y-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.pad-y-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.pad-x-10 {
  padding-left: 10px;
  padding-right: 10px;
}

.pad-x-20 {
  padding-left: 20px;
  padding-right: 20px;
}

.marg-10 {
  margin: 10px;
}

.marg-20 {
  margin: 20px;
}

.marg-t-10 {
  margin-top: 10px;
}

.marg-t-20 {
  margin-top: 20px;
}

.marg-t-auto {
  margin-top: auto;
}

.marg-b-10 {
  margin-bottom: 10px;
}

.marg-b-20 {
  margin-bottom: 20px;
}

.marg-b-auto {
  margin-bottom: auto;
}

.marg-l-10 {
  margin-left: 10px;
}

.marg-l-20 {
  margin-left: 20px;
}

.marg-l-auto {
  margin-left: auto;
}

.marg-r-10 {
  margin-right: 10px;
}

.marg-r-20 {
  margin-right: 20px;
}

.marg-r-auto {
  margin-right: auto;
}

.marg-y-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.marg-y-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.marg-y-auto {
  margin-top: auto;
  margin-bottom: auto;
}

.marg-x-10 {
  margin-left: 10px;
  margin-right: 10px;
}

.marg-x-20 {
  margin-left: 20px;
  margin-right: 20px;
}

.marg-x-auto {
  margin-left: auto;
  margin-right: auto;
}

/* flex class */

.f {
  display: flex;
}

.gap-5 {
  display: flex;
  gap: 5px;
}

.gap-10 {
  display: flex;
  gap: 10px;
}

.gap-20 {
  display: flex;
  gap: 20px;
}

.gap-30 {
  display: flex;
  gap: 30px;
}

.f-column {
  display: flex;
  flex-direction: column;
}

.f-start {
  display: flex;
  justify-content: start;
}

.f-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.f-start-y {
  display: flex;
  align-items: start;
}

.f-center-y {
  display: flex;
  align-items: center;
}

.f-center-x {
  display: flex;
  justify-content: center;
}

.f-between {
  display: flex;
  justify-content: space-between;
}

.f-around {
  display: flex;
  justify-content: space-around;
}

.f-evenly {
  display: flex;
  justify-content: space-evenly;
}

.f-end {
  display: flex;
  justify-content: end;
}

/* align items */

.f-a-center {
  display: flex;
  align-items: center;
}

.f-a-start {
  display: flex;
  align-items: start;
}

.f-a-end {
  display: flex;
  align-items: end;
}

.f-wrap {
  flex-wrap: wrap;
}

.a-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.tc {
  text-align: center;
}

.br {
  border-radius: 6px;
}

.br-50 {
  border-radius: 50% !important;
}

.shadow {
  box-shadow: 0px 0px 4px 2px var(--dark);
}

.clickable {
  cursor: pointer;
}

.rotate-handler {
  --rotate: 0deg; /* for animation */
  --initial-rotate: 0deg; /* for start position */
  --full-rotate: calc(var(--initial-rotate) + var(--rotate));
  rotate: var(--full-rotate);

  .rotate-child {
    rotate: calc(-1 * var(--full-rotate));
  }
}

.loader-component {
  --color: var(--blue);
  --duration: 2s;
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--blue);
  border-radius: 50%;
  filter: blur(4px);

  &::after,
  &::before {
    content: '';
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    box-shadow:
      0px 0px 4px 0px var(--blue),
      inset 0px 0px 4px 0px var(--blue);
    opacity: 0;
  }

  &::after {
    animation: pulse var(--duration) ease-out infinite;
  }

  &::before {
    animation: pulse var(--duration) ease-out infinite calc(var(--duration) / 2);
  }
}

@keyframes pulse {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: scale(3);
  }
}

.search-field {
  border-radius: 50px;
  background: var(--deep-dark);
  border: solid 1px var(--purple);

  input[type='search'] {
    background: var(--deep-dark);
    color: var(--text);
  }
}

.slider:is(.slider-active) {
  display: flex;
  align-items: center;
  justify-items: center;
  position: relative;
  overflow: hidden;

  & > .slider-slide {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;

    .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}

.slider-toggle-play {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  width: 24px;
  height: 24px;

  .auto-button {
    width: 24px;
    position: absolute;
    fill: var(--orange);
  }

  &:not(.play) {
    .auto-pause {
      display: none;
    }

    .auto-play {
      display: initial;
    }
  }

  &:is(.play) {
    .auto-pause {
      display: initial;
    }

    .auto-play {
      display: none;
    }
  }
}

.slider-anchor-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background: var(--dark);
  border-radius: 6px;
  padding: 6px 10px;

  .slider-anchor {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--orange);
    cursor: pointer;

    &::after {
      content: '';
      position: absolute;
      width: 200%;
      height: 200%;
      transform: scale(0.5);
      border-radius: 50%;
      border: solid 0.5px var(--orange);
      transition: transform 0.5s ease;
    }

    &:is(.current)::after {
      transform: scale(1);
    }
  }
}

.animate-arrow {
  --width: 30px;
  --height: var(--width);
  width: var(--width);
  height: var(--height);
  position: relative;
  --animation-duration: 2s;

  svg {
    width: 100%;
    height: auto;
    stroke: var(--orange);
    position: absolute;
    opacity: 0;
    animation: var(--animation-duration) infinite ease-out down;
  }

  svg:last-child {
    animation-delay: calc(var(--animation-duration) * 0.5);
  }
}

@keyframes down {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(75%);
  }
}

#alert-box-container {
  --margin-y: 15px;
  position: fixed;
  bottom: 15px;
  right: calc(-1 * var(--margin-y));
  translate: 100%;
  max-width: calc(100vw - var(--margin-y) * 2);
  z-index: 5000;

  .alert-box {
    --border: var(--deep-dark);
    max-width: 100%;
    border: solid 1px var(--border);
    background: var(--dark);
    translate: 0;
    transition: translate 0.2s ease;

    &:is(.success) {
      --border: var(--valid);
    }

    &:is(.error) {
      --border: var(--danger);
    }

    &:is(.open) {
      translate: calc(-100% - var(--margin-y) * 2);
    }
  }
}