:root {
    --primary: #DB504A;
    --secondary: #FF6F59;
    --background-primary: #254441;
    --background-secondary: #43AA8B;
    --separator: #B2B09B;
    --text-light: #EEEEEE;
    --text-dark: #333333;

    --vh: 1vh;
    --vw: 1vw;
}
* {
    font-family: 'Luckiest Guy RUS-BEL-UKR', sans-serif;
}

body {
    margin: 0;
    background-color: var(--background-primary);
    display: flex;
    justify-content: center;
    align-items: center;
}

#root {
    margin: 0;
    padding: 0;
    height: 100svh;
    width: 100%;
    /*width: 100vw;*/
    /*min-height: 400px;*/
    /*min-width: 400px;*/
    display: flex;
    justify-content: center;
    align-items: center;
}


.appButton___yNsQC {
    position: relative;
    margin-top: 8px;
    width: 120px;
    height: 65px;
    border-radius: calc(2 * var(--vh, 1vh));

    cursor: pointer;
    transform-origin: bottom;
    user-select: none;
    box-shadow: 0 0.4vh 0 #00000020;
}

.appButton___yNsQC::before {
    transition: all 0.2s ease-in-out;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10%;
    background: #dddddd;
    border-radius: calc(2 * var(--vh, 1vh));
    z-index: 0;
    display: block;
    margin: 0;
}

.appButton___yNsQC:active {
    transform: scale(1.1, 0.9);
    transition-delay: 0s;
    transition-duration: 0.1s;
}

.appButton___yNsQC[disabled] {
        pointer-events: none;
        filter: contrast(0.5) saturate(0.5);
        opacity: 0.5;
}

.appButton___yNsQC span {
    font-size: 1.3em;
    position: relative;
    color: white;
    z-index: 1;
}

.shinyAppButton___kJeYI {
    --btn-bg-color: #5e5e5e;
    background: var(--btn-bg-color);
}

.shinyAppButton___kJeYI::before {
    --outer-color: #bfbfbf;
    --inner-color: #ececec;
    --start-p: 32%;
    --end-p: calc(var(--start-p) + 23%);
    bottom: 20%;
    background:
            linear-gradient(
                    65deg,
                    var(--outer-color) var(--start-p),
                        /*rgba(255, 63, 20, 0.5) var(--start-p),*/
                    var(--inner-color) var(--start-p),
                    var(--inner-color) var(--end-p),
                    var(--outer-color) var(--end-p)),
            var(--outer-color)

            no-repeat;
}

.container___PJ0x8 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: var(--background-secondary);
    border-radius: 15px;
    height: 740px;
    width: 350px;
    overflow: hidden;
}

.colsXrows___GwCt3 {
    padding-top: 20px;
    color: var(--text-light);
    filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 1));
}

.buttons___XmQL7 {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    padding: 16px;
}
.playButton___SJ50X {
    --btn-bg-color: #681300;
    --outer-color: #D72700;
    --inner-color: #FF3F147f;
}
.playButton___SJ50X::before {
    --outer-color: #D72700;
    --inner-color: #FF3F147f;
}

.playButtonSmall___mkPF8 {
    width: 80px
}

.container___PJ0x8 canvas {
    /*width: 100%;*/
    /*height: 100%;*/
}