@import url('fonts/icons.css');
@import url('fonts/quicksand.css');
@import url('fragments/expandable.css');
@import url('fragments/faq-category.css');
@import url('fragments/faq-question.css');
@import url('fragments/faq.css');
@import url('fragments/footer.css');
@import url('fragments/head-section.css');
@import url('fragments/header.css');
@import url('fragments/help-section.css');
@import url('fragments/help.css');
@import url('fragments/hero.css');
@import url('fragments/landing.css');
@import url('fragments/legal.css');
@import url('fragments/logo.css');
@import url('fragments/nav.css');
@import url('fragments/privacy-policy.css');
@import url('fragments/search-filter.css');
@import url('fragments/search.css');
@import url('fragments/tooltip.css');
@import url('fragments/upload.css');
@import url('fragments/home.css');
@import url('fragments/setup.css');
@import url('fragments/login.css');
@import url('fragments/session.css');
@import url('fragments/result.css');
@import url('fragments/leaderboard.css');
@import url('fragments/review.css');



:where(:root) {
  scroll-behavior: smooth;
  --duration-animation: 1s;
  --duration-transition: .25s;
  --border-min-radius: .75rem;
  --border-radius: 1rem;
  --border-width: 0;
  --border-color: transparent;
  --block-background: rgba(45, 49, 66, 1);
  --block-area-color: rgba(79, 93, 116, 1);
  --block-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, .75);
  --page-background: rgba(191, 192, 192, 1);

  --page-max-width: 2200px;
  --page-space: 4rem;
  --page-padding: max(var(--page-space), (100vw - 2200px) / 2);
  --p-line-height: 1.75;
  --p-margin: 1em;
  --font-family: Quicksand;
  --font-color: rgb(51, 51, 51);

  --font-color-alternate: rgb(255, 255, 255);

  --color-primary: rgba(0, 0, 0, 1);
  --color-secondary: rgba(255, 255, 255, 1);
  --color-highlight: rgb(239, 131, 84);

  --color-error: rgb(255, 0, 0);
  --color-warning: rgb(255, 140, 0);
  --color-success: rgb(155, 157, 11);

  --color-1: rgb(0, 0, 255);
  --color-2: rgb(0, 0, 255);
  --color-3: rgb(0, 0, 255);
  --color-4: rgb(0, 0, 255);
  --color-5: rgb(0, 0, 255);
  --color-6: rgb(0, 0, 255);
  --color-7: rgb(0, 0, 255);
  --color-8: rgb(0, 0, 255);
}

section video {
  position: absolute;
  object-fit: cover;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.left-fade::after, .right-fade::after {
  content: '';
  display: block;
  background: linear-gradient(90deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  width: 100%;
  z-index: -1;
}

.bottom-fade::after {
  content: '';
  display: block;
  background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  z-index: -1;
}

.side-scroll {
  overflow: auto clip;
  -ms-overflow-style: none;
  scrollbar-width: none;

  &::-webkit-scrollbar { 
    display: none;
  }

  /*
  &::after {
    font-family: 'icon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\ea07';
  }
    */
}

:where(html, body) {
  margin: 0;
  padding: 0;
  height: auto;
  min-height: 100dvh;
  overscroll-behavior-x: none
}

:where(body) {
  color: var(--font-color);
  font-family: var(--font-family);
  color-scheme: light dark;
  animation-duration: var(--duration-animation);
  transition-duration: var(--duration-transition);
  transition-property: none;
  background: linear-gradient(90deg, var(--page-background) 40%, rgba(0, 0, 0, 0.25) 70%, var(--page-background) 100%) no-repeat center/cover, var(--page-background) url('/img/hero/background.webp') no-repeat center/cover;
  background-attachment: fixed, fixed;
  background: var(--page-background);
}

:where(body),
:where(body) :where(*) {
  box-sizing: border-box;
  touch-action: manipulation
}

:where(body).--loading :where(*) {
  transition: none
}

:where(body)>.page-loader {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: solid 4px var(--color-primary);
  border-top-color: transparent;
  border-bottom-color: transparent;
  z-index: 1000;
  animation: rotate 3s linear infinite
}

:where(:where(body)) :where(h1) {
  font-size: 2em
}

:where(:where(body)) :where(h2) {
  font-size: 1.5em
}

:where(:where(body)) :where(h3) {
  font-size: 1.25em
}

:where(:where(body)) :where(h4) {
  font-size: var(--font-size)
}

:where(:where(body)) :where(h5) {
  font-size: var(--font-size)
}

:where(:where(body)) :where(h6) {
  font-size: var(--font-size)
}

:where(:where(body)) :where(h1),
:where(:where(body)) :where(h2),
:where(:where(body)) :where(h3),
:where(:where(body)) :where(h4),
:where(:where(body)) :where(h5),
:where(:where(body)) :where(h6) {
  margin: 1.5em 0 0
}

:where(:where(body)) :where(a) {
  text-decoration: none;
  white-space: nowrap;
  color: var(--font-color)
}

:where(:where(body)) :where([disabled]) {
  pointer-events: none;
  opacity: .5;
  user-select: none;
  -webkit-user-select: none
}

:where(:where(body)) :where(input, select, textarea) {
  background: var(--block-area-color);
  white-space: nowrap;
  border: none;
  border-radius: var(--border-radius);
  padding: .5rem 1rem;
  font-size: 1rem;
  height: 3rem;
  outline: none
}

:where(:where(body)) :where(input, select, textarea):focus {
  outline: none
}

:where(:where(body)) :where(textarea) {
  resize: none
}

:where(:where(body)) :where(button) {
  background: var(--block-area-color);
  white-space: nowrap;
  border: none;
  border-radius: var(--border-radius);
  padding: .5rem 1rem;
  font-size: 1rem;
  height: 3rem;
  outline: none;
  cursor: pointer;
  transition: transform calc(var(--duration-transition) / 2);
  background: var(--color-primary);
  color: var(--font-color-alternate);
  padding: .5rem 1.5rem
}

:where(:where(body)) :where(button):focus {
  outline: none
}

:where(:where(body)) :where(button):active {
  transform: scale(.95)
}

:where(:where(body)) :where(button).--secondary {
  background: var(--block-area-color);
  color: unset
}

:where(:where(body)) :where(button).--danger {
  background: var(--color-error)
}

:where(:root) {
  --block-background-r: 79;   /*color5: blue*/
  --block-background-g: 93;   /*color5: blue*/
  --block-background-b: 117;  /*color5: blue*/
  --block-area-color-a: 1;    /*color5: blue*/
  --page-background-r: 191;   /*color2: grey*/
  --page-background-g: 192;   /*color2: grey*/
  --page-background-b: 192;   /*color2: grey*/
}

@media screen and (max-width: 1200px) {
  :where(:root) {
    --page-space: 3rem
  }
}

@media (max-width: 600px) and (orientation: portrait) {
  :where(:root) {
    --page-space: 1.5rem
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-animation: 1ms;
    --duration-transition: 1ms
  }

  * {
    animation: none !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important
  }
}

body {
  --header-size: 6rem;
  --footer-size: 20rem;
  --_max-width: 1000px;

  --primary-gradient: linear-gradient(
    135deg,
    var(--color-secondary) 0%,
    rgba(0, 0, 0, 0.3) 100%
  );
}

body {
  background: linear-gradient(
    135deg,
    #fff 0%,
    var(--page-background)  100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

body button {
  border-radius: var(--border-radius);
  background: var(--block-background);
  border: solid 1px var(--color-primary);
  color: var(--color-primary);
  border-color: var(--block-area-color);
  color: #fff;
  background: var(--block-area-color)
}

body .--alternate {
  background: rgba(255, 255, 255, .1);
  border: solid 1px white;
  color: #fff
}

body>main {
  /* min-height: calc(100dvh - var(--header-size) - var(--footer-size) - .1rem); */
  min-height: calc(100vh - var(--header-size) - var(--footer-size));
}

body input {
  border-radius: var(--border-min-radius);
  background: var(--block-area-color);
  color: var(--color-secondary)
}

body section {
  padding: 4rem var(--page-padding);
  display: grid;
  gap: 1rem;
  position: relative;
  isolation: isolate;
  margin: 2rem 0;

  &:first-child {
    margin-top: 0;
  }

  &:last-child {
    margin-bottom: 0;
  }
}

body section h1 {
  font-weight: 500;
  text-transform: uppercase;
  margin: 0
}

body section h1,
body section h2 {
  color: var(--color-primary);
  line-height: 1.25;
}

body section p {
  max-width: var(--_max-width);
  font-weight: 500;
  white-space: pre-line;
  line-height: 1.75
}

body section p:last-child {
  margin-bottom: 0
}

body section>img,
body section>picture>img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2
}

body section a {
  font-weight: 700
}

body[data-path="/"] section {
  padding: 4rem;
  text-align: center;
  max-width: 1000px;
  border: solid 1px var(--block-area-color);
  margin: 2rem auto
}

details > summary::marker, details > summary::-webkit-details-marker {
  display: none;
} 

details::details-content {
	display: block;
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.5s;
	transition-behavior: allow-discrete;
}

details[open]::details-content {
	block-size: auto;
	block-size: calc-size(auto, size);
}

span.explainer-text span {
  display: block;
  opacity: .75;
  margin-bottom: .25rem;
  font-weight: normal;
}

span.explainer-text strong {
  font-size: 1.5em
}

@keyframes __top-in {
  0% {
    transform: translateY(-10vmin);
    opacity: 0
  }
}

@keyframes __bottom-in {
  0% {
    transform: translateY(10vmin);
    opacity: 0
  }
}

@keyframes __left-in {
  0% {
    transform: translate(-10vmin);
    opacity: 0
  }
}