html {
    height: 100%;
    width: 100%;
    background-color: #000;/* rgb(11, 73, 11); */
    background-image: radial-gradient( rgb(11, 73, 11),  rgb(12, 90, 12), #000);
    background-size: cover;
}
body {
    /* background-image: radial-gradient( rgb(11, 73, 11),  rgb(12, 90, 12), #000);
    background-size: cover; */
    /* height: 600px; */
    /* width: 800px; */
    margin: auto;
}
/* div {
    border-bottom: red 2px dashed;
    border-top: green 2px dashed;
} */

/******************************* GRID CONTAINER *******************************/
.grid-header { 
    grid-area: header; 
    text-align: center;
    padding: 0 10%;
}
.grid-left {
    grid-area: left;
    width: 100%;

}
.grid-main {
    grid-area: main;
}
.grid-right {
    grid-area: right;
    top: 0;
    position: relative;
}
.grid-footer {
    grid-area: footer;
}
.grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: 10vw 80vw 10vw;
    grid-auto-rows: auto;
    justify-items: stretch;
    align-items: center;
  grid-template-areas:
    'header header header'
    'left main right'
    'footer footer footer';
     grid-gap: 0;
}

/*------------------------------ GRID CONTAINER ------------------------------*/
/*******************************    HANDS   *******************************/
#player-hand, #dealer-hand {
    height: 100px;
    width: auto;
    text-align: center;
}

/*------------------------------    HANDS   ------------------------------*/
/******************************* ALERT *******************************/
#alert {
    width: 100%;
    position: relative;
    transition-timing-function: ease;
    transition: transform 0.4s;
    -webkit-animation: slide 0.5s forwards;
    animation: slide 0.5s forwards;
}

#table-cover {
    position: absolute;
    height: 40px;
    z-index: 500000000000;
    width: 80vw;
    text-align: center;
}
/*------------------------------ ALERT ------------------------------*/
/******************************* DISPLAY WINDOW COUNTER *******************************/
.big-box {
    visibility: hidden;
    position: relative;
    right: 0;
    z-index: 100;
    border-radius: 5%;
    border: none;
    box-shadow: 5px 5px 5px 0 #000;
}
.box {
    background-color: rgba(109, 10, 10, 0.9);
    position: relative;
    top: 0;
    z-index: 1;
    float: right;
    width: 4.2rem;
    height: 5rem;
}
#box-left {
    text-align: left;
    border-top-left-radius: 5%;
    border-bottom-left-radius: 5%;
    border-right: 0;
    border-left: 3px solid black;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
}
#box-right {
    text-align: right;
    border-top-right-radius: 5%;
    border-bottom-right-radius: 5%;
    border-left: 0;
    border-right: 3px solid black;
    border-top: 3px solid black;
    border-bottom: 3px solid black;
}
/*******************************    BUTTON ATTRIBUTES   *******************************/
.gray, .gold, .prompt {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 5px 6px;
    font-size: 20px;
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
    cursor: pointer;
    outline: none;
    color: #000;
    border-radius: 225px; 
    box-shadow: 0 5px 5px 0 #000;
}
.prompt {
    background-image: radial-gradient( rgb(253, 190, 44), rgb(78, 57, 6));
    background-color: rgb(19, 15, 7);
    border: 2px solid rgb(78, 57, 6);
}
.gray {
    background-image: radial-gradient( gray, darkgray , silver);
    border: 6px dashed black;
}
.gold {
    background-image: radial-gradient( rgb(253, 190, 44), rgb(78, 57, 6));
    background-color: rgb(253, 190, 44);
    border: 6px dashed rgb(78, 57, 6);
}
.double-scale {
    visibility: hidden;
    transform: scale(.5);
    float: right;
    position: relative;
    font-size: 36px;
    margin: 20px -18px 0 0;
}

.gold.double-scale:hover {
    transform: scale(.6)
}

.gold:hover {
    background-image: radial-gradient( rgb(109, 79, 8), rgb(253, 190, 44));
    background-color:rgb(190, 154, 59);
    transform: scale(1.1);
}  
.gold:active {
    background-color: rgb(253, 190, 44);
    box-shadow: 0 9px 10px 0 #000;
    transform: translateY(4px);
}
#button-holder {
    width: auto;
    text-align: center;
    box-align: center;
    margin-right: 2px;
    margin-left: 2px;
}
#start-button {
    position: absolute;
    z-index: 1000000;
    width: 264px;
    margin: 50px 100px;
    display: block;
}
#buy-button {
    visibility: hidden;
    position: absolute;
    z-index: 100000;
    width: 264px;
    margin: 50px 100px;
}



/*******************************    CONTENT   *******************************/
/* CONTENT */
h1 {
    position: sticky;
    top: 0;
    z-index: 50;
    font-size: 90px;
    text-align: center;
    font-family: 'Berkshire Swash', Georgia, 'Times New Roman', Times, serif;
    text-shadow: #000;
    margin: 6% 0 0 0;
    margin-block-start: 0.67em;
    margin-block-end: 0em;
}
h2 {
    display: block;
    font-size: 1.5em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
    margin-inline-start: 5px;
    margin-inline-end: 5px;
}
h3 {
    color: rgb(48, 0, 0);
    font-size: 60px;
    font-family: 'Berkshire Swash', Georgia, 'Times New Roman', Times, serif;
    text-shadow:  5px 2px 10px rgb(255, 215, 0, .6); 
    left: 0;
    right: 0;
    margin: auto;
    margin-block-start: 0;
    margin-block-end: 0;
}
h4 {
    color: rgb(48, 0, 0);
    font-size: 30px;
    font-family: 'Berkshire Swash', Georgia, 'Times New Roman', Times, serif;    
    display: block;
    margin-block-start: 34px;
    margin-block-end: 34px;
}
/*******************************    ANIMATION   *******************************/
.fade {
    text-align: center;
    -webkit-animation: fadein 5s; 
            animation: fadein 5s;
}
.fade2 {
    text-align: center;
    -webkit-animation: fadein 9s; 
            animation: fadein 9s;
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.transitOpen {
    transition: 5s;
    transition-timing-function: ease;
    position: inherti;
    z-index: 10;
}
.slide {
    position: relative;
    top: -500px;
    width: 100px;
    height: 100px;
    transition: transform 0.4s;
    -webkit-animation: slide 0.5s forwards;
    animation: slide 0.5s forwards;
}

@-webkit-keyframes slide {
    100% { top: 0; }
}
@keyframes slide {
    100% { top: 0; }
}


/*******************************    MEDIA QUERY   *******************************/
@media screen and (max-width: 600px) {
    body {
        width: 100vw;
    }
    .grid-container {
        width: 100vw;
        display: grid;
        grid-template-columns: 100vw;
        grid-auto-rows: auto;
        justify-items: stretch;
        align-items: center;
      grid-template-areas:
        ' header '
        ' right '
        ' main '
        ' footer '
        ' left ';
         grid-gap: 0;
    }
    #sign {
        width: 100vw;
    }
    #dealerScore {
        text-align: center;
    }
    #sign {
        font-size: 16vw
    }
}