@font-face {
  font-family: "New Machine Demo";
  src: url("fonts/newmachinesdemo.eot");
  src: url("fonts/newmachinesdemo.eot") format("embedded-opentype"),
    url("fonts/newmachinesdemo.woff2") format("woff2"),
    url("fonts/newmachinesdemo.woff") format("woff"),
    url("fonts/newmachinesdemo.ttf") format("truetype"),
    url("fonts/newmachinesdemo.svg#newmachinesdemo") format("svg");
}

* {
  box-sizing: border-box;
}

body {
  margin: 2%;
  padding: 2%;
  background: rgb(9, 15, 22);
  background: linear-gradient(
    90deg,
    rgba(9, 15, 22, 1) 0%,
    rgba(240, 240, 255, 1) 100%
  );
}

header {
  padding: 20px;
  text-align: center;
  border: 2px solid #090f16;
  font-family: 'New Machines Demo';
}

header,
span {
  color: #f0f0ff;
  font-size: 48px;
  cursor: pointer;
  letter-spacing: 2px;
  transition-duration: 0.8s;
  font-family: 'New Machines Demo';
  -webkit-text-stroke: 0.8px #090f16;
  text-shadow: 0px 1px 1px #090f16, 0px 2px 2px #090f16, 0px 3px 3px #090f16,
    0px 4px 4px #090f16;
}

span:hover {
  color: #3b3f42;
}

span:active {
  color: #244454;
}

nav {
  display: flex;
  padding: 22px 20px;
  border: 2px solid #090f16;
  justify-content: space-evenly;
}

nav > a {
  color: #090f16;
  cursor: pointer;
  text-decoration: none;
}

a > .fa-brands {
  color: #f0f0ff;
  font-size: 32px;
  transition-duration: 0.8s;
  text-shadow: 0px 1px 1px #090f16, 0px 2px 2px #090f16, 0px 3px 3px #090f16,
    0px 4px 4px #090f16;
}

.fa-brands:hover {
  color: #3b3f42;
}

.fa-brands:active {
  color: #244454;
}

.row {
  display: flex;
  padding: 22px 20px;
  align-items: center;
  box-sizing: border-box;
  justify-content: center;
  border: 2px solid #090f16;
}

aside,
section {
  margin: 8px;
  display: flex;
  align-items: center;
  border-radius: 28px;
  justify-content: center;
  border: 2px solid #f0f0ff;
  box-shadow: 10px 10px 15px 5px;
}

iframe {
  border-radius: 28px;
}

@media screen and (max-width: 700px) {
  nav,
  .row,
  aside,
  section {
    align-items: center;
    flex-flow: row wrap;
  }
}
