*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: 14px;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar:horizontal {
  height: 8px;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #00000040;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  cursor: pointer;
  background-color: #00000066;
}

#app {
  width: 100svw;
  height: 100svh;
  overflow: hidden;
}

#appLoader {
  --color: #fafafa;
  --clock-color: #165dffff;
  position: fixed;
  inset: 0;
  height: 100svh;
  background-color: var(--color);
  z-index: 999;
  display: grid;
  place-items: center;
  align-content: center;
}

#appLoader * {
  margin: 0;
}
#appLoader h2 {
  display: flex;
  place-items: center;
  gap: 10px;
}
#appLoader > div {
  display: grid;
  width: 650px;
  place-items: center;
  align-content: center;
  gap: 30px;
}

#clock {
  width: 50px;
  height: 50px;
  border: 2px solid;
  border-radius: 50%;
  color: var(--clock-color);
  transform: scale(1);

  &::before, &::after {
    position: absolute;
    width: 0;
    border-left: 2px solid var(--clock-color);
    content: '';
    border-radius: 1px;
    transform-origin: bottom center;
    animation: clockwise linear infinite;
    left: 50%;
    margin-left: -0.5px;
  }

  &::before {
    height: 12px;
    top: calc(50% - 12px);
    animation-duration: 1s;
  }

  &::after {
    height: 10px;
    top: calc(50% - 10px);
    animation-duration: 60s;
  }
}

@keyframes clockwise {
  to {
    transform: rotate(360deg);
  }
}