:root {
    --primary: #29394e;
    --primary-tr: #29394ed2;
    --bar-height: 70px;
    --title-size: 150%;
}

@media screen and (max-width: 600px) {
    :root {
        --title-size: 130%;
    }
}

body {
    display: flex;
    justify-content: center;
    align-items: end;
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: 'Trebuchet MS', sans-serif;
    color: white;
    background-color: var(--primary);
    background-size: cover;
    background-position: bottom right;
    background-image: url('/app/res/bg.jpg');
}

::-moz-selection {
    color: var(--primary);
    background: #fff7;
}

::selection {
    color: var(--primary);
    background: #fff7;
}

* {
    outline: none;
    user-select: none;
}

img {
    pointer-events: none;
}

main {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    position: relative;
    width: 100%;
    min-height: var(--bar-height);
    margin: 20px;
}

#mic {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--bar-height);
    border-radius: calc(var(--bar-height) / 2);
    background: var(--primary-tr);
}

@media screen and (max-width: 600px) {
    main {
        grid-template-columns: 1fr;
    }
    #mic {
        display: none;
    }
}

#bar {
    display: grid;
    grid-template-columns: auto 1fr;
    border-radius: calc(var(--bar-height) / 2);
    background: var(--primary-tr);
}

#control {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--bar-height);
}

#play,
#stop {
    cursor: pointer;
}

body:not(.stopped) #play,
body:not(.playing) #stop,
body:not(.wait) #wait {
    display: none;
}

#wait {
    animation: pulse-white 3s infinite;
}

@keyframes pulse-white {
    0% {
        transform: scale(0.8);
        opacity: .4;
    }

    70% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.8);
        opacity: .4;
    }
}

#info {
    position: relative;
    padding: 10px 0;
}

h1 {
    font-size: var(--title-size);
    margin: 0;
    opacity: .8;
}

#desc {
    font-size: 70%;
    margin: 0;
}

#time {
    font-size: 110%;
    position: absolute;
    bottom: 10px;
}

#desc,
#time {
    transition: opacity 1s ease-in-out;
}

body.intro #time,
body.wait #time,
body:not(.wait) #desc {
    opacity: 0;
}

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