@import url('variables.css');
@import url('reset.css');

@media (max-width: 1900px) {
  html {
    zoom: 0.67;
  }
}


/* Typography */

@font-face {
  font-family: "Orbitron-Medium";
  src: url(../fonts/Orbitron-Medium.ttf);
}

@font-face {
  font-family: "AnonymousPro-Regular";
  src: url(../fonts/AnonymousPro-Regular.ttf);
}

@font-face {
  font-family: "another_danger";
  src: url(../fonts/another_danger.otf);
}

/* Body */

body {
  background: black;
  background-image: url(../images/background.png);
  background-size: contain;
  background-attachment: fixed;
}

/* Header */

.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3rem 3rem;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
}

.pages img {
  width: 100px;
  height: auto;
}

.pages {
  font-family: var(--font-heading);
  text-transform: uppercase;
}

a {
  color: white;
  font-size: 32px;
  text-decoration: none;
}

h1 > a {
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: lighter;
  text-transform: uppercase;
  color: var(--color-blue);
}

/* Burger Menu */

.burger {
  all: unset;
  display: none;
  font-size: 2rem;
}

/* Footer */

.main-footer .pages a {
  font-size: 24px;
}