/* fonts */

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

@font-face {
  font-family: "Giko2";
  src: url(/fonts/giko2.ttf);
}

/* var */

/* text styling */

p {
  margin: 10px;
  font-size: 23px;
}

a {
  margin: 10px;
  text-decoration: none;
}

h1 {
  font-family: "Starborn";
  font-size: 80px;
  color: #58ddda;
}

h2,
h4 {
  margin: 10px;
}

/* body */

body {
  background: rgb(36, 36, 36);
  line-height: 25px;
  font-family: "Giko2";
  font-size: 25px;
  color: #1f1f1f;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  margin: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* main */

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

.layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  margin-top: 20px;
}

.homebtn {
  width: 90px;
  background: linear-gradient(90deg, #85fdf3, #4fcdcb);
  padding: 4px;
  border: 0.5px solid white;
  border-radius: 10px;
  position: absolute;

  font-size: 15px;
  color: #1f1f1f;
  text-align: center;
  transition: 0.2s ease;
}

.homebtn:hover {
  background: linear-gradient(90deg, #4fcdcb, #85fdf3);
  transform: translateY(-3px);
}

.title {
  width: 50%;
  margin: 20px;
  -webkit-text-stroke: 4px rgb(255, 255, 253);
  text-shadow: 0 0 20px #10fae7;
  text-align: center;
}

#info {
  width: 100%;
  padding: 15px;
  border-radius: 40px 10px;

  background: #0da4ac;
  box-shadow:
    inset #ffffffdc 0 3px 5px 0px,
    inset #202222 0 0 3px 1px;
  filter: drop-shadow(0 0 10px rgb(0, 255, 242))
    drop-shadow(0 0 6px rgb(0, 255, 242));
}

.main-box {
  width: 900px;
  padding: 15px;
}

.divider {
  width: 15em;
  height: 2px;
  background: black;
  margin: 10px 0;
}

/* popouts & sidebar */

#sidebar {
  width: 300px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 20px;
  gap: 8px;
}

.song-btn {
  background: linear-gradient(90deg, #85fdf3, #4fcdcb);
  border: none;
  padding: 10px;
  text-align: left;
  font-family: "Giko2";
  font-size: 26px;
  transition: all 0.2s ease;
  transform: skewX(-10deg);
}

.song-btn:hover {
  transform: skewX(-10deg) translateX(10px);
  background: linear-gradient(90deg, #4fcdcb, #85fdf3);
}

.song-btn.active {
  background: #0da4ac;
}

.hidden {
  display: none;
}

#dokuzu {
  width: 100%;
  padding: 15px;
  border-radius: 40px 10px;

  background: rgb(106, 102, 157);
  box-shadow:
    inset #ffffff 0 3px 5px 0px,
    inset #121212 0 0 3px 1px;
  filter: drop-shadow(0 0 10px rgb(146, 138, 255))
    drop-shadow(0 0 6px rgb(146, 138, 255));
}

#mato {
  width: 100%;
  padding: 15px;
  border-radius: 40px 10px;

  background: rgb(162, 228, 96);
  box-shadow:
    inset #ffffff 0 3px 5px 0px,
    inset #121212 0 0 3px 1px;
  filter: drop-shadow(0 0 10px rgb(46, 251, 0))
    drop-shadow(0 0 6px rgb(46, 251, 0));
}

#patchwork {
  width: 100%;
  padding: 15px;
  border-radius: 40px 10px;

  background: rgb(255, 167, 214);
  box-shadow:
    inset #ffffff 0 3px 5px 0px,
    inset #121212 0 0 3px 1px;
  filter: drop-shadow(0 0 10px rgb(255, 111, 190))
    drop-shadow(0 0 6px rgb(255, 111, 190));
}

#spoken {
  width: 100%;
  padding: 15px;
  border-radius: 40px 10px;

  background: rgb(251, 113, 141);
  box-shadow:
    inset #ffffffdc 0 3px 5px 0px,
    inset #202222 0 0 3px 1px;
  filter: drop-shadow(0 0 10px rgb(255, 29, 82))
    drop-shadow(0 0 6px rgb(255, 29, 82));
}

#shoujo {
  width: 100%;
  padding: 15px;
  border-radius: 40px 10px;

  background: rgb(157, 244, 255);
  box-shadow:
    inset #ffffffdc 0 3px 5px 0px,
    inset #202222 0 0 3px 1px;
  filter: drop-shadow(0 0 10px rgb(0, 242, 255))
    drop-shadow(0 0 6px rgb(0, 242, 255));
}

#rabbit {
  width: 100%;
  padding: 15px;
  border-radius: 40px 10px;

  background: rgb(255, 122, 200);
  box-shadow:
    inset #ffffffdc 0 3px 5px 0px,
    inset #202222 0 0 3px 1px;
  filter: drop-shadow(0 0 10px rgb(255, 0, 140))
    drop-shadow(0 0 8px rgb(255, 0, 140));
}

#retry {
  width: 100%;
  padding: 15px;
  border-radius: 40px 10px;

  background: rgb(195, 130, 175);
  box-shadow:
    inset #ffffffdc 0 3px 5px 0px,
    inset #202222 0 0 3px 1px;
  filter: drop-shadow(0 0 10px rgb(249, 150, 255))
    drop-shadow(0 0 6px rgb(249, 150, 255));
}

/* responsive */