body {
  background: url("bg.png") no-repeat;
  background-size: cover;
  background-attachment: fixed;
  color: white;
  font-family: "Times New Roman", Times, serif;
  image-rendering: crisp-edges;
}

#page {
  min-height: 80vh;
  display: grid;
  grid-template-areas: "sidebar content";
  grid-template-columns: 1fr minmax(9fr, 10fr);
  padding: 5px;
}

@media (min-width: 1280px) {
  #page {
    width: 80%;
    margin: 0 auto;
  }
}
.panel {
  position: relative;
  color: #f1e0ff;
  background: rgba(34, 30, 36, 0.75);
  border: 3px outset #221e24;
  margin: 3px;
  padding: 3px;
  -webkit-backdrop-filter: blur(0.5rem);
          backdrop-filter: blur(0.5rem);
}

.link-ext {
  color: #fffd79;
  text-decoration: underline;
  cursor: pointer;
}
.link-ext:visited {
  color: #d6d32e;
}

.link-int {
  color: #81ffa6;
  text-decoration: underline;
  cursor: pointer;
}
.link-int:visited {
  color: #37d166;
}

.text-hover {
  text-decoration: underline;
  cursor: pointer;
}

#sidebar h1 {
  margin: 3px;
  margin-bottom: 12px;
}

#sidebar h2, h3 {
  margin: 3px;
}

#sidebar {
  grid-area: sidebar;
}

#content {
  grid-area: content;
}

.sidebar-list {
  list-style-type: none;
  padding: 0 1rem;
  margin-top: 4px;
}

.btn {
  margin: 5px;
  border: 3px outset;
  font-family: "Times New Roman", Times, serif;
  cursor: pointer;
}
.btn:active {
  border: 3px inset;
}

.outside-txt {
  text-align: center;
  color: #f1e0ff;
  text-shadow: #221e24 3px 2px;
}

.grid-item {
  display: inline-block;
}

footer {
  position: absolute;
  bottom: 3px;
  width: 100%;
  text-align: center;
}

.active {
  text-decoration: underline;
}

#header h2 {
  display: inline;
  margin: 5.5px;
  float: right;
}

#sidebar-btn {
  background-color: #221e24;
  color: white;
  border-color: #221e24;
}
#sidebar-btn:active {
  border-color: #221e24;
}

#splash-text {
  color: rgba(241, 224, 255, 0.75);
  font-size: small;
  background: none;
  border: none;
}