:root {
  --red-color: #ff6962;
  --red-color-alpha: #ff696200;
  --green-color: #77dd76;
  --green-color-aplha: #77dd7600;
  --background-color: #323232;
  --background-color-alpha: #32323200;
  --primary-text-color: #ffffff;
  /* --secondary-text-color: #8c8c8c; /* initial */
  --secondary-text-color: #9C9C9C; /* WCAG AA */
  /* --secondary-text-color: #C2C2C2; /* WCAG AAA */
  --nav-color: #4a4a4a;
  --nav-text-color: #e0e0e0;
  --modal-background: #2c2c2c;
  --banner-background: #232323;
  --promotion-background: #363636;
}

@font-face {
  font-family: 'Lato';
  src: url('/css/font/Lato-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('/css/font/Lato-Bold.ttf') format('truetype');
  font-weight: bold;
  font-display: swap;
}

@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@-webkit-keyframes fadeOutWithDisplay {
  from { opacity: 1; }
  to { opacity: 0; display: none; }
}

@keyframes fadeOutWithDisplay {
  from { opacity: 1; }
  to { opacity: 0; display: none; }
}

html,
body {
  padding: 0;
  margin: 0;
}

* {
  font-family: "Lato", sans-serif;
}

body {
  background-color: var(--background-color);
  display: flex;
  flex-direction: column;
  align-items: center;
}

span.popup {
  display: block;
  position: absolute;
  padding: 4px 6px;
  font-size: 15px;
  color: var(--green-color);
  background-color: var(--background-color);
  font-weight: bold;
  border: 2px solid var(--green-color);
  border-radius: 14px;
  transition: opacity 200ms ease-in-out;
  opacity: 1;
  z-index: 99999999; 
  -webkit-animation: fadeIn 200ms ease-in-out 0ms normal; 
          animation: fadeIn 200ms ease-in-out 0ms normal;
}

span.popup::after {
  content: '';
  position: absolute;
  display: block;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: -10px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid var(--green-color);
}

span.popup.hide {
  opacity: 0;
}

body > footer a {
  text-decoration: none;
  background-color: var(--green-color-aplha);
  color: var(--green-color);
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 15px 15px 15px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 13px;
  font-size: 22px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  border: 4px solid var(--green-color);
  box-sizing: border-box;
  transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
}

body > footer a:hover,
body > footer a:active,
body > footer a:focus {
  background-color: var(--green-color);
  color: var(--background-color);
  outline: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}