:root {
    --tao_black: #000;
    --tao_grey: #333;
    --tao_white: #F2F2F2;
    --tao_pink: #F70082;
    --tao_green: #00FFD4;
    --tao_yellow: #DFCEA9;
    --tao_darkpink: #3D0021;
}

* { padding: 0; margin: 0; border: none; box-sizing: border-box; }
h1, .lcd__number { font-family: 'teko', 'sans-serif'; }
img { display: block; }
body { font-family: 'rajdhani', 'sans-serif'; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: var(--tao_black);}
h1, .lcd__number { color: var(--tao_green); text-align: center; font-size: 49px; letter-spacing: 2px; line-height: 1;}
.container { position: relative; background-color: #000; width: 280px; border: 6px solid var(--tao_pink); border-radius: 4px; padding: 24px 24px 32px 24px; display: flex; align-items: center;}
.box { margin: 0 auto; max-width: 300px; width: 100%; }
.loading { position: absolute; background-color:#F7008290 ; color: #FFF; bottom: 0; right:0; height:100%; width: 100%; display: flex; align-items: center; justify-content: center; }
.loading img { width: 120px; height: 120px; }

.lcd__display { border: 6px solid var(--tao_pink); border-radius: 4px; margin-top: 24px;}
.lcd__number { color: var(--tao_white); font-size: 60px;  text-align: center; padding-top: 24px; display: flex; justify-content: center; }
.lcd__phase { color: var(--tao_white); font-size: 24px; text-align: center; }
.lcd__info { text-align: right; color: var(--tao_yellow); padding: 12px 12px 6px 12px; }

.sound-mode__icon { width: 32px; }
.sound-mode__icon svg { width: 100%; cursor: pointer; fill: var(--tao_grey); }
.sound-mode__icon svg .st0 { fill: var(--tao_grey); }
.sound-mode__icon svg.active .st0{ fill: var(--tao_white); }

.background__block { display: flex; justify-content: center; align-items: center; }
.background__block span { color: var(--tao_darkpink); padding: 25px 16px 24px; font-size: 21px;}
.background__block span.active { color: var(--tao_white); }
 .rain-text, .voice-text, .bowl-text { cursor: pointer; user-select: none; }

.controls__title, .speed__title { color: var(--tao_green); text-align: center; font-size: 16px; }
.controls__title { margin-top: 18px; }
.speed__title { margin-top: 24px; }
.controls__buttons, .speed__buttons { border-top: 2px solid var(--tao_pink); border-bottom: 2px solid var(--tao_pink); display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 10px; }
.controls__buttons-item { width: 28px;  margin: 16px; cursor: pointer; user-select: none; }
.controls__buttons-item.play { width: 30px; }
.controls__buttons-item.active { color: var(--tao_white) }

.speed__buttons-mode { text-align: center; color: var(--tao_white); padding: 10px 0; font-size: 30px; font-family: 'teko', sans-serif; }
.speed__buttons-item { white-space: nowrap; font-size: 10px; user-select: none; }
.speed__buttons-item.active { color: var(--tao_white); }
.speed__buttons-item.plus, .speed__buttons-item.minus { width: 60px; height: 60px; }
.speed__buttons-item.plus {  padding: 14px; cursor: pointer; } 
.speed__buttons-item.minus {  padding: 14px; cursor: pointer; }
.rain__block { font-size: 27px; text-align: center; margin-top: 24px; }
.rain__block span { color: var(--tao_darkpink); }
.rain__block span.active { color: var(--tao_white); }
.rain-text { cursor: pointer; }

@media (max-width: 768px) {
    .container { width: 100%; min-height: 100vh;}

}