/*
@file style.css
@brief This style page is a CSS page that modifies the elements of our html.
It uses flex and absolute position to place items on the page
It also uses size modifiers to adjust the sizes to where we want them
@author Rachel Mount, Joe McCalmon, Liz Murphy, Matthew Sparacio
@date 12/6/19
 */

body {
    background-image: url('blackjackBackground.jpg');
}
/*
The below is the flex setup for the cards
 */
.dealerCards {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}
.dealerCards :nth-child(1) {order: 1;}
.dealerCards :nth-child(2) {order: 2;}
.dealerCards :nth-child(3) {order: 3;}
.dealerCards :nth-child(4) {order: 4;}
.dealerCards :nth-child(5) {order: 5;}


.playerCards {
    display: flex;
    justify-content: space-between;
    margin-top: 300px;
}
.playerCards :nth-child(1) {order: 1;}
.playerCards :nth-child(2) {order: 2;}
.playerCards :nth-child(3) {order: 3;}
.playerCards :nth-child(4) {order: 4;}
.playerCards :nth-child(5) {order: 5;}


.values {
    color: white;
}

.playerValue {
    position: absolute;
    top: 475px;
    left: 790px;
}

.dealerValue {
    position: absolute;
    top: 210px;
    left: 790px;
}

.playerMoney {
    position: absolute;
    top: 150px;
    left: 125px;
    font-size: 200%;

}

.dealerMoney {
    position: absolute;
    top: 100px;
    left: 125px;
    font-size: 200%;
}

.placeBets {
    position: absolute;
    top: 225px;
    left: 125px;
    font-size: 200%;
}

.bet {
    position: absolute;
    top: 300px;
    left: 125px;
    font-size: 200%;
}

.playGame {
    position: absolute;
    top: 350px;
    left: 800px;

}

.playerWin {
    position: absolute;
    top: 250px;
    left: 710px;
    display: none;
    color: white;
    font-size: 300%;
}

.dealerWin {
    position: absolute;
    top: 250px;
    left: 710px;
    display: none;
    color: white;
    font-size: 300%;
}

.chips img{
    height: 100px;
    width: 100px;
}
/*
Below are the betting chips, with a chip image, a hidden button placed on top,
and a text for how much each button is worth
 */
.blackChip img{
    position: absolute;
    top: 460px;
    left: 175px;
}

.blackButton {
    background-color: black;
    border: none;
    color: white;
    border-radius: 50%;
    padding: 50px 50px;
    position: absolute;
    top: 460px;
    left: 175px;
    visibility: hidden;
}

.blackP {
    color: white;
    position: absolute;
    top: 486px;
    left: 208px;
}

.blueChip img{
    position: absolute;
    top: 550px;
    left: 123px;
}

.blueButton {
    background-color: blue;
    border: none;
    color: white;
    border-radius: 50%;
    padding: 50px 50px;
    position: absolute;
    top: 550px;
    left: 123px;
    visibility: hidden;
}

.blueP {
    color: white;
    position: absolute;
    top: 576px;
    left: 156px;
}

.whiteChip img{
    position: absolute;
    top: 550px;
    left: 227px;
}

.whiteButton {
    background-color: white;
    border: none;
    color: white;
    border-radius: 50%;
    padding: 50px 50px;
    position: absolute;
    top: 550px;
    left: 227px;
    visibility: hidden;
}

.whiteP {
    color: navy;
    position: absolute;
    top: 576px;
    left: 264px;
}
/*
Rules setup, made to look like a sticky note. It's just a yellow text box
 */
.rules {
    position: absolute;
    top: 50px;
    margin-right: 100px;
    margin-left: 1200px;
    color: black;

    width: 400px;
    padding: 25px;
    background: #ffc;
}
/*
Play game button on top of a red chip. Same method as the betting chips
 */
.playGameB {
    background: url(cardImages/redChip.png);
    border: none;
    border-radius: 50%;
    background-size: 250px auto;
    width: 250px;
    height: 250px;
    color: white;
    position: absolute;
    left: -150px;
    top: -100px;
    font-size: 190%;
}

.playerWinGame {
    visibility: hidden;
    position: absolute;
    top: 250px;
    left: 600px;
    color: white;
    font-size: 300%;


}
.dealerWinGame {
    visibility: hidden;
    position: absolute;
    top: 250px;
    left: 600px;
    color: white;
    font-size: 300%;
}