:root {
    --width-scale: min(700px, 80vw, 80vh);
    --height-scale: calc(var(--width-scale) * 0.714);
    --game-title-size: min(calc(var(--height-scale) * 0.1), 2em);
    --title-margin-bottom: calc(var(--height-scale) * 0.25);
}


#craps-game {
    background-image: url('./images/Vegas.jpg');
    color: wheat;
    background-position: center top;
    padding: 1px;
}


.craps-game-title {
    font-size: var(--game-title-size);
    text-align: center;
    margin-top: calc(calc(100vh - var(--game-title-size) - var(--title-margin-bottom) - var(--height-scale)) / 2);
    margin-bottom: var(--title-margin-bottom);
}

.craps-game-container {
    width: var(--width-scale);
    height: var(--height-scale);
    border: solid white 2px;
    margin: 0 auto;
    background-image: url('./images/CrapsTable.png');
    background-size: cover;
    background-position: center top;
    position: relative;

}

#craps-registration-pane {
    margin-top: calc(var(--height-scale) * 0.15);
    font-size: calc(var(--game-title-size) * 0.5);
    text-align: center;
}

.craps-registration-input {
    background: none;
    border: none;
    border-bottom: solid white 1px;
    margin: calc(var(--height-scale) * 0.055) 0;
    color: white;
    font-size: calc(var(--game-title-size) * 0.5);
    text-align: center;
    
}

.craps-registration-input:focus {
    outline-width: 0;
}

.craps-registration-continue:hover {
    cursor: pointer;
    font-weight: bold;
}

#craps-main-section {
    display: none;
    height: 100%;
}

.craps-main-section-stats {
    text-align: center;
    font-size: calc(var(--height-scale) * 0.05);
    margin-top: calc(var(--height-scale) * 0.02);
}

#craps-stats-money-container {
    font-size: calc(var(--height-scale) * 0.08);
    margin-top: calc(var(--height-scale) * 0.1);
}

.craps-on-table-container {
    margin-top: calc(var(--height-scale) * 0.28);
    font-size: calc(var(--height-scale) * 0.03);
    text-align: center;
}



.craps-round-manager {
    position: absolute;
    bottom: calc(var(--height-scale) * 0.02);
    width: 100%;
    text-align: center;
    font-size: calc(var(--height-scale) * 0.04);
}

.craps-roll-dice-container {
    width: fit-content;
    margin: 0 auto;
}

.craps-roll-dice-container:hover {
    cursor: pointer;
    transform: scale(1.3);
}

#craps-roll-dice-animation-container {
    margin-top: calc(var(--height-scale) * -0.16);
    margin-left: calc(var(--height-scale) * -0.13);
}

.craps-betting-grid {
    display: grid;
    grid-template-columns: 33% auto 33%;
    width: 80%;
    margin: 0 auto;
    border: solid white 2px;
    border-radius: 5px;
}

.craps-bet-button, .craps-round-finish-button {
    padding: calc(var(--height-scale) * 0.02);
}

.craps-bet-button:hover, .craps-round-finish-button:hover {
    cursor: pointer;
    font-weight: bold;
}

.craps-bet-amount-container {
    padding: calc(var(--height-scale) * 0.02);
    background-color: rgba(0, 0, 0, 0.5);
    border-left: solid white 2px;
    border-right: solid white 2px;
}

#craps-user-bet-amount {
    margin: 0 calc(var(--height-scale) * 0.02);
}

.craps-user-bet-amount-change:hover {
    cursor: pointer;
    font-weight: bolder;
}

.craps-round-finish-grid {
    display: grid;
    grid-template-columns: 33% auto 33%;
    width: 80%;
    margin: 0 auto;
    border: solid white 2px;
    border-radius: 5px;
}

#craps-round-finish-message {
    padding: calc(var(--height-scale) * 0.02);
    background-color: rgba(0, 0, 0, 0.5);
    border-left: solid white 2px;
    border-right: solid white 2px;
}