body {
    font-family: 'Press Start 2P', cursive;
    background-image:url("../images/felt.png");
    image-rendering: auto;
    image-rendering: -moz-crisp-edges;
    image-rendering: pixelated;
    background-repeat: repeat;
    background-size: 100px 100px;
    margin:0;
    
    user-select: none;
}

a {
    text-decoration: inherit;
    color:inherit;
}

h1, h3 {
    text-align: center;
}

p {
    font-family: 'VT323', monospace;
    font-size: 24px;
}

#-controls {
    display: table;
    width: 80%;
    margin:auto;
    border-spacing: 10px;
    border-collapse: separate;
}

#controls {
    display:table;
    width:80%;
    position:absolute;
    bottom:3vh;
    left:50%;
    transform: translateX(-50%);
    border-spacing: 10px;
    border-collapse: separate;
}

.control {
    background-color:grey;
    display: table-cell;
    width:20%;
    padding:10px;
    text-align: center;
    border-style:solid;
    border-color:black;
    border-width: thick;
}

.control-active {
    background-color:deepskyblue;
    transition: background-color 0.1s;
}

.control-active:hover {
    cursor: pointer;
    background-color:dodgerblue;
}

#seperator {
    text-align: center;
    position:absolute;
    bottom:50%;
    width:100%;
}

#dealer {
    height:12vw;
}

#player {
    height:12vw;
}

.hand {
    width:100%;
    text-align: center;
}

.hand img {
    display:inline-block;
    position:relative;
    width:0px;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    padding:1vw;
    transition: opacity 0.2s, top 0.3s, width 0.1s;
    opacity:0%;
    top:1vw;
}

#end-screen {
    position:absolute;
    top:50vh;
    transform: translateY(-50%);
    width:100%;
    background-color:rgba(0, 0, 0, 0.7);
    align-content: center;
}

#vs {
    color:gainsboro;
}

#player-result, #dealer-result {
    text-shadow: 4px 4px black;
}

#result {
    font-size: 128px;
    color:red;
    text-shadow: 8px 8px black;
    margin-bottom: 200px;
}

#play-again {
    position: absolute;
    bottom:80px;
    width:25%;
    left:50%;
    transform:translateX(-50%);
}

#to-menu {
    position: absolute;
    bottom:20px;
    width:25%;
    left:50%;
    transform:translateX(-50%);
}

#title {
    text-align:left;
    font-size:5vh;
    margin:2vh;
    color:darkred;
    text-shadow: 2px 2px black;
}

.menu-screen {
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    width:100%;
}

.menu-button {
    display:block;
    margin:0 auto 20px auto;
    width:50%;
    font-size:42px;
    border-width: 10px;
}

#chips {
    margin-top:5vh;
    text-align: center;
}

.chip {
    display:inline-block;
    position:relative;
    width:6%;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    padding:1.5%;
    top:0;
    transition:top 0.1s;
}

#chips-labels {
    text-align: center;
}

.chip-label {
    display:inline-block;
    position:relative;
    width:6%;
    padding:1.5%;
}

.chip:hover {
    top:-1vh;
    cursor: pointer;
}

#player-half {
    width:100%;
    position:absolute;
    top:50vh;
}

#bet-screen {
    position:absolute;
    top:50%;
    width:100%;
    transform: translateY(-50%);
}

.bet-button {
    display:block;
    margin:10px auto 10px auto;
}

#bank {
    position:absolute;
    bottom: 10px;
    left:50%;
    transform: translateX(-50%);
    color:orange;
}

.about-screen {
    width:80%;
    padding-left:10%;
    padding-right: 10%;
    top:50%;
    transform: tranlateY(-50%);
}

.right-text h3 {
    padding-bottom: 0;
    display:inline;
}

.right-text p {
    margin-top:0;
    padding-top:0;
    font-family: 'VT323', monospace;
    font-size: 24px;
    display:inline;
    font-size-adjust: 24px;
}

.right-text .indented {
    display:inline-block;
    text-indent: 16px;
}

form {
    margin-top:30px;
    width:100%;
    height:20px;
}

input[type=image] {
    margin-left:50%;
    transform:translateX(-50%);
    width:150px;
}

#left-column {
    position:absolute;
    left:0;
    width:50%;
    height:80%;
    top:50%;
    transform: translateY(-50%);
}

#right-column {
    position:absolute;
    right:0;
    width:50%;
    height:80%;
    top:50%;
    transform: translateY(-50%);
}

#blackjack-image-container {
    margin-left:10%;
    width:80%;
    bottom:50%;
}

#blackjack-image {
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    width:80%;
    max-width:70vh;
    border-style:inset;
    border-color:black;
    border-width: 10px;
}

.column-buttons {
    width:80%;
    margin-left:10%;
    display:table;
    border-spacing: 10px;
    border-collapse: separate;
}

#left-column .column-buttons {
    position:absolute;
    bottom:0;
}

#left-text {
    margin:15px 12% 10px 12%;
    line-height:120%;
    text-indent: 16px;
    position:absolute;
    bottom:60px;
    
    user-select:text;
}

.right-text {
    height:95%;
    padding-right:10px;
    overflow:auto;
    width:90%;
    margin-left: 5%;
    
    user-select:text;
}

#rules-text {
    display:block;
}

#about-text {
    display:none;
}

#wall {
    position:absolute;
    height:80%;
    width:2px;
    top:10%;
    left:50%;
    transform: translateX(-50%);
    background-color:black;
}

#bet-screen p {
    margin:20px 20% 0 20%;
    text-indent: 16px;
}

#account-div {
    position:absolute;
    top:10px;
    right:10px;
}
















@media (max-width: 1049px) {
    #left-column {
        width:100%;
        height:600px;;
        position:absolute;
        left:0;
        top:150px;;
        transform: translateY(0);
    }
    
    #right-column {
        width:100%;
        height:inherit;
        margin-bottom:30px;
        position:absolute;
        right:0;
        top:800px;;
        transform: translateY(0);
    }
    
    #wall {
        height:2px;
        width:80%;
        top:775px;
        left:50%;
    }
    
    #title {
        text-align:center;
        font-size:36px;
        margin-top:70px;
    }
    
    .column-buttons {
        position:absolute;
        margin-left:0;
        left:50%;
        transform: translateX(-50%);
    }
    
    .right-text {
        margin-top:60px;
    }
    
    .menu-button {
        width:80%;
        font-size:24px;
    }
    
    #bet-text {
        display: none;
    }
    
    .bet-button {
        width:60%;
    }
    
    .chip-label {
        font-size:8px;
        padding:1%;
    }
    
    .chip {
        width:8%;
        padding:0;
    }
    
    #controls .control {
        font-size:10px;
    }
    
    #bank {
        position:fixed;
    }
}