@font-face {
  font-family: terminus;
  src: url(terminus.ttf)
}

* {
  font-family: terminus;
}

html {
  background-color: #161616;
  width: 100%;
  height: fit-content;
  color: whitesmoke;
}

a {
  text-decoration: none;
  color: #fb4934;
  text-shadow: 0px 0px 2px #7A1B0E;
}

a:hover {
  color: #fa2d2d;
  transition: 300ms;
  text-shadow: none;
}

body {
  margin: auto;
  width: 75%;
  text-align: center;
}

p {
  text-align: left;
}

h2 {
  text-align: left;
}

.contact {
  display: flex;
  gap: 10px;
  list-style-type: none;
}

.contacts a {
  align-self: center;
}

.servers ul {
  list-style-type: none;
}

.servers div {
  text-align: left;
}

figure {
  font-size: 80%;
}

footer {
  border-top: solid 1px #fb4934;
  background-color: #0d0d0d;
  padding: 0.5%;
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  magrin: auto;
}

.content {
  margin-bottom: 10%;
}

@media (orientation: portrait) {
  * {
    font-size: 130%
  }
  body {
    width: 120%
  }
  pre {
    font-size: 160%
  }
  figure img {
    width: 500px;
    height: 500px;
  }
  .servers li, b {
    font-size: 80%;
  }
  footer img {
    width: 130px;
  }
  footer .src {
    border-right: solid 5.5px gray;
    padding-right: 3%;
    padding-left: 3%;
  }
  footer {
    gap: 3%;
    padding: 2%;
  }
  .contacts img {
    width: 15%;
    padding-right: 5%;
  }
  .contacts {
    line-height: 150px;
  }
  h2 {
    font-size: 200%;
  }
}

@media (orientation: landscape) {
  figure {
    margin: 0;
    color: gray;
    font-size: 80%;
    float: right;
    padding: 1%;
  }
  figure img {
    width: 200px;
    height: 200px;
  }
  footer img {
    width: 30px;
  }
  footer .src {
    border-right: solid 0.5px gray;
    padding-right: 10px;
  }
  footer {
    gap: 10px;
  }
  .contacts img {
    width: 50px;
  }
  .contacts {
    display: inline-flex;
    gap: 40px;
  }
}