/*
@import url('http://fonts.cdnfonts.com/css/toon-around');
@import url('https://fonts.googleapis.com/css?family=Georama');
 */
@font-face {  font-family: 'Georama';  src: url(./assets/fonts/static/georama.ttf);  }
@font-face {  font-family: 'Toon Around';  src: url(./assets/fonts/static/toon-around.otf);  }
@font-face {  font-family: 'Urbanist';  src: url(./assets/fonts/static/urbanist.ttf);  }
@font-face {  font-family: 'Urbanist Bold';  src: url(./assets/fonts/static/urbanist.ttf);  }
@font-face {  font-family: 'Merriweather';  src: url(./assets/fonts/static/merriweather.ttf);  }

html {
  color: white;
}
.margin {
  margin: 2% 8% 5.6%;
}
h1 {
  font-family: 'Toon Around', sans-serif;
  font-size: 600%;
  text-align: center;
  margin: 0;
}

h2 {
  font-family: Merriweather, serif;
  opacity: 0.9;
}

#splashDisplay {
  color: yellow;
  text-align: center;
  font-family: 'Georama', sans-serif;
}

#home {
  color: white;
  text-align: center;
  font-family: 'Georama', sans-serif;
  margin: 0;
  opacity: 0.8;
}

p {
  font-family: 'Urbanist', sans-serif;
  font-size: 100%;
  opacity: 0.8;
}

a {
  color: #bfbfbf;
  text-decoration: none;
}

.title {
  margin-bottom: 2%;
}
#footer {
  margin: 0 30px;
  color: #4f4f4f;
}

.grid-container {
  display: grid;
  grid-template-columns: 82.5% 4.5% 12%;
}
img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
  position: center;
}
body {
  background: url("/assets/background.png");
  background-size: cover;
}

a, a:hover, a:focus, a:active, .c {
  text-decoration: none;
  color: inherit;
}

.title-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  z-index: 3;
}

.title-text {
  color: white;
  font-family: "Toon Around", sans-serif;
  font-size: 40px;
  font-weight: bold;
  padding-left: 15px;
}

.title-splash {
  color: yellow;
  font-family: "Georama", sans-serif;
  font-size: 15px;
  font-weight: bold;
  padding-left: 25px;
}

.title-links {
  margin-left: auto;
  color: white;
}

.title-link {
  color: inherit;
  font-family: "Toon Around", sans-serif;
  font-size: 30px;
  font-weight: bold;
  margin-right: 30px;
}

.black-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65);
  z-index: -1;
}

.tv-static {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  z-index: -2;
  opacity: 0.13;
  background: url("/assets/static.gif");
}