body{
    background-color: rgb(228, 228, 228);
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0px;
    color: white;
    font-family: 'Courier New', Courier, monospace;
    letter-spacing: 2px;
    color: black;
}
#title{
    color: black;
    font-weight: 600;
}
#score{
    font-weight: 600;
    padding: 10px;
    border: 2px solid black;
}

#score-p{
    position: relative;
}
#scor-span{
    content: '';
    position: absolute;
    width: 40px;
    height: 4px;
    background-color: rgb(228, 228, 228);
    top: 15px;
    left: 10px;
    animation: rainbow infinite 3s;
}
#scor-span-two{
    content: '';
    position: absolute;
    width: 4px;
    height: 10px;
    background-color: rgb(228, 228, 228);
    right: -1px;
    top: 20px;
    animation: rainbow-down infinite 3s;
}
#scor-span-three{
    content: '';
    position: absolute;
    width: 40px;
    height: 4px;
    background-color: rgb(228, 228, 228);
    right: 0px;
    bottom: 15px;
    animation: rainbow-bottom infinite 3s;
}
#scor-span-four{
    content: '';
    position: absolute;
    width: 4px;
    height: 10px;
    background-color: rgb(228, 228, 228);
    left: -1px;
    bottom:20px;
    animation: rainbow-left infinite 3s;
}
@keyframes rainbow {
    0%{transform: translateX(-60px);}
    100%{transform:translateX(170px);}
}
@keyframes rainbow-bottom {
    0%{transform: translateX(120px);}
    100%{transform: translateX(-190px);}
}
@keyframes rainbow-down {
    0%{transform: translateY(-30px);}
    100%{transform:translateY(40px);}
}
@keyframes rainbow-left {
    0%{transform: translateY(30px);}
    100%{transform: translateY(-40px);}
}
#p{
    display: flex;
    justify-content: center;
    align-items: center;
}
.zero{
    width: 100px;
    height: 100px;
    background-color: red;
    transition: 0.3s ease-out;
    position: relative;

}
.zero::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: -3px;
    top: -3px;
    background-color: transparent;
    transition: 0.1s ease-out;
    border: 0.1rem solid black;
}
.one{
    width: 100px;
    height: 100px;
    background-color: white;
    transition: 0.3s ease-out;
    position: relative;
}
.one::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: -3px;
    top: -3px;
    background-color: transparent;
    transition: 0.1s ease-out;
    border: 1px solid black;
}
#main{
    transition: 0.3s ease-out;
    width: 500px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.hide{
    background-color: orange;
    transform: rotateY(180deg);
    transition: 0.3s ease;
    position: relative;
    cursor: pointer;
}
.hide::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    left: 3px;
    top: -3px;
    background-color: transparent;
    transition: 0.1s ease-out;
    border: 1px solid black;
}
.hide:hover:after{
    top: -1px;
    left: -1px;
}

#button{
    background-color: transparent;
    border: 1px solid black;
    margin: 20px;
    padding: 10px;
    cursor:pointer;
    transition: 0.2s ease-out;
    position: relative;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 800;
    letter-spacing: 2px;
}
#button::after{
content: '';
z-index: -1;
width: 100%;
left: 5px;
top: 5px;
height: 100%;
background-color: orange;
position: absolute;
transition: 0.2s ease-out;
}
#button:hover:after{
    left: 0px;
    top: 0px;
}
#lvl-area{
    position: absolute;
    left: 20px;
    top: 10px;
}
#lvl{
    font-weight: 600;
    text-shadow:0.04em 0.04em 0em rgba(255,0,0),
    0.06em 0.06em 0em rgba(0,255,0),
    0.08em 0.08em 0em rgba(0,0,255);
    animation: glitch 1000ms infinite;
}
@keyframes glitch {
    0%{    text-shadow:0.04em 0.04em 0em rgba(255,0,0),
        0.06em 0.06em 0em rgba(0,255,0),
        0.08em 0.08em 0em rgba(0,0,255);}
    14%{text-shadow:-0.04em 0.04em 0em rgba(255,0,0),
        0.06em -0.04em 0em rgba(0,255,0),
        -0.02em -0.02em 0em rgba(0,0,255);}    
        15%{    text-shadow:0.04em 0.04em 0em rgba(255,0,0),
            0.06em 0.06em 0em rgba(0,255,0),
            0.08em 0.08em 0em rgba(0,0,255);}  
            49%{    text-shadow:0.04em -0.04em 0em rgba(255,0,0),
                -0.06em 0.06em 0em rgba(0,255,0),
                -0.08em -0.04em 0em rgba(0,0,255);}
                50%{    text-shadow:0.04em 0.04em 0em rgba(255,0,0),
                    0.06em 0.06em 0em rgba(0,255,0),
                    0.08em 0.08em 0em rgba(0,0,255);}
                    99%{    text-shadow:0.03em 0.08em 0em rgba(255,0,0),
                        0.01em 0.02em 0em rgba(0,255,0),
                        0.04em 0.04em 0em rgba(0,0,255);}
                        100%{    text-shadow:0.04em 0.04em 0em rgba(255,0,0),
                            0.06em 0.06em 0em rgba(0,255,0),
                            0.08em 0.08em 0em rgba(0,0,255);}
}

@media only screen and (max-width: 600px) {
    #main {
      width: 250px;
    }
    .one{
        width: 50px;
        height: 50px;
    }
    .zero{
        width: 50px;
        height: 50px;
    }
  }
  @media only screen and (max-width: 300px) {
    #main {
      width: 200px;
    }
    .one{
        width: 40px;
        height: 40px;
    }
    .zero{
        width: 40px;
        height: 40px;
    }
  }