/* https://font.download/font/romana-bt */
@font-face {
  font-family: 'Romana BT';
  src:
    local('Romana BT'),
    local('RomanaBT'),
    url('/assets/main/fonts/RomanaBT.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Reset default styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Define variables */
:root {
  --header-font: 'Raleway', sans-serif;
  --body-font: 'Bricolage Grotesque', sans-serif;
  --light-white: rgb(255 255 255 / 75%);
  --white: white;
  --light-gray: #eee;
  --gray: #757575;
  --black: #212121;
  --light-purple: #4f466c;
  --purple: #2d283e;
  --light-indigo: #302e75;
  --indigo: #2c2a63;
  --light-orange: #ffcf7a;
  --orange: #ffbd47;
  --red: #e53935;
  --border-radius: 1.5rem;
  --scrollbar-width: 10px;
  --main-gradient:
    url('/assets/main/images/background/noise.svg'),
    linear-gradient(150deg, var(--red) 0%, var(--indigo) 25%, var(--purple) 85%);
  --small-margin: calc(var(--margin) / 3);
  --large-margin: calc(2.5 * var(--margin));
  --animation-time: 0.5s;
  --long-animation-time: 1.5s;
  --shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 10%);
  --hover-shadow: 0 0.5rem 0.75rem rgb(0 0 0 / 15%);
  --text-shadow: 0 0.25rem 0.5rem rgb(0 0 0 / 50%);
}

/* Apply default styles */
body {
  width: 100%;
  max-width: 100vw;
  /* stylelint-disable-next-line */
  overflow-x: hidden;
  font-family: var(--body-font);
  color: var(--black);
  font-size: 1rem;
  position: relative; /* Aboslute is relative to body */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight */
  /* Overflow can be used safely in this case */
  /* stylelint-disable-next-line */
  overflow-x: hidden;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--light-gray);
}

main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/assets/main/images/background/neurons.svg');
  background-size: auto;
  opacity: 0.05;
}

.banner {
  background: var(--main-gradient);
  width: 100%;
  min-height: 80vh;
  position: relative; /* Allows applying of z-index */
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banner .attention {
  width: 100%;
  padding: var(--large-margin);
  color: var(--light-white);
  position: relative; /* Allows applying of z-index */
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: left;
  align-items: start;
}

.banner img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  opacity: 0.75;
}

.banner::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  aspect-ratio: auto 5;
  background-color: var(--light-gray);
  pointer-events: none;
  z-index: 2;

  /* stylelint-disable-next-line */
  mask: url('/assets/main/images/shapes/wave.svg') no-repeat bottom;
}

.switch-language {
  position: absolute;
  top: 0;
  right: 0;
  margin: var(--small-margin);
  padding: var(--small-margin);
  z-index: 2;
  background: none;
  border: none;
  color: white;
  opacity: 0.8;
  cursor: pointer;
  will-change: opacity;
  transition: opacity var(--animation-time);
}

.switch-language:hover {
  opacity: 1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--header-font);
  text-transform: uppercase;
  padding-bottom: var(--small-margin);
}

p {
  text-align: left;
}

p + p {
  /* Adjacent paragraphs */
  margin-top: 1rem;
}

a {
  transition: color var(--animation-time);
  color: var(--light-orange);
}

a:hover,
a:focus {
  color: var(--orange);
}

ul,
ol {
  margin-left: 1.5rem;
}

hr.separator {
  width: 100%;
  height: 0;
  border: none;
  margin: var(--large-margin) 0;
}

::-webkit-scrollbar {
  width: var(--scrollbar-width);
  background-color: #f8bbd0;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px var(--light-indigo);
  border-radius: var(--border-radius);
  background-color: #f8bbd0;
  border-left: 3px solid var(--light-gray);
  border-right: 3px solid var(--light-gray);
}

::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 px var(--purple);
  background-color: rgb(44 42 99 / 90%);
  border: 2px solid transparent;
}

/* stylelint-disable-next-line */
::selection {
  background: var(--orange);
  color: var(--white);
}

/* Define reusable classes */
.grid {
  width: 100%;
  padding: var(--margin);
  display: grid;
  gap: var(--margin);
  position: relative;
  justify-content: center;
  place-items: flex-start center;
}

.grid.nogap {
  gap: 0;
  padding: 0;
}

.grid.c1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid.c2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.c3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid.c4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.c5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid .large {
  grid-column: 1 / -1; /* Full width */
}

.grid .medium {
  grid-column: span 2; /* Two width */
}

.grid .small {
  grid-column: span 1; /* One width */
}

.track {
  max-width: var(--main-max-width);
}

.puzzle {
  /* Obtained from https://css-tip.com/puzzle-shape/ */
  --puzzle-radius: 20px; /* control the circle radius */
}

.puzzle.first {
  /* stylelint-disable-next-line */
  mask:
    radial-gradient(
      var(--puzzle-radius) at 50% calc(100% - var(--puzzle-radius)),
      #000 calc(100% - 1px),
      #0000
    ),
    radial-gradient(var(--puzzle-radius) at right, #0000 calc(100% - 1px), #000)
      0 0/100% calc(100% - var(--puzzle-radius)) no-repeat;
}

.puzzle.second {
  --puzzle-l: #0000 calc(100% - 1px), #000;
  --puzzle-g: 100% 0/calc(100% - var(--puzzle-radius))
    calc(100% - var(--puzzle-radius)) no-repeat;
  --puzzle-m: /calc(2 * var(--puzzle-radius)) calc(2 * var(--puzzle-radius))
    no-repeat
    radial-gradient(var(--puzzle-radius), #000 calc(100% - 1px), #0000);

  aspect-ratio: 1;
  /* stylelint-disable-next-line */
  mask:
    0 calc(50% - var(--puzzle-radius) / 2) var(--puzzle-m),
    calc(50% + var(--puzzle-radius) / 2) 100% var(--puzzle-m),
    radial-gradient(var(--puzzle-radius) at top, var(--puzzle-l))
      var(--puzzle-g) intersect,
    radial-gradient(var(--puzzle-radius) at right, var(--puzzle-l))
      var(--puzzle-g);
}

.puzzle.third {
  aspect-ratio: 1;

  --puzzle-m: /calc(2 * var(--puzzle-radius)) calc(2 * var(--puzzle-radius))
    no-repeat
    radial-gradient(var(--puzzle-radius), #000 calc(100% - 1px), #0000);
  /* stylelint-disable-next-line */
  mask:
    radial-gradient(
      var(--puzzle-radius) at var(--puzzle-radius) 50%,
      #000 calc(100% - 1px),
      #0000
    ),
    radial-gradient(var(--puzzle-radius) at top, #0000 calc(100% - 1px), #000)
      100% / calc(100% - var(--puzzle-radius)) 100% no-repeat;
}

.color-box {
  background: var(--light-purple);
  color: white;
}

/* Define animation */
@keyframes enter-top {
  0% {
    transform: translateY(-100%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes leave-top {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-100%);
  }
}

@keyframes enter-right {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes leave-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* Responsive design */
/* Desktop */
@media (min-width: 1101px) {
  :root {
    --main-max-width: 1000px;
    --margin: 2.5rem;
  }

  .overlap.left {
    margin-right: var(--margin);
  }

  .overlap.right {
    margin-left: var(--margin);
  }
}

/* Tablet */
@media (min-width: 651px) and (max-width: 1100px) {
  :root {
    --margin: 2rem;
  }

  .grid.c5,
  .grid.c4,
  .grid.c3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :not(.track).grid.c2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .overlap {
    margin-left: var(--margin);
    margin-right: var(--margin);
  }
}

/* Phone */
@media (max-width: 650px) {
  :root {
    --margin: 1.65rem;
  }

  .grid.c5,
  .grid.c4,
  .grid.c3,
  .grid.c2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .overlap {
    margin-left: var(--margin);
    margin-right: var(--margin);
  }
}

/* Printing styles */
@media print {
  :root {
    --margin: 10px;
  }

  * {
    opacity: 1;
    color: black;
  }

  .banner {
    height: auto;
    background: none;
  }

  .banner img {
    display: none;
  }

  .switch-language {
    display: none;
  }

  a {
    text-decoration: none;
    color: black;
  }

  a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
  }

  /* stylelint-disable-next-line */
  @page {
    margin: 2cm;
  }
}