*{
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     user-select: none;
}
@font-face {
     font-family: orange-kid;
     src: url(orange\ kid.otf);
}
body{
     background-color: black;
     color: white;
     font-family: orange-kid;
     font-size: xx-large;
     text-align: center;
}
.game{
     display: flex;
     justify-content: space-evenly;
}
.path{
     background-color: yellow;
     width: 400px;
     height: 60px;
     /* text-align: left; */
     display: flex;
     justify-content: space-evenly;
     margin: 20px;
     border: 5px solid yellow;
}
.bigSpace{
     background-color: green;
     width: 100px;
     height: 50px;
}
.gate1,
.gate2{
     background-color: red;
     width: 50px;
     height: 50px;
     border: 1px solid yellow;
}
/* .control{
     display: flex;
     justify-content: space-evenly; */
/* } */
.switch{
     background-color: black;
     color: white;
     border: 5px solid yellow;
     padding: 2px;
     width: 105px;
     margin: 20px;
     height: 60px;
}
button{
     background-color: green;
     color: black;
     border: none;
     margin-left: 5px;
     margin-right: 5px;
     padding: 5px;
     cursor: pointer;
     font-family: orange-kid;
}
.switch p{
     font-size: small;
     background-color: yellow;
     padding: 1px;
     color: black;
}

@media only screen and (max-width: 1068px) {
     .game{
          display: block;
          text-align: center;
     }
     .switch{
          width: auto;
     }
}