@font-face {
  font-family: "Moderat Mono Black";
    src: url("../fonts/Moderat-Mono-Black.ttf") format("truetype"),
    url("../fonts/Moderat-Mono-Black.woff") format("woff"),
    url("../fonts/Moderat-Mono-Black.woff2") format("woff2");
}

@font-face {
  font-family: "Moderat Mono Bold";
    src: url("../fonts/Moderat-Mono-Bold.ttf") format("truetype"),
    url("../fonts/Moderat-Mono-Bold.woff") format("woff"),
    url("../fonts/Moderat-Mono-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Moderat Regular";
    src: url("../fonts/Moderat-Regular.ttf") format("truetype"),
    url("../fonts/Moderat-Regular.woff") format("woff"),
    url("../fonts/Moderat-Regular.woff2") format("woff2");
}

#logo img {
  margin: 10% 0 0 25%;
  width: 50%;
  max-width: 400px;
padding-bottom: 5%;
}


body {
  background-color: black;
}

p {
  padding: 15px;
  font-family: "Moderat Regular";
  font-size: 1.8em;
  text-align: block;
  color: white;
  margin: 40px;
}

@media screen and (min-width: 30.0625em) and (max-width: 48em),(orientation: portrait) {

  
  #logo img {
    max-width: 140%;
    height: 80%;
  }
}

@media screen and (min-width: 30.0625em) and (max-width: 48em),(orientation: landscape) {

  #logo img {
  
    max-width: 140%;
    height: 80%;
  }
}

@media screen and (max-width: 30em) and (orientation: portrait) {

  p {
    font-size: 1.2em; 
  }

  }
  #logo img {
    width: 50%;
    height: 100%;
  }



@media screen and (max-width: 30em) and (orientation: landscape) {

  p {
    font-size: 1.2em; 
  }

  #logo img {
    max-width: 80%;
    height: 80%;
  }
}