@font-face {
  font-family: departure-mono;
  src: url(../fonts/DepartureMonoNerdFontMono-Regular.otf);
}

body {
  background-color:#e8f48c;
  background-image: url("../img/about_bg2.png");
  font-family: departure-mono, consolas, monospace;
}

article, footer {
  border: 3px double #d4f8b2;
  color: white;

  a:link, a:visited {
    color: #b2ec5d;
  }
  a:active {
    color: #00ff00;
  }
}

section {
  color: white;
}

footer {
  width: 90%;
  background-color: black;
  border: 3px double #d4f8b2;
  padding-left: 20px;
  padding-right: 20px;
  margin: 0 auto;
  margin-top: 7px;
}

.about-table {
  margin: 0 auto;

  td {
    padding: 5px;
    border: 3px double #d4f8b2;
  }
}

.logo img {
  max-width: 100%;
}

.horizontal {
  background-color: black;
  padding-left: 15px;

  display: flex;
}

.vertical {
  background-color: black;
  padding-left: 15px;
}

.outer-border {
  width: 90%;
  background-color: black;
  border: 3px double #d4f8b2;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  padding-top: 17px;
  margin: 0 auto;
  font-size: 1.1em;

  u {
    text-decoration-style: wavy;
  }

  a:link, a:visited {
    color: #b2ec5d;
  }
  a:active {
    color: #00ff00;
  }
}

.sidebarbutton {
  border: 7px double #d4f8b2;
  color: #d4f8b2;
  a:link, a:visited {
    color: #d4f8b2;
  }
  a:hover {
    color: #b2ec5d;
  }
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}

.headerbar {
  max-width:10%;
  height: 50px;
  border: 7px double #d4f8b2;
  margin: 0 auto;
  color: #d4f8b2;
  a:link, a:visited {
    color: #d4f8b2;
  }
  a:hover {
    color: #b2ec5d;
  }
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
}

.homepage-gallery {
  display: flex;
}

.avatar aside {
  width: 300px;
}

.avatar img {
  padding-top: 15px;
}

.about-text p {
  padding-left: 10px;
  padding-right: 10px;
}


.about-text {
  h2 {
  padding-left: 10px;
  padding-right: 10px;
  }
}

.distro pre, strong {
  color: #d4f8b2;
}

.fetchinfo {
  padding-left: 50px;
}

.links {
  width: 60%;
  display: flex;
}

.shrines {
  max-width: 90%;
  background-image: url("../img/shrineindex_bg.png");
  border: 3px dashed #d4f8b2;
  border-radius: 10px;
}

.link-text {
  p {
    max-width: 90%;
  }
}

.linkcategory {
    min-width: 45%;
    height: 300px;
    overflow-y: scroll;
    padding: 5px;
    margin-right: 15px;
    margin-bottom: 5px;
    border: 2px dashed #d4f8b2;
    border-radius: 7px;
}

/* for when the screen is TOO big */
@media screen and (min-width: 2000px) {
  .logo img {
    max-width: 90%;
  }
}