html, body{
    height: auto;
    background: #0f0c29;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #24243e, #302b63, #0f0c29); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.container{
    margin: 2% auto;
    padding: 2%;
    width: 60%;
    border: 0.2rem solid #fff;
    box-shadow: 0 0 .2rem #fff,
                0 0 .2rem #fff,
                0 0 2rem #bc13fe,
                0 0 0.8rem #bc13fe,
                0 0 2.8rem #bc13fe,
                inset 0 0 1.3rem #bc13fe; 
}

h1{
    text-align: center;
    margin-bottom: 2%;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.7rem;
    font-size: 3rem;
    user-select: none;
    /* text-shadow: 0 0 7px #fff,
                0 0 10px #fff,
                0 0 21px #fff,
                0 0 42px #bc13fe,
                0 0 82px #bc13fe,
                0 0 92px #bc13fe,
                0 0 102px #bc13fe,
                0 0 151px #bc13fe; */
}

.playing-area{
    margin: 5% 10% 1% 10%;
    display: grid;
    grid-gap: 0.7em;
    grid-template-columns: repeat(4, minmax(3rem, 8rem));
    /* grid-auto-rows: auto; */
    /* grid-template-rows: repeat(4, minmax(50px, 150px)); */
    justify-content: center;
    align-content: center;
}

img{
    width: 100%;
    height: 100%;
}

img:hover{
    cursor: pointer;
}

p{
    text-align: center;
    margin: 2% auto;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 0.7rem;
    font-size: 3rem;
    font-weight: bolder;
    user-select: none;
    text-shadow: 0 0 7px #fff,
                0 0 10px #fff,
                0 0 21px #fff,
                0 0 42px #bc13fe,
                0 0 82px #bc13fe,
                0 0 92px #bc13fe,
                0 0 102px #bc13fe,
                0 0 151px #bc13fe;
}