:root {
  --text: white;
  --accent: #ff0033;
  --bg: #000000;
  --panel: #0a0a0a;
}

body {
  margin:0;
   font-family: "Passero One", sans-serif;
  color: white;
  background: black;
}

.container {
  max-width: 90rem;
  margin: 0 auto;

  border: 4px solid var(--accent-color);

  display: flex;
  flex-wrap: wrap;

  background: black;
}

header {
  width:100%;
  height:200px;

  background: url("images/nmh-bg.jpg");
  background-size:cover;
  background-position:center;

  position:relative;

  border-bottom:4px solid var(--accent);
}

header span {
  font-size:80px;
  position:absolute;
  bottom:10px;
  left:20px;

  letter-spacing:5px;

  text-shadow:
    4px 4px 0 red,
    -4px -4px 0 black;
}

nav {
  background:black;
  border-right:4px solid var(--accent);
  padding:20px;
}

nav a {
  display:block;

  font-size:30px;
  letter-spacing:3px;

  padding:10px;

  text-decoration:none;
  color:white;

  transition:0.2s;
}

nav a:hover {
  background:#ff0033;
  color:black;
  transform:translateX(10px);
}

section {
  background:#111;
  padding:20px;

  border-left:4px solid var(--accent);
}


body::after {
  content:"";

  position:fixed;
  width:100%;
  height:100%;

  background:url("images/noise.png");

  opacity:0.15;

  pointer-events:none;
}

.passero-one-regular {
  font-family: "Passero One", sans-serif;
  font-weight: 400;
  font-style: normal;
}
