style.css

/* 背景 / Background */
body {
  /* background: #c33c68;
  background-image: linear-gradient(
    0deg,
    #c33c68 0,
    #bf6096 30%,
    #266da2 60%,
    #76dddb 100%
  ); */
  background-attachment: fixed;
  background-size: 100vw 100vh;
}

canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
}

/* オーバーレイ / Overlay */
#overlay {
  user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #000;
  color: #fffc;
  z-index: 5;
  font-family: 'Wix MadeFor Text', 'Kosugi Maru', Verdana, sans-serif;
}
#overlay.disabled {
  animation: fade-out 2s ease-in-out forwards;
}
#overlay.ready {
  cursor: pointer;
}
@keyframes fade-out {
  0%   {opacity: 1;}
  100% {opacity: 0; display: none; visibility: hidden}
}
#overlay > p {
  width: 100vw;
  font-size: 40px;
  text-align: center;
  align-items: center;
}
#overlay > p > span {
  display: inline-block;
}

/* menu Overlay */
#popup-overlay {
  user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  background: #0006;
  z-index: 5;
}
#popup-overlay.disabled {
  display: none;
}
#popup-overlay > p {
  width: 100vw;
  height: 100vh;
}
#popup-overlay > p > span {
  display: inline-block;
}

#overlay-text {
  display: inline-block;
}

.lds-roller {
  display: inline-block;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, 0);
  width: 80px;
  height: 80px;
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 40px 40px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  margin: -4px 0 0 -4px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 63px;
  left: 63px;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 68px;
  left: 56px;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 71px;
  left: 48px;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 72px;
  left: 40px;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 71px;
  left: 32px;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 68px;
  left: 24px;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 63px;
  left: 17px;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 56px;
  left: 12px;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* フッターと音源 / Header and audio source */
#header,
#media {
  /* ページ左に固定 / Stick to the page left */
  position: fixed;
  left: 0;

  /* 背景色と文字色 / Background and text color */
  background: #000c;
  color: #fff;

  z-index: 1;
}

/* 再生ボタン / Play button */
#control {
  font-size: 21px;
  padding-left: 5px;
  padding-right: 5px;
  top: 0;
  border-right: 1px solid #fff9;
  display: inline-block;
}
#control.disabled {
  display: none;
}
#control a {
  color: rgb(99 208 226);
  text-decoration: none;
  display: inline-block;
  padding: 3px;
  font-size: 24px;
}
#control a.disabled {
  opacity: 0.3;
}
#control a:hover {
  color: rgb(233, 47, 47);
}

#settings {
  display: inline-block;
  padding: 9px 3px 3px 1px;
}
#settings a.disabled {
  opacity: 0.3;
}
#settings a:hover {
  color: rgb(233, 47, 47);
  cursor: pointer;
}

#settings a{
  color: rgb(99 208 226);
  text-decoration: none;
  display: inline-block;
  padding: 3px;
  font-size: 24px;
}

#musicButton {
  font-weight: 900;
}

/* アーティストと楽曲の情報 / Artist and song info */
#meta {
  padding-top: 9px;
  font-size: 11px;
  display: inline-block;
  font-family: 'Wix MadeFor Text', 'Kosugi Maru', Verdana, sans-serif;
}
#meta span {
  font-size: 11px;
}

/* 音源 / Audio source */
#media {
  /* 下寄せ / Bottom-aligned */
  bottom: 10px;
}
#media.disabled > .textalive-media-wrapper {
  width: 0;
  height: 0;
}

/**
 * ビート情報が取れるようになったらビートバーを表示
 * Show beat bar when beat information becomes available
 */
@keyframes activateBeatBar {
  0% {
    opacity: 0;
  }
  100% {
    width: 100%;
    opacity: 1;
  }
}

/**
 * ビート毎に右に広げてフェードアウト
 * Make beat bar span to the right and then fade out
 */
@keyframes showBeatBar {
  0% {
    width: 0;
    opacity: 1;
  }
  50% {
    width: 100%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

/**
 * 歌詞が下からせり出してくる
 * Make lyrics text appear from the bottom
 */
@keyframes showLyrics {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* ビートバー / Beat bar */
/* #bar {
  opacity: 0;
  height: 3px;
  background: rgb(255 222 193);
}
#bar.active {
  animation: activateBeatBar 0.3s;
}
#bar.beat {
  animation: showBeatBar 0.5s;
} */

/* 歌詞 / Lyrics */
#lyrics {
  z-index: 2;
  padding: 0 0 0 0;
  line-height: 2em;
  font-size: calc(max(100vw, 100vh) / 40);
  font-family: "Noto Sans JP", "DotGothic16", "Shippori Mincho B1", serif;
  color: #6ad4f2;
  text-shadow: 2px 2px 3px #157f9d;
  user-select: none;
  cursor: pointer;
  position: fixed;
  left: 15vw;
  top: 77%;
  max-width: 45vw;
  
  opacity: 1;
  /* 歌詞をちょっと回転させる / Rotate text */
  transform: rotateX(0deg) rotateY(0deg);

  /* no clicking allowed */
  pointer-events: none;
}
#text {
  z-index: 1;
}
#text > div {
  /* 文字ごとに改行しない / No line-break per char */
  display: inline-block;
  padding-right: 5px;
  /* 溢れた部分を隠す / Hide overflow content */
  /* overflow: hidden; */
  /* 高さ指定で文字をあえて溢れさす / Make text overflow with height specified */
  /* height: 45px; */
}
#text > div > div {
  animation: showLyrics 0.2s;
}

/**
 * 名詞などを強調表示する
 * Emphasize nouns
 */
#text .noun {
  color: #ddf9ff;
  font-size: calc(max(100vw, 100vh) / 40);
}

/**
 * フレーズ終わりで右にマージンを空けて読みやすくする
 * Add right margin to the last char in phrases
 */
#text .lastChar {
  margin-right: 40px;
}

#text .firstCharInEnglishWord {
  margin-left: 20px;
}

#text .lastCharInEnglishWord {
  margin-right: 20px;
}

#text .lastCharInEnglishWord + .firstCharInEnglishWord {
  margin-left: 0;
}

#seekbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: rgba(255 255 255 / 40%);
  z-index: 2;
}

#seekbar > div {
  width: 0;
  height: 100%;
  background: rgba(255 255 255 / 80%);
}

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  /*background-color: #333;*/
  color: #ddd;
  position: fixed;
  right: 0;
  left: 10px;
  z-index: 4;
  top: 0;
  height: 48px;
}

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  outline: inherit;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  z-index: 4;
}

/* Let mouse events pass through */
.topnav a.icon i {
  pointer-events: none;
}

.selection{
  padding: 20px;
  z-index: 4;
  padding: 14px 20px;
  background-color: rgb(99, 208, 226, 0.7);
  border-radius: 10px;
  white-space: nowrap;
  margin: 3px;
}

.selection:hover {
  background-color: rgba(99, 207, 226, 0.4);
}

.miku-image {
  pointer-events: none;
  position: fixed;
  left: 60vw;
  bottom: 12.5vh;
  height: 80vh;
  z-index: 3;
}

.braid-image {
  pointer-events: none;
  position: fixed;
  left: 62.7vw;
  bottom: 18vh;
  height: 70vh;
  z-index: 2;
}

.speaker-image {
  pointer-events: none;
  position: fixed;
  bottom: 8vh;
  left: 61vw;
  height: 20vh;
  z-index: 2;
}

.bottom-bar {
  pointer-events: none;
  position: fixed;
  bottom: 0;
  height: 24vh;
  width: 100vw;
  z-index: 1; 
}
.speaker-beat {
  -webkit-animation:zoom-in-out 0.15s ease-in-out infinite normal;
  -moz-animation:zoom-in-out 0.15s ease-in-out infinite normal;
  -ms-animation:zoom-in-out 0.15s ease-in-out infinite normal;
  animation:zoom-in-out 0.15s ease-in-out infinite normal;
}

/*@-webkit-keyframes zoom-in-out {*/
/*  0%{ -webkit-transform: scale(1); transform: scale(1); }*/
/*  25%{ -webkit-transform: scale(1.2); transform: scale(1.2); }*/
/*  50%{ -webkit-transform: scale(1); transform: scale(1); }*/
/*  100%{ -webkit-transform: scale(1); transform: scale(1); }*/

/*}*/

@keyframes zoom-in-out {
  0%{ -ms-transform: scale(1); transform: scale(1); }
  25%{ -ms-transform: scale(1.05); transform: scale(1.05); }
  100%{ -ms-transform: scale(1); transform: scale(1); }
  /*100%{ -ms-transform: scale(1); transform: scale(1); }*/
}

#media {
  z-index: 3;
}

.window-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}

/* The popup form - hidden by default */
.form-popup {
  margin: auto;
  padding: 20px;
  border-radius: 5px;
  border: 2px solid aqua;
  display: none;
  flex-direction: column;
  align-items: center;
  position: fixed;
  background-color: white;
  max-width: 800px;
  z-index: 9;
  font-family: 'Wix Madefor Text', 'Kosugi Maru', 'Lucida Sans', Verdana, sans-serif;
  font-weight: bold;
  color: #333;
}

.language-button {
  padding: 20px;
  z-index: 4;
  /* background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0.9); */
  padding: 14px 20px;
  background-color: rgb(99, 208, 226, 0.7);
  border-radius: 10px;
}

.language-button:hover {
  background-color: rgba(99, 207, 226, 0.4);
}

h1 {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid #dddddd;
}

/*hr {*/
/*  margin: 0;*/
/*  padding: 0;*/
/*  color: #dddddd;*/
/*  width: 100%;*/
/*}*/

.menu-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* align-items: center; */
  /* flex-direction: row; */
  padding: 0 10px 10px;
}

.item {
  text-align: center;
  width: 125px;
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px
}

.container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%
}

/* Add a red background color to the cancel button */
.cancel {
  padding: 10px;
  margin-top: 20px;
  width: 100%;
  background-color: rgba(36, 171, 195, 0.7);
  cursor: pointer;
  font-family: 'Wix Madefor Text', 'Lucida Sans', Verdana, sans-serif;
  font-weight: bold;
  color: #333;
  border: none;
  border-radius: 10px;
}

.cancel:hover {
  background-color: rgba(99, 207, 226, 0.4);
}

/* Slider stuff */
.slide {
  width: 100%;
}
.slider {
appearance: none;
width: 100%;
background: #d3d3d3;
outline: none;
border-radius: 5px;
opacity: 0.7;
-webkit-transition: 0.2s;
transition: .2s;
}
.slider:hover{
  opacity: 1;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #0494aa; /* Green background */
  cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #0494aa; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

/* Add some hover effects to buttons */
.btn:hover, .open-button:hover {
  opacity: 1;
}