style.css

*{
    user-select:none;
    --webkit-user-select:none;
}
body{
    margin:0;
    padding:0;
    background:orange;
}
.controls{
    display:block;
    align-items:center;
}
.controls button{
    border:none;
    outline:none;
    background:linear-gradient(to bottom,red,brown,green);
    color:white;
    border-radius:50%;
    height:4rem;
    width:4rem;
    font-size:1rem;
    margin:1%;
    align:center;
}
	#music{
		border-radius:1rem;
	}
	#up{border-radius:5rem 5rem 1rem 1rem;}
	#right{border-radius:1rem 5rem 5rem 1rem;}
	#down{border-radius:1rem 1rem 5rem 5rem;}
	#left{border-radius:5rem 1rem 1rem 5rem;}
.controls button:active{
    box-shadow:inset 0 5px 10px grey,0 2px 0px silver;
}
canvas{
    border:5px solid black;
    margin:0.1rem;
}
.container{
	display:block;
	position:fixed;
	height:100vh;
	width:100vw;
	color:white;
	overflow:hidden;
	padding:15rem 5rem;
	background:black;
	box-sizing:border-box;
	top:0;
	left:0;
	z-index:200;
	font-size:0.8rem;
	font-family:helvetica;
}
.container .preloader .loader,.loader2{
	display:inline-block;
	height:11vh;
	width:20vw;
    Border-radius:50%;
    Border-top:1px solid green;
    Transition:0.2s ease;
    animation:spin 2s ease infinite alternate-reverse;
	cursor:progress;
}
.loader2{height:7vh; width:15vw;}
@keyframes spin{
	from{}
	to{transform:scale(2);}
}

.desk-section{
    display:none;
}

@media (min-width: 768px) {
    .controls {
      display: none;
    }
    .controls-desk{
        display:flex;
        justify-content: space-between;
        position:relative;
        height: fit-content;
        width:fit-content;
        background:rgb(242, 160, 7);
        border-radius: 2rem;
        color:white;
        padding:1rem 1rem;
        margin: 1rem auto 0 0.5rem;; 
        font-size:1rem;
        font-family:helvetica;
        box-shadow: 0 0 0.5rem black;
    }
    .controls-desk button{
        border:none;
        outline:none;
        color:white;
        background-color: rgb(178, 116, 1);
        border-radius:1rem;
        height:4rem;
        font-size:1rem;
        margin:auto 1rem auto 0rem;
        padding:0.5rem 1rem;
        cursor:pointer;
        box-shadow:inset 0 0 0.3rem black;
    }
    .controls-desk button:is(:hover , :active,:focus){
        box-shadow:0 0 0.3rem black;
    }
    .desk-section{
        display:flex;
        justify-content:space-between;
        box-sizing:border-box;
    }
    .desk-section img{
        height:25vh;
        width:45vw;
        object-fit:contain;
        margin-top: -1rem;
    }
  }