html {
    font-family: "Montserrat", "Century Gothic", sans-serif;
    color: #FFF;
    background-color: #000;
    font-size: 10px;
}

#full-container { 
    background-color: #231C40;   
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
}

h1 {
    font-weight: 900;
    text-align: center;
    font-size: 5rem;
    margin-bottom: 1rem;
}

header h2 {
    font-weight: 600;
    color: #FFCF6F;
    text-align: center;
    font-size: 2.4rem;
}

#question, #dollar {
    width: 3rem;
    height: 3rem;
    top: 2rem;
    text-indent: -9999px;
    border: none;
    background-color: #231C40;
    background-size: contain;
    position: absolute;
    
}

#question {
    background-image: url(../images/question.png);
    right: 2rem;
    z-index: 100;
}

#dollar {
    background-image: url(../images/dollar.png);
    left: 2rem;
    z-index: 90;
}

#rules, #wagers  {
    background-color: #231C40;
    border: 1px solid #fff;
    border-radius: 15px;
    width: 90%;
    position: absolute;
    color: #FFF;
    font-size: 1.6rem;
    padding: 1.5rem 1rem;
    box-shadow: 0 0 20px #000;
    top: 8rem;
    line-height: 1.2;
    left: 50%;
    transform: translateX(-50%);
}

#rules { z-index: 95; }

#wagers { z-index: 85; }

#rules-title, #wagers-title {
    font-weight: 600;
    font-style: italic;
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 0.7rem;
    color: #FFCF6F;
} 

.rules-desc, .wagers-desc { margin-bottom: 1rem; }

.wagers-desc:last-of-type { margin-bottom: 2rem; }

#wagers ul { margin-top: 2rem; }

#wagers li {
    margin-bottom: 0.1rem;
    line-height: 1.3;
}

#wagers li:last-of-type { margin-bottom: 0; }

.gold { color: #ffbc2c; }

.bold { font-weight: 600; }

#stats {
    display: flex;
    flex-wrap: wrap;
    margin: 0 2rem;
}

#stats div { margin-bottom: 1rem; }

#bet, #bank, #wager-div, #profit {
    display: flex;
    flex-direction: column;
    width: 50%;
}

#wager-div { width: 58%; }

#profit { width: 42%; }

#bet p, #bank p, #wager-div p, #profit p {
    font-size: 1.6rem;
    color: #FFCF6F;
    font-weight: 600;
}

#bank, #profit { align-items: end; }

label { display: block; }

input, #bank #money, #profit #gain {
    background-color: transparent;
    border: none;
    color: white;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 2.6rem;
    width: 100%;
}

#money, #gain {
    text-align: end;
    line-height: 33.5px;
}

#dice {
    display: flex;
    justify-content: space-evenly;
    margin: 2rem;
}

#dDiv1, #dDiv2 {
    width: 125px;
    height: 125px;
    float: left;
    background-image: url(../images/diceSprite.png);
    text-indent: -9999px;
}

.value1 { background-position: 0 center; }

.value2 { background-position: -125px center; }

.value3 { background-position: -250px center; }

.value4 { background-position: -375px center; }

.value5 { background-position: -500px center; }

.value6 { background-position: -625px center; }

#userFeedback {
    font-size: 2.6rem;
    color: #FFCF6F;
    text-align: center;
    font-weight: 600;
    margin-bottom: 1rem;
}

#msg {
    font-size: 2rem;
    text-align: center;
    font-weight: 600;
}

#messages { margin: 0 2rem; }

#buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0 0;
}

.off { display: none; }

.on { display: block; }

#rollButton, #placeWagerButton, #replayButton {
    color: #FFF;
    background: #FFBC2C;
    background: linear-gradient(78deg, rgba(255, 188, 44, 1) 20%, rgba(255, 212, 120, 1) 80%);
    border-radius: 10px;
    padding: 1.5rem 4rem;
    border: 2px solid #FFDD77;
    text-align: center;
    text-shadow: 0 0 5px #ff9400;
    font-size: 2.4rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 2rem;
}

#placeWagerButton {
    background: #8D5CFF;
    background: linear-gradient(78deg, rgba(141, 92, 255, 1) 20%, rgba(199, 175, 255, 1) 80%);
    border: 2px solid #A077FF;
    text-align: center;
    text-shadow: 0 0 5px #802BFF;
    margin-bottom: 0;
}

#rollButton:hover, #replayButton:hover {
    background: linear-gradient(78deg, rgba(255, 212, 120, 1) 20%, rgba(255, 188, 44, 1) 80%);
}

#placeWagerButton:hover {
    background: #8D5CFF;
    background: linear-gradient(78deg, rgba(199, 175, 255, 1) 20%, rgba(141, 92, 255, 1) 80%);
}

.gameOver {
    background-color: #231C40;
    border: 1px solid #fff;
    border-radius: 15px;
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
    font-size: 1.5rem;
    padding: 2rem;
    box-shadow: 0 0 20px #000;
    /*display: block;*/
    z-index: 5;
}

.gameOver h2 {
    font-weight: 700;
    color: #FFCF6F;
    text-align: center;
    font-size: 4rem;
    margin: 1rem 0 2rem;
}

#items { 
    margin: 2rem 2rem 3rem;
    display: flex;
    flex-wrap: wrap;
    column-gap: 3rem;
    justify-content: space-between;
    row-gap: 1rem;
    
}

#items div {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

#items div p {
    line-height: 20px;
    font-size: 1.7rem;
    vertical-align: middle;
}

#items div img {
    width: 20px;
    height: 20px;
}

#u-wagered {
    font-weight: 600;
    font-size: 1.7rem;
    justify-self: center;
}

#action, #debt, #owed { text-align: center; }

#action {
    font-size: 2.3rem;
    color: #FFCF6F;
    font-weight: 600;
    margin-bottom: 1rem;
}

#debt, #owed {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

#replayButton {
    margin: 4rem 0 0;
    justify-self: center;
    padding: 1.5rem 8rem;
}

/*

               MEDIA QUERIES

*/

@media screen and (min-width: 423px) {
    
    #dollar {
        left:auto;
        right: 6rem;
    }
    
    #rules, #wagers  { padding: 2.5rem 2rem; }
    
    #stats { margin: 0 3rem; }
    
    #dice {
        justify-content: center;
        gap: 5rem;
    }

    #placeWagerButton, #replayButton { margin-bottom: 0; }
    
    #items {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 2rem;
    }
    
    #items div { justify-content: flex-start; }
    
    #action { margin-bottom: 2rem; }
    
}

@media screen and (min-width: 500px) {
    
    header { padding: 2rem 0 3rem; }
    
    h1 {
        font-size: 6rem;
        margin-bottom: 2rem;
    }
    
    header h2 { font-size: 2.5rem; }
    
    #rules {
       margin-bottom: 2rem;
       line-height: 1.4;
    }
    
    #wagers li { line-height: 1.4; }
    
    #rules-title, #wagers-title { margin-bottom: 1rem; }
    
    #stats div { margin-bottom: 2rem; }
    
    #stats { margin: 0 4rem; }
    
    #dice { margin: 3rem 2rem; }
    
    #userFeedback {
        font-size: 3rem;
        margin-bottom: 1.5rem;
    }
    
    #rollButton { margin-bottom: 0; }
    
    #rollButton, #placeWagerButton { padding: 1.5rem 1rem;}
    
    #buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        margin: 0 4rem 0;
        /*padding: 0;*/
        gap: 2rem;
    }
    
    #items div { margin-top: 0; }
    
    
}

@media screen and (min-width: 615px) {
    
    body {
        max-width: 650px;
        margin: 0 auto;
    }
    
    #full-container { height: 100vh; }
    
    
    #rules, #wagers, .gameOver { max-width: 580px; }
    
    #rules, #wagers { font-size: 1.7rem;}
    
    #rules-title, #wagers-title { font-size: 2.3rem; } 
    
    #messages { margin: 5rem 0 0; }
    
    #buttons {
        margin: 6rem 4rem 0;
        padding: 0;
    }  
    
    #bet, #bank { width: 20%; }
    
    #bank, #wager-div { align-items: center; }
    
    #profit { width: 15%; }
    
    #money, #wager-div label, #wager { text-align: center; }
    
    #wager-div { width: 45%; }
    
    #wagers-g div {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
    }
    
}