body {
    background-color: #1E2836;
    font-family: "Trebuchet MS";
}

#bigbox {
    height: 85vh;
    width: 90%;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: #0F1728;
    box-shadow: -2px 10px 25px -7px rgba(0,0,0,0.45);
}

#sidebar {
    background-color: #334155;
    width: 30%;
    height: 100%;
    padding: 1%;
    text-align: center;
}

#mode-toggle {
    width: 90%;
    aspect-ratio: 130 / 20;
    border-radius: 999px;
    border: 0;
    background-color: #0F1728;
    left: 50%;
    transform: translate(5%,0%);
    color: white;

    display: grid;
    grid-template-columns: 1fr 1fr;
    
    cursor: pointer;
}

#mode-toggle p {
    top: 50%;
    z-index: 5000;
    font-family:"Trebuchet MS";
    font-size: large;
}

#mode-toggle div {
    top: 50%;
    position: fixed;
    height: 90%;
    width: 50%;
    background-color: #334155;
    border-radius: 999px;
    transform: translate(3%,-50%);
    transition: all 300ms ease;
}

#mode-toggle.active div {
    transform: translate(97%, -50%);
}

#mode-toggle:disabled {
    opacity: 50%;
}

#money-counter {
    width: 10%;
    aspect-ratio: 137 / 40;
    background-color: #0F1728;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 5%);
    color: white;
    
    display: grid;
    text-align: center;
    grid-template-columns: 2% 1fr;
    padding-left: 1%;
}

#game {
    left: 31%;
    width: 70%;
    height: 100%;
    top: 0%;
    position: fixed;
    background-color: #0F1728;
}

#bet-info div {
    width: 80%;
    height: 5vh;
    border-radius: 10px;
    border: solid #303944;
    border-width: medium;
    background-color: #0F172A;
    margin-top: 10%;
    padding-left: 5%;
    padding-right: 5%;
    transform: translate(5%);
    transition: all 300ms ease;
}

#bet-info div:focus-within {
    border: solid #64758B;  
    border-width: medium;
}

#bet-info div span {
    color: rgb(84, 84, 84);
    top: 100%;
    left: 10%;
    transform: translate(-130%,-150%);
    position: absolute;
}

#bet-info div p {
    position: absolute;
    transform: translate(0%,-220%);
    color: white;
    font-weight: 900;
}

#drop-ball {
    width: 90%;
    height: 7.5vh;
    border-radius: 10px;
    border: none;
    background-color: #22C55D;
    margin-top: 10%;
    font-size: medium;
    font-weight: 900;
    transition: 300ms ease;
}

#drop-ball {
    content: "Drop Ball";
}

#drop-ball:hover {
    transition: 300ms ease;
    background-color: #29e16d;
}

#drop-ball:active {
    transition: 100ms ease;
    background-color: #20b456;
}

#drop-ball.auto-bet {
    background-color: #FACC14;
}

#bet-amount {
    width: 80%;
    height: 100%;
    color: white;
    background-color: transparent;
    font-size: large;
    border: none;
    outline: none;
}

.bet-option {
    width: 100%;
    height: 100%;
    color: white;
    background-color: transparent;
    font-size: large;
    border: none;
    outline: none;
}

#bet-rate-container {
    visibility: hidden;
}