/* Fonts */

@font-face {
  font-family: Kurokaze;
  src: url(/assets/fonts/about_friend_v5_by_matthewtheprep_dcxxxbw.otf);
}

@font-face {
  font-family: "Daydream";
  src: url(/assets/fonts/DaydreamDEMO.otf);
}

@font-face {
  font-family: Miiverse;
  src: url(/assets/fonts/MiiverseSymbols-Regular.ttf);
}

/* General */

body {
  font-family: Arial;
  margin: 0;
}

i {
  font-family: Miiverse;
  font-style: normal;
}

/* Homepage */

/* Music */

.music-top {
  background: linear-gradient(to left, #f53193, #333 40%);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 3px solid rgba(255, 255, 255, 0.5);
  display: flex;
}

.music-top h1 {
  color: #f53193;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  margin: 0;
  font-family: Kurokaze;
  font-weight: normal;
  padding: 0px 10px;
}

.sub-body {
  width: fit-content;
  margin: 70px 30px;
}

.sub-body h1 {
  color: #b4e21a;
  margin: 0;
  font-family: Kurokaze;
  font-weight: normal;
  padding: 10px 20px;
  text-shadow: 4px 3px 1px #222
}

.ranks {
  width: 700px;
  min-height: 400px;
  background: #333;
  border-radius: 9px;
  transform: skew(-3deg);
}

.reviews {
  margin-top: 40px;
  width: 700px;
  min-height: 400px;
  border-radius: 9px;
  background: #333;
  transform: skew(-3deg)
}

.reviews, .ranks {
  box-shadow: 5px 7px #666;
  transition: all ease 0.3s;
}

.reviews:hover, .ranks:hover {
  scale: 1.05;
  margin: 20px;
}

.reviews input {
  background: #555;border: black;margin: 10px 20px;width: 650px;
  font-family: Kurokaze;
  color: rgba(255, 255, 255, 0.6)
}

.reviews input:focus {
  outline: 0;
}

/* Gallery */

.gallery-top {
  position: absolute;
  top: 0;
  width: 100%;
  height: 40px;
  background: url(/assets/gallery/elements/topbar-og.png);
  background-size: 100% 40px;
}

.gallery-top p {
  margin: 0;
  position: absolute;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0px 1px 4px;
  text-align: center;
  width: 100%;
  margin-top: 5px;
}

/* animations */

@keyframes musicbar {
  0% {filter: hue-rotate(-43deg);}
  50% {filter: hue-rotate(-103deg);}
  100% {filter: hue-rotate(-43deg);}
}