blackJ.css

*{
    margin: 0;
    padding: 0;
}
body{
background-image: url("./static/water.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: auto; 
}
html{
    font-size: 65%;
    /* 10px and default 1rem=16px */
}
ul,li{
    font-size: large;
    font-weight: bolder;
    color: rgb(168, 12, 12);
    text-shadow: 
    -1px -1px 0 black,  
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
    margin-top: 5rem;
}

.title{
    text-align: center;
    background: rgb(232,224,117);
    background: linear-gradient(0deg, rgba(232,224,117,1) 0%, rgba(1,1,1,1) 15%);
    color: gold;
    /* font-family: 'Lobster', cursive; */
    font-family: 'Pushster', cursive;
    /* font-family: 'Ubuntu', sans-serif; */
    padding: .5rem;
    font-size: 8rem;
    word-spacing: 2rem;
    letter-spacing: .3rem;
}



#command {
    font-family: 'Vujahday Script', cursive;
    font-weight: 800;
    font-size: 3.5rem;
    word-spacing: 1rem;
    animation: blinker 2s step-start infinite;
}
@keyframes blinker {
    25% {
      opacity: 0;
    }
}

.main{
  
    margin: auto;
    text-align: center;
}

.row1{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    padding: 1rem;
    border-bottom: black solid .1rem;
    height: 50rem;
}

.row1 ,.row2{
    background: url('./static/table.jpg') no-repeat center center/cover;
    width: auto;
    color:red;
    text-shadow: 
    -1px -1px 0 black,  
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

.row1 div{
    padding: 1rem;
    text-align: center;
    flex: 1;
}

.row1 h2{
    font-family: 'Lobster', cursive;
    font-size: 4rem;
}

#your-box{
    border-right: rgb(133, 15, 15) solid 1px;
}

#your-box img, #dealer-box img{
    height: 20rem;
    width: 13rem;
    padding: 1rem;
}

.row2{
    display: flex;
    justify-content: space-around;
    margin-bottom: 3rem;
}

.buttons{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    width: 55%;
}

.buttons button{
    font-size: 2.2rem;
    font-weight: 700;
    font-family: 'Lobster', cursive;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: .2rem;
    padding-bottom: .2rem;
    margin: 1.5rem;
}

.buttons button:hover{
    cursor: pointer;
    box-shadow: black 0px 0px 5px 2px;
}

.row3 h3{
    font-family: 'Teko', sans-serif;
    color:burlywood;
    text-shadow: 
    -1px -1px 0 black,  
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
    font-size: 4rem;
}

.row3{
    margin: auto;
}

table, th, td{
    padding: .5rem;
    border: solid 2px rgb(210, 8, 8);
    text-shadow: 
    -1px -1px 0 rgb(248, 215, 0),  
     1px -1px 0 rgb(255, 217, 0),
    -1px  1px 0 rgb(255, 242, 0),
     1px  1px 0 rgb(255, 242, 0);
    text-shadow: 
    -1px -1px 0 burlywood,
     1px -1px 0 burlywood,
    -1px  1px 0 burlywood,
     1px  1px 0 burlywood;
    font-size: 3rem;
    font-family: 'Teko', sans-serif;
    font-weight: 400;
    padding-left: 3rem;
    padding-right: 3rem;
}

table{
    margin: auto;
    margin-bottom: 5rem;
}

@media screen and (max-width:740px){
    html{
        font-size: 40%;
    }
}
@media screen and (max-width:420px){
    html{
        font-size: 30%;
    }
}