body {
  background-image: url("/img/loftycastle.png");
  background-color: #001;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.box {
  border: 1px solid #204;
  background: rgba(68, 0, 136, 60%);
  color: #fff;
}

h1 {
  margin: 50px 0px 0px 10px;
  text-align: center;
  width: 100%;
}

h2 {
  color: #fff;
  text-shadow: 2px 2px #408;
  font-size: 22pt;
}

hr {
  background: #204;
  max-width: 60%;
  margin: 20px auto;
}

footer {
  color: #204; 
}

.portalnav {
  width: 100%;
  text-align: center;
}

  .portalnav ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-family: 'Silk Screen', 'Lucida', monospace;
    font-size: 16pt;
  }
  
  .portalnav li {
    background: none;
    border: none;
    border-radius: 5px;
    padding: 5px 20px;
    margin: 20px auto;
    max-width: 60%;
  }
  
    .portalnav li:hover {
      background: rgba(255, 255, 255, 20%);
    }
  
  .portalnav a {
    text-decoration: none;
    color: #fff;
  }
  
@media (max-width: 700px) {
  .portalnav li {
    max-width: 100%; 
  }
  
  hr {
    max-width: 100%; 
  }
}