body {
  margin: 0;
  height: 100vh;
  background-image: url('../Images/Bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  user-select: none;
  scrollbar-width: auto;
  scrollbar-color: rgba(65, 99, 160, 0.9) transparent;
}

:root {
  --Accent: #4163A0;
}

#SystemBg {
  display: none;
}

@font-face {
  font-family: Mamelon;
  src: url("../Fonts/Mamelon-3.5-Hi-Regular.otf");
}

* {
  font-family: Mamelon;
}

#TopBar {
  width: 64vw;
  height: 4vh;
  position: fixed;
  top: 8vh;
  left: 18vw;
}

#MainBar {
  width: 64vw;
  height: 4vh;
  position: fixed;
  top: 12vh;
  left: 18vw;
  z-index: 10;
}

#SubBar {
  width: 64vw;
  height: 4vh;
  position: fixed;
  top: 16vh;
  left: 18vw;
}

.Button {
  height: 80%;
  font-size: 0.8vw;
  color: black;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 1vh;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.Button:hover {
  opacity: 0.9;
}

.Button.Category {
  width: 24%;
  position: absolute;
}

.Button.Line {
  width: 50%;
  position: absolute;
  left: 25%;
}

.Button.SubtitleToggle {
  width: 6%;
  position: absolute;
  left: 76%;
}
  
.Button.PlayLineAgain {
  width: 8%;
  position: absolute;
  left: 83%;
}

.Button.PlayRandomLine {
  width: 8%;
  position: absolute;
  left: 92%;
}

.Button.ChangeBg {
  width: 8%;
  position: absolute;
  font-weight: bold;
}

.Button.PlayBGM {
  width: 6%;
  position: absolute;
  left: 76%;
}

.Button.StopBGM {
  width: 6%;
  position: absolute;
  left: 76%;
  top: 100%;
}

.Selected-button {
  opacity: 0.3;
}

.Options {
  position: absolute;
  top: 80%;
  border: 1px solid #ccc;
  border-radius: 1vh;
  background-color: white;
  opacity: 0;
  max-height: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: all 0.2s ease;
}

.Options.visible {
  opacity: 0.9;
  max-height: 60.8vh;
  visibility: visible;
}

.Options.Category {
  width: 24%;
  position: absolute;
}

.Options.Line {
  width: 50%;
  position: absolute;
  left: 25%;
}

.Option {
  padding: 1vh;
  font-size: 0.8vw;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.Option:hover {
  background-color: #F1F1F1;
}

.Selected-option {
  color: var(--Accent);
}

.Slider {
  appearance: none;
  width: 17%;
  height: 25%;
  position: absolute;
  right: 0%;
  background: white;
  border-radius: 1vh;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.Slider.Line {
  position: absolute;
  top: 20%;
}

.Slider.BGM {
  position: absolute;
  top: 120%;
}

.Slider:hover {
  opacity: 0.9;
}

.Slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 2vh;
  height: 2vh;
  background: var(--Accent);
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 50%;
}

.Slider::-moz-range-thumb {
  width: 2vh;
  height: 2vh;
  background: var(--Accent);
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 50%;
}

#BgTransition {
  background-color: black;
  position: fixed;
  height: 100vh;
  width: 100vw;
  z-index: -30;
  opacity: 0;
  transition: opacity 0.2s;
}

#BgTransition.visible {
  opacity: 1;
}

#CardLayer {
  width: 32vw;
  height: 60vh;
  position: fixed;
  top: 16vh;
  left: 34vw;
  z-index: -20;
}

#CardImage {
  object-fit: contain;
  height: 100%;
  width: 100%;
  transition: opacity 0.2s;
}

#CardImage.hidden {
  opacity: 0;
}

#BGMTitleBox {
  height: 80%;
  position: absolute;
  top: 10%;
  left: 83%;
  font-size: 0.8vw;
  text-align: left;
  color: var(--Accent);
  opacity: 0.5;
  transition: opacity 0.3s;
  text-shadow: 
  -1px -1px 0 #000,  
   1px -1px 0 #000,
  -1px  1px 0 #000,
   1px  1px 0 #000;
}

#BGMTitleBox:hover {
  opacity: 1;
}

#SubtitleLayer {
  width: 52vw;
  height: 16vh;
  text-align: center;
  position: fixed;
  top: 77vh;
  left: 24vw;
  z-index: -10;
}

#SubtitleBox {
  font-size: 1.2vw;
  color: white;
  text-shadow: 
  -1px -1px 0 #000,  
   1px -1px 0 #000,
  -1px  1px 0 #000,
   1px  1px 0 #000;
}