<!--fonts-->
.creepster-regular {
  font-family: "Creepster", system-ui;
  font-weight: 400;
  font-style: normal;
}

.trade-winds-regular {
  font-family: "Trade Winds", system-ui;
  font-weight: 400;
  font-style: normal;
}

/* background background of the website, this is mainly to keep the background consistent */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgb(0, 0, 0);
}

/* Style the header */
header {
  padding: 5px;
  text-align: center;
  font-size: 20px;
  font-family: creepster;
  color:lime;
  background-image: url("https://64.media.tumblr.com/6986bde198223d01c68d34ef5fd83df3/0906cb0076c40d73-13/s1280x1920/7aa6a296d5534c484127f97b2e5a893ea6bfad8a.gifv");
  background-size:cover;
  background-repeat: no-repeat;
  background-color: black;
}

.button {
  background-color: rgba(128, 128, 128, 0.219);
  border: none;
  color: lime;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
  font-family: creepster;
}
.button:hover {
  background-color: lime;
  color: black;
  text-size-adjust: 16px;
}

.heart :hover {
  background-color: lime;
  color: black;
  text-size-adjust: 16px;
  block-size: 40px;
}
/* Create two columns/boxes that floats next to each other */
nav {
  float: left;
  width: 20%;
  padding: 2.5%;
  height: 750px; /* only for demonstration, should be removed */
  background-image: url('https://horrorgifs.neocities.org/gifs/Tombstone/Tombstone%20(84).gif');
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 30px;
  text-align: center;
  font-family: creepster;
  color : lime;
}
navdeco {
  float: left;
  width: 10%;
  height: auto;
  transform: rotate(90deg);
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding: 0;
}

main {
  float: left;
  width: 60%;
  background-color: hwb(0 0% 100%);
  height: 750; /* only for demonstration, should be removed */
  font-family: tradewinds;
  color: lime;
  text-indent: 50px;
  padding-left: 20px;
}

/* Clear floats after the columns */
section::after {
  background-color: black;
  background-size: cover;
  content: "";
  display: table;
  clear: both;
}

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: lime;
  font-family: trade-winds;
}