body{
    background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(45,79,144,1) 4%, rgba(0,212,255,1) 100%);
}

:root {
    --blue: #00D4FF;
    --brown: #403F4C;
    --red: #E84855;
    --yellow: #F9DC5C;
    --pink: #EFBCD5;
  }

h1{
    color: var(--yellow);
    font-size: 80px;
    text-align: center;
    font-style: italic;
    margin: 10px;
}
.who-is-first{
    font-size: 25px;
    text-align: center;
    font-style: italic;
    color: #F9DC5C;
    margin: 5px;
}

.table-game{

    width: 100%;
    height: 400px;
    align-items: center;
    text-align: center;
    
}

.blank-box{
    height: 75px;
    width: 75px;
}

.vertical-line{
    width: 25px;
    height: 75px;
    background-color: #403F4C;
}

.horizontal-line{
    height: 25px;
    width: 75px;
    background-color: #403F4C;
}

.horizontal-short-line{
height: 25px;
width: 25px;
background-color: #403F4C;
}

.horizontal-long-line{
    height: 25px;
    width: 700px;
    background-color: #403F4C;
    }

.flexbox-gamegrid{
display: flex;
height: 80px;
width: 100%;
justify-content: space-between;

}

.xlarge-X{
    height:75px;
    width: 75px;
    background-color: #E84855;
    color: #403F4C;
    font-size: 65px;
    text-align: center;
    border-radius: 5px;
    line-height: 37.5px;
    
}

.large-X{
    height:75px;
    width: 75px;
    line-height: 37.5px;
    background-color: #E84855;
    color: #403F4C;
    font-size: 60px;
    text-align: center;
    border-radius: 5px;
    border-style: solid;
    border-width: 5px;
}

.med-X{
    height:75px;
    width: 75px;
    line-height: 37.5px;
    background-color: #E84855;
    color: #403F4C;
    font-size: 55px;
    text-align: center;
    border-radius: 5px;
    border-style: solid;
    border-width: 10px;
}

.small-X{
    height:75px;
    width: 75px;
    line-height: 37.5px;
    background-color: #E84855;
    color: #403F4C;
    font-size: 45px;
    text-align: center;
    border-radius: 5px;
    border-style: solid;
    border-width: 15px;
}

.xsmall-X{
    height:75px;
    width: 75px;
    line-height: 30px;
    background-color: #E84855;
    color: #403F4C;
    font-size: 28px;
    text-align: center;
    border-radius: 5px;
    border-style: solid;
    border-width: 20px;
}

.xlarge-O{
    height:75px;
    width: 75px;
    background-color:#403F4C;
    color:#E84855;
    font-size: 65px;
    text-align: center;
    border-radius: 5px;
    line-height: 37.5px;
    
}

.large-O{
    height:75px;
    width: 75px;
    line-height: 37.5px;
    background-color:#403F4C;
    color:#E84855;
    font-size: 60px;
    text-align: center;
    border-radius: 5px;
    border-style: solid;
    border-width: 5px;
}

.med-O{
    height:75px;
    width: 75px;
    line-height: 37.5px;
    background-color:#403F4C;
    color:#E84855;
    font-size: 55px;
    text-align: center;
    border-radius: 5px;
    border-style: solid;
    border-width: 10px;
}

.small-O{
    height:75px;
    width: 75px;
    line-height: 35px;
    background-color:#403F4C;
    color:#E84855;
    font-size: 45px;
    text-align: center;
    border-radius: 5px;
    border-style: solid;
    border-width: 15px;
}

.xsmall-O{
    height:75px;
    width: 75px;
    line-height: 30px;
    background-color:#403F4C;
    color:#E84855;
    font-size: 32px;
    text-align: center;
    border-radius: 5px;
    border-style: solid;
    border-width: 20px;
}

.test{
    height:75px;
    width: 75px;
    background-color: #E84855;
    color: #403F4C;
    font-size: 70px;
    text-align: center;
    border-radius: 5px;
}

.blanks{

    height: 75px;
    width: 75px;
    font-size: 70px;
    text-align: center;
    border-radius: 5px;
    background-color: #403F4C;
    opacity: 30%;
}