body{
  margin:0;
  background-color: black;
  scrollbar-width: thin;
  scrollbar-color: #a6ff00 #000000;
  font-variant: small-caps;
  font-size: 1.5rem;
}

@font-face {
  font-family: ravie; /* set name */
  src: url("https://zevteland.neocities.org/fonts/RAVIE.TTF"); /* url of the font */
}
@font-face {
  font-family: curly; /* set name */
  src: url("https://zevteland.neocities.org/fonts/POTI.TTF"); /* url of the font */
}

ravie {
  font-size: 5rem;
  font-family: ravie;
  font-variant: none;
}
curly{
  font-size: 6rem;
  font-family: curly;
  font-variant: none;
}
.flex{
  display:flex;
}
#header {
  width: 100%;
  height: 5vh;
  align-items:center;
  position: fixed;
  background-color: black;
  font-size: 1.8rem;
  padding-top:1.5vh;
  padding-bottom:1.5vh;
}
#header a {
  margin: 3vw;
  padding: .5%;
  background-color: rgb(124, 0, 145);
  text-decoration: none;
  border-radius:10px;
}
#header a:hover{
  color:white;
  background-color: red;
}
.layout {
  max-width: 100%;

  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(2, 1fr);
}
#left{
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-image: url('/meats/marr.png');
}
#right{
  width: 100%;
  overflow: auto;
  background-image: url('/meats/marrrrr.png');
}
#mari-description{
  padding: 1vw;
  margin:2.5vw;
  margin-top: 10vh;
  background-color: rgba(170,90,255,.8);
}
#jezze-description{
  padding: 1vw;
  margin:2.5vw;
  margin-top: 10vh;
  background-color:yellow;
  background-color: rgba(255,255,100,.8);
}
#maridesc{
  margin:1vw;
  width:55%;
  overflow: auto;
}
#mariportrait{
  width:45%;
}
#metadata{
  background-color: purple;
  padding: 1vw;
  margin:2.5vw;
  width: 60%;
  overflow: auto;
}
#music{
  background-color: purple;
  padding: 1vw;
  width: 60%;
  margin:2.5vw;
  margin-left: auto;
  margin-right: 2.5vw;
  overflow: auto;
  
}