body {
    margin: 0;
    font-family: Helvetica;
    height: 100vh;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: auto;
    grid-template-areas: 
    "header header header header"
    "main main win  sidebar"
    "main main win sidebar";
    background: url("https://images.pexels.com/photos/7594303/pexels-photo-7594303.jpeg?auto=compress&cs=tinysrgb&w=1000") no-repeat center fixed;
    background-size: cover;
}

main{
    grid-area:main;
    opacity: 0;
    margin: 0 -10px 0 45px;
}

img {
    width: 126px;
    height: 214px;
}

.nav-bar{
    grid-area: header;
    display: flex;
    flex-direction: row;
    color: black;
    height: 80px;
    background-color: rgb(61, 199, 146);
    justify-content:space-between;
    align-items: center;
}

h1{
    padding-left: 15px;
}

.nav-comp{
    font-size: 24px;
    align-self: left;
    justify-self: end;
    padding-right: 20px;
    color: #0b6dc4;
}
#title{
    color: black;
}
.show-win{
    grid-area: win;
    text-align: center;
    color: white;
    opacity: 0;
}

#dealer{
    grid-area: dealer;
    font-size: 20px;
}

#D-card-one{
    text-align: center;
}
#D-card-two{
    display: inline!important;
}
.added-card{
    text-align: right;
}
#you{
    grid-area: you;
    margin: 14px 0 4px 0;
    font-size: 20px;
}

#You-card-one{
    text-align:center;
}

#You-card-two{
    text-align: right;
}

#sidebar{
    grid-area: sidebar;
    display:flex;
    flex-direction: column;
    text-align: right;
    padding-right: 20px;
}

p{
    color: white;
}

button {
    opacity: 0;
    border: 2px solid rgb(130, 108, 108);
    margin-bottom: 5px!important;
}

.modal a.close-modal {
    border: none;
    position: absolute;
    top: 1px;
    right: 1px;
}

 .modal {
    display: block;
    position: relative;
    margin: 0 auto;
    margin-top: 50px;
    width: 250px;
    height: 250px;
    text-align: center;
    color: #fff;
    line-height: 1.25;
    text-decoration: none;
    text-indent: 0;
    background: grey;
    border: 2px solid #fff;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    -ms-border-radius: 2px;
    box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

#bet{
    opacity: 1;
}

.show{
    text-align: right;
    opacity: 0;
}

#enter-the-game{
    opacity: 1;
}

aside > p {
    font-size: 18px;
    color: rgb(254, 255, 255);
}

#amount-bet{
    color: rgb(255, 5, 5);
}