@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+Mono+TC&display=swap');

:root {
  --font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
  --font-family-ru: "Great Vibes", cursive;
  --font-family-zh: "LXGW WenKai Mono TC", monospace;
  --font-weight: 400;
  --line-height: 1.4;

  --font-size-primary: 1rem;
  --font-size-title: 10rem;

  --fg-primary: #e6ac7c;
  --fg-secondary: #6e6e6e;
  --fg-inverted: white;

  --bg-primary: #b61c2b;
  --bg-secondary: #dc2424;
  --bg-third: #f5f5f7;

  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
  --gap-xl: 32px;
  --gap-xxl: 64px;

  --spacing: 4px;
  --form-padding: 8px;

  --transition: 0.4s;
  --scale: 1.04;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-primary);
  font-weight: var(--font-weight);
  line-height: var(--line-height);

  color: var(--fg-primary);
  background-color: var(--bg-primary);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02) 100%), linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.02) 75%, rgba(255, 255, 255, 0.02) 100%);
  background-size: 64px 64px;

  border: 4px solid var(--bg-secondary);
  box-sizing: border-box;
  box-shadow: inset 0 0 256px rgba(0, 0, 0, 0.2);

  display: flex;
  flex-direction: column;
  position: relative;
}

header {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: var(--gap-lg);

  @media (max-width: 576px) {
    padding: var(--gap-xxl) 0 var(--gap-lg) 0;
  }

  a {
    color: var(--fg-primary);
    opacity: 0.8;
    text-decoration: none;
    padding: var(--gap-sm) var(--gap-sm);
    transition: all var(--transition) ease;

    &:hover {
      background-color: var(--fg-primary);
      color: var(--bg-primary);
      transform: scale(var(--scale));
    }
  }
}

main {
  flex: 1;
}

footer {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: var(--gap-lg);

  @media (max-width: 576px) {
    padding: var(--gap-xxl);
  }

  a {
    padding: var(--gap-sm) var(--gap-sm);
    transition: all var(--transition) ease;

    svg {
      fill: var(--fg-primary);
      height: 100%;
      opacity: 0.6;
      transition: all var(--transition) ease;
    }

    &:hover {
      background-color: var(--fg-primary);
      transform: scale(var(--scale));

      svg {
        fill: var(--bg-primary);
        opacity: 0.6;
      }
    }
  }
}

.container {
  margin: 0 auto var(--gap-md) auto;
  max-width: 1140px;
  width: 100%;

  @media (max-width: 1200px) {
    max-width: 960px;
  }

  @media (max-width: 992px) {
    max-width: 720px;
  }

  @media (max-width: 768px) {
    max-width: 540px;
  }

  @media (max-width: 576px) {
    max-width: 100%;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 calc(var(--gap-sm) / -2) 0 calc(var(--gap-sm) / -2);

    > * {
      width: 100%;
      max-width: 100%;
      padding: 0 calc(var(--gap-sm) / 0.5);
      margin: var(--gap-md) 0 0 0;
    }

    .col {
      flex: 1 0 0;
    }
  }

  section {
    margin: 0 var(--gap-md);
  }
}

.mandarin {
  font-family: var(--font-family-zh);
}

.russian {
  font-family: var(--font-family-ru);
}

@keyframes shiny-sweep {
  0% { background-position: 100% 0, 0 0; }
  100% { background-position: 0% 0, 0 0; }
}