html {
  scroll-behavior: smooth;
}

.happy-monkey-regular {
  font-family: "Happy Monkey", system-ui;
  font-weight: 400;
  font-style: normal;
}

.forsida {
  background-image: linear-gradient(to bottom, #330055, black, #7b0323);
  color: #E4E4E4;
  border: 2px solid #0f0f1b;
  font-size: 1.2rem;
}

.hollow {
  background-image: linear-gradient(to bottom, #330055, black);
  color: #DEDEDE;
  border: 2px solid #0f0f1b;
  font-size: 1.2rem;
}

.silksong {
  background-image: linear-gradient(to bottom, #7b0323, black);
  color: #E6E6E6;
  border: 2px solid #0f0f1b;
  font-size: 1.2rem;
}

h1 {
  font-size: 4rem;
  padding: 1rem;
  margin: 0px;
}

img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.grid-container>div {
  display: grid;
  text-align: center;
  margin: 1rem;
  margin-bottom: 0px;
}

.text-left {
  text-align: start;
}

.text-middle {
  text-align: center;
}

.grid-container {
  grid-template-columns: auto;
  display: grid;
  text-align: center;
  row-gap: none;
}

.grid-container>.nav-grid-item {
  text-decoration: none;
}

.grid-container>.nav-grid-item:link,
.nav-grid-container>.grid-item:visited {
  background-color: #fafbf6;
  color: #c6b7be;
  border: 1px solid #0f0f1b;
}

.audio-container {
  grid-template-columns: auto;
  display: grid;
  justify-content: center;
}

.grid-container>.nav-grid-item:hover {
  background-color: #c6b7be;
  color: #565a75;
  border: 2px solid #0f0f1b;
}

.heimildir {
  border-top: 2px solid #0f0f1b;
}

.heimild-text {
  text-align: center;
}

.heimild-link {
  text-decoration: none;
  color: #E4E4E4;
}

@media screen and (min-width:600px) {
  .col-4 {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width:768px) {
  .col-2 {
    grid-template-columns: 1fr 1fr;
  }

  .col-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .text-middle-left {
    text-align: start;
  }

  .audio-col-4 {
    grid-template-columns: 1fr 1fr;
  }

  .col-5 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-item_5 {
    grid-column: 1 / span 2;
  }
}

@media screen and (min-width:960px) {
  .audio-col-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .col-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

  .grid-item_5 {
    grid-column: 1 / span 4;
  }
}

@media screen and (min-width:1200px) {
  .col-5 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .grid-item_5 {
    grid-column: 5 / span 5;
  }
}