@font-face {
  font-family: Cartoon;
  src: url("/fonts/ComicNeue-Angular-Regular.ttf")
}

@font-face {
  font-family: CartoonBold;
  src: url("/fonts/ComicNeue-Angular-Bold.ttf")
}

body {
  font-family: Cartoon;
  color: white;
  background-image: url("https://music-by-margaruine.neocities.org/background_images/GameIdeasBackgroundNew.png");
  background-size: cover;
  background-attachment: fixed;
}

h1, h2, h3, dt, strong, b {
  font-family: CartoonBold;
}

a {
  color: cyan;
}

h1 {
  text-align: center;
  font-size: 70px;
}

h2 {
  font-size: 40px;
}

h3 {
  font-size: 25px;
}

dt {
  font-size: 20px;
}

p {
  line-height: 1.6;
}

li {
  margin-top: 3px;
}

.container {
  width: 75%;
  height: 80vh;
  overflow: auto;
  margin-left: auto;
  margin-right: 2vw;
  background-image: linear-gradient(to bottom, rgba(40, 40, 40, 0.5), rgba(40, 40, 40, 0.8));
  border: 5px solid #fff;
  border-radius: 30px;
  padding: 5px;
}

/* SCROLLBAR */
::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  opacity: 1
}

::-webkit-scrollbar-thumb {
  background: #8a8a8a;
  border: 3px solid #8a8a8a;
  border-radius: 30px;
}

/* RETURN BUTTON */
.returnbutton {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 160px;
  height: 70px;
  background-image: url("https://music-by-margaruine.neocities.org/ReturnButtonNohover.png")
}

.returnbutton:hover {
  background-image: url("https://music-by-margaruine.neocities.org/ReturnButtonHover.png")
}

/* NAVBLOCK */

.navblock {
  position: fixed;
  top: 80px;
  left: 5px;
  width: 18%;
  background-image: linear-gradient(to bottom, rgba(40, 40, 40, 0.5), rgba(40, 40, 40, 0.8));
  border: 5px dotted #4a71b0;
  border-radius: 30px;
  padding: 5px;
}

.navblock p {
  font-size: 14px;
  line-height: 1.4;
}

.navblock h3 {
  text-align: center;
  margin: 5px auto;
}