blackjackStyle.css

html{
    background-color: rgb(50, 50, 50);
    color: white;
    background-image: url("Background.png");
}
#header{
    border: 2px solid rgb(196, 0, 0);
    width: 1000px;
    height: 115px;
    margin: auto;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.65);
}
#headerText{
    font-size: 50pt;
}
#headerSubText{
    font-size: 12pt;
    letter-spacing: 2px;
}
#gameArea{
    margin: auto;
}
.highlightText{
    text-shadow: 0px 0px 3px rgb(253, 58, 255)
}
#playerInfo, #dealerInfo{
    text-shadow: 0px 0px 3px rgb(253, 58, 255);
    font-style: italic;
}
#rules{
    margin: auto;
    background-color: rgba(0, 0, 0, 0.65);
    width: 700px;
    padding: 10px;
    border: 1px solid red;
}
table{
    border-collapse: collapse;
    margin: auto;
    height: 500px;
    border: 1px solid rgb(196, 0, 0);
    background-color: rgba(0, 0, 0, 0.65);
}
#dealerArea{
    border-bottom: 3px solid lime;
}
#dealerArea > img{
    transform: rotate(180deg);
}
.col2{
    border-left: 2px solid lime;
}
#dealerArea, #playerArea{
    height: 250px;
    padding: 5px;
    margin: auto;
}
#dealerArea, #playerArea, #cardDeck{
    text-align: center;
}
.col1{
    width: 825px;
    padding: 5px;
}
.col2{
    width: 175px;
}
button{
    width: 100px;
    height: 50px;
}
#cardDeck{
    width: 200px;
    margin: auto;
}
img.playerCards, img.dealerCards{
    width: 150px;
    margin: 5px;
    box-shadow: 0px 0px 10px 1px rgb(253, 58, 255);
}
.buttons{
    color: white;
    border-radius: 20px;
    text-shadow: 0px 0px 3px rgb(253, 58, 255);
    border: 2px solid rgb(253, 58, 255);
    background: black;
}
.buttons:hover{
    cursor: pointer;
}

.modal{
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 200px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.3);
}
.modal-content{
    background-color: rgba(0, 0, 0, 0.75);
    margin: auto;
    padding: 20px;
    border: 2px solid red;
    width: 40%;
}
.close{
    color: red;
    float: right;
    font-size: 20px;
    font-weight: bold;
}
.close:hover, .close:focus{
    cursor: pointer;
    text-decoration: none;
}
#modalText{
    font-size: 15pt;
}