/*
  Didact Gothic should be similar to Futura
  Libre Franklin weight 900 should be similar to Franklin Gothic Heavy
*/
@import url('https://fonts.googleapis.com/css2?family=Didact+Gothic&family=Libre+Franklin:wght@900&family=Russo+One&display=swap');

body {
  background-color: #222222;
}

.page {
  background-color: #222222;
  margin-left: 30%;
  width: 65%;
  max-width: 800px;
  padding-bottom: 20px;
  font-family: Futura, 'Didact Gothic', sans-serif;
  color: #DCDCDCDC;
}

.content {
  position: relative;
  z-index: 2;
}

.content p,
.content li,
.content .hero-image img {
  position: relative;
  z-index: 2;
}

.hero-image img {
  width: 100%;
  height: auto;
}

.hero-image {
  width: 100%;
  height: auto;
  position: relative;
}

.joinit-overlay {
  background-color: #df0000;
  color: #222222;
  z-index: 3;
  position: absolute;
  float: right;
  right: 20px;
  bottom: 20px;
  padding: 20px;
}

.joinit-overlay a {
  color: #222222;
  font-weight: bold;
  text-decoration: none;
}

.joinit-overlay a:hover {
  color: #222222;
}

.content h1,
.content h2 {
  position: inherit;
  z-index: 2;
  color: #df0000;
}

.content h1 {
  font-family: 'Russo One', sans-serif;
}

.content h2 {
  font-family: 'Franklin Gothic Medium', 'Libre Franklin', sans-serif;
  text-transform: uppercase;
}

.bg-image {
  position: absolute;
  z-index: 1;
  margin-left: 200px;
  margin-top: -200px;
  pointer-events: none;
  width: 900px;
}

.navbar {
  padding: 0;
  font-family: 'Franklin Gothic Heavy', 'Libre Franklin', sans-serif;
  display: inline-block;
  background-color: #df0000;
  list-style-type: none;
  margin: 0;
  overflow: hidden;
}

a {
  color: #ffc800;
}

a:hover {
  color: #df0000;
}

p {
  word-wrap: break-word;
}

.sidebar {
  float: left;
  width: 30%;
}

.contact-links {
  background-color: #333333;
  margin-top: 10%;
  margin-left: 12%;
  margin-right: 44%;
  width: 44%;
  padding: 5%;
}

.contact-links a {
  font-weight: bold;
  text-decoration: underline;
  font-family: Futura, 'Didact Gothic', sans-serif;
}

.contact-links ul {
  list-style-type: none;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}

.contact-links ul li {
  padding: 10px;
}

.ma-logo {
  width: 60%;
  margin-left: 20%;
  margin-top: 10%;
  height: auto;
}

.logo-subtext {
  font-family: Futura, 'Didact Gothic', sans-serif;
  color: #DCDCDCDC;
  text-align: center;
}

/* Navbar from W3 schools */

.navbar-li {
  float: left;
}

.navbar-li-a {
  color: #df0000;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color: #333
}

#donate {
  color: #ffc800;
}

.navbar-li-a:hover {
  color: #ffc800;
  background-color: #df0000;
}

.navbar-active {
  color: #df0000;
  display: block;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  background-color: #222222;
}

.navbar-active:hover {
  color: #ffc800;
}