:root {
  --color-white: hsla(0, 0%, 100%, 1);
  --color-gray1:hsla(0, 0%, 22%, 1);
  --color-gray: hsl(0, 0%, 50%);
  --color-graydark: #aaaaaa;
  --color-graylight: hsla(0, 0%, 61%, 1);
  --color-black: hsla(0, 0%, 0%, 1);
  --color-black-bg: hsla(0, 0%, 5%, 1);
  --color-orange: hsla(24, 67%, 45%, 1);
  --color-red: hsla(10, 84%, 32%, 1);
  --color-electricblue: hsla(182, 98%, 79%, 1);
  --color-cadetblue: hsla(181, 33%, 50%, 1);
  --color-egyptianblue: hsla(233, 79%, 35%, 1);
  --color-charcoal: hsla(0, 0%, 29%, 1);
  --color-yellow: hsla(45, 75%, 58%, 1);
  --color-neptune: hsla(183, 25%, 55%, 1);
  --color-pirategold: hsla(30, 75%, 42%, 1);
  --color-green: hsla(97, 67%, 39%, 1);
  --font-main: "PerfectDOSVGA437", Arial, sans-serif;
  --font-typed: "PressStart2PRegular", Arial, sans-serif;
}

body {
  font-family: var(--font-main);
  font-size: 14px;
  line-height: 17px;
  color: var(--color-graydark);
  background-color: var(--color-black-bg);
  -webkit-font-smoothing: antialiased;
  min-width: 320px;
}

body.state-lock {
  overflow: hidden;
}

a {
  color: var(--color-orange);
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

p:not(:last-child) {
  margin-bottom: 30px;
}

h2 {
  font-size: 20px;
  line-height: 20px;
  color: var(--color-white);
  margin-bottom: 10px;
}

.title_h2 {
  border-bottom: 2px solid var(--color-pirategold);
  letter-spacing: 0.02em;
  padding-bottom: 8px;
}

.color-white {
  color: var(--color-white);
}

.color-red {
  color: var(--color-red);
}

.color-electricblue {
  color: var(--color-electricblue);
}

.color-yellow {
  color: var(--color-yellow);
}

.color-cadetblue {
  color: var(--color-cadetblue);
}

@media (min-width: 768px) {
  body {
    font-size: 18px;
    line-height: 22px;
  }

  h2 {
    font-size: 24px;
    line-height: 24px;
  }
}

@media (min-width: 1024px) {
  body {
    font-size: 24px;
    line-height: 29px;
  }

  h2 {
    font-size: 28px;
    line-height: 28px;
  }
}

@media (min-width: 1234px) {
  h2 {
    font-size: 34px;
    line-height: 34px;
    margin-bottom: 20px;
  }

  .title_h2 {
    padding-bottom: 18px;
  }
}