:root {
  width: 100%;
  height: 100%;
  --main-theme: 194, 157, 98;

  @media (prefers-color-scheme: dark) {
    --background-color: rgba(45, 45, 45, 0.75);
    --text-color: white;
  }

  @media (prefers-color-scheme: light) {
    --background-color: white;
    --text-color: #2d2d2d;
  }

  background-size: 100% 100%;
  background-position: center;
}
.bg-img1 { background-image: url('/img/main_cat.jpg'); }
.bg-img2 { background-image: url('/img/O_O.jpg'); }
.bg-img3 { background-image: url('/img/the_tragedy.png'); }
.bg-img4 { background-image: url('/img/meowl.jpg'); }
.bg-img5 { background-image: url('/img/Side_eye_cat.jpg'); }
.bg-img6 { background-image: url('/img/spanish_meme.jpg'); }
.bg-img7 { background-image: url('/img/who.jfif'); }

body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Comic Sans MS", "Impact", cursive;
  background: var(--background-color);
  color: var(--text-color);
  flex-direction: column;
  align-items: center;
}

hr {
  width: 90%;
  padding: 0;
  margin: 0;
  align-self: center;
}

nav {
  width: 100%;
  height: min-content;
  background: rgba(var(--main-theme), 0.5);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  .resize-me {
    padding: 16px;
    display: inline-block;
    height: 48px;
    width: auto;

    div {
      width: 48px;
    }
  }

  div {
    align-self: center;
    padding: 10px;
  }


}

a {
  color: white;
}

#main-content {
  display: flex;
  text-align: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.error {
  color: rgb(250, 52, 52);
  text-decoration: underline;
}