body{
    background-color: black;
    overflow: hidden;
}

div{
    font-size: 1.42em;
    font-family:"Courier New";
}

#title{
    color: white;
}

.center {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    margin-left: 10%;
    align-items: center;
    height: 4.1em;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    visibility: visible;
   
}

.top{
    display: flex;
    flex-wrap: nowrap;
    justify-content: left;
    margin-left: 5%;
    align-items: center;
    height: 5em;
    position: absolute;
    top: 10%;
    transform: translate(0%, -50%);
    zoom: 0.75;
    visibility: visible;
}

.button {
    transform: translate(0%, -9%);
    flex-grow: 0;
    flex-shrink: 0;
    margin-right: 1em;
    margin-top: 1em;
    color: white;
    width: 7em;
    height: 3em;
    font-family:"Courier New";
    background-color: black;
}

.linebreak {
    flex-basis: 100%;
}
  
 /* Mobile */
@media (max-aspect-ratio: 3/4) {
    #m1 {
        flex-grow: 0;
        flex-shrink: 0;
        display:flex;
        font-size: 3em;
        max-width:100%
    }

    #m2 {
        flex-direction: row; /* Stack items vertically */
        align-items: flex-start; /* Align items to the left */
        flex-wrap: wrap;
        max-width:100%
    }
    
    .button {
      width: 6em;
      height: 2.5em;
      font-family:"Courier New";
      background-color: black;
      font-size: 1.5em;
    }

    body{
        overflow-y: auto;
    }
}


#m1 {
    flex-grow: 0;
    flex-shrink: 0;
    display:flex;
}

#m2 {
    flex-grow: 0;
    flex-shrink: 0;
    display:flex;
}

#t1 {
    flex-grow: 0;
    flex-shrink: 0;
    display:flex;
    visibility: hidden;
    margin-right:100px;
}

#t2 {
    flex-grow: 0;
    flex-shrink: 0;
    display:flex;
    visibility: hidden;
}

#canvas {
    font-size: 1em;
    visibility: hidden;
    display:flex;
    position:absolute;
    margin-left:5%;
    top:40%;
    color:white;
}

#gameBoard {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(7, 1fr);
    gap: 1%;
    
}


.slidein{
    animation-fill-mode: forwards;
    animation-duration: 1.5s;
    animation-name: slidein;
    animation-iteration-count: 1;
}

.slidein2{
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 1.5s;
    animation-name: slidein2;
    animation-delay: 1s;
    visibility: hidden;
}

.slideout{
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-name: slideout;
    animation-delay: 0s;
}

.canslidein{
    animation-fill-mode: forwards;
    animation-duration: 2s;
    animation-name: canslidein;
    animation-iteration-count: 1;
}

.canslideout{
    animation-fill-mode: forwards;
    animation-duration: 2s;
    animation-name: canslideout;
    animation-iteration-count: 1;
}

.canupdate1{
    animation-fill-mode:none;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-name: canupdate;
    animation-iteration-count: 1;
}

.canupdate2{
    animation-fill-mode:forwards;
    animation-duration: 1s;
    animation-delay: 0s;
    animation-name: canupdate2;
    animation-iteration-count: 1;
}


@keyframes slidein {
    from {
        transform: translateX(-20vw);
        opacity: 0%;
    }
    to {
        visibility: visible;
        opacity: 100%;
    }
}
@keyframes slidein2 {
    from {
        transform: translateX(-20vw);
        opacity: 0%;
    }
    to {
        visibility: visible;
        opacity: 100%;
    }
}


@keyframes slideout {
    from {
    }
    to {
        transform: translateX(-80vw);
        opacity: 0%;
        visibility: visible;
    }
}

@keyframes canslidein {
    from {
        transform: translateX(80vw);
        opacity: 0%;
    }
    to {
        visibility: visible;
        opacity: 100%;
    }
}

@keyframes canslideout {
    from {
    }
    to {
        transform: translateX(50vw);
        visibility: visible;
        opacity: 0%;
    }
}

@keyframes canupdate {
    0% {
    }
    100% {
        transform: translateX(-50vw);
        visibility: visible;
        opacity: 0%;
    }
}

@keyframes canupdate2 {
    0% {
        transform: translateX(50vw);
        visibility: visible;
        opacity: 0%;
    }
    100% {
        visibility: visible;
        opacity: 100%;
    }
}