index.css

body {  
  /* https://coolors.co/f06449-ede6e3-7d82b8-36382e-613f75 */  
  --background-color: #ede6e3;  
  --wall-color: #124352;  
  --joystick-color: #125244;  
  --joystick-head-color: #f06449;  
  --ball-color: #f06449;  
  --end-color: #232ea7;  
  --text-color: #210124;  
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;  
  background-image: linear-gradient(to left top, #d6d3c6, #d0d4c5, #c9d6c6, #c1d7c9, #b8d8cf);
 }  
 html,  
 body {  
  height: 100%;  
  margin: 0;  
 }  
 #center {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  height: 100%;  
 }  
 #game {  
  display: grid;  
  grid-template-columns: auto 150px;  
  grid-template-rows: 1fr auto 1fr;  
  gap: 30px;  
  perspective: 600px;  
 }  
 #maze {  
  position: relative;  
  grid-row: 1 / -1;  
  grid-column: 1;  
  width: 350px;  
  height: 315px;  
  display: flex;   
  justify-content: center;  
  align-items: center;  
 }  
 #end {  
  width: 65px;  
  height: 65px;  
  border: 5px dashed var(--end-color);  
  border-radius: 50%;  
 }  
 #joystick {  
  position: relative;  
  background-color: var(--joystick-color);  
  border-radius: 50%;  
  width: 50px;  
  height: 50px;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  margin: 10px 50px;  
  grid-row: 2;  
 }  
 #joystick-head {  
  position: relative;  
  background-color: var(--joystick-head-color);  
  border-radius: 50%;  
  width: 20px;  
  height: 20px;  
  cursor: grab;  
  animation-name: glow;  
  animation-duration: 0.6s;  
  animation-iteration-count: infinite;  
  animation-direction: alternate;  
  animation-timing-function: ease-in-out;  
  animation-delay: 4s;  
 }  
 @keyframes glow {  
  0% {  
   transform: scale(1);  
  }  
  100% {  
   transform: scale(1.2);  
  }  
 }  
 .joystick-arrow:nth-of-type(1) {  
  position: absolute;  
  bottom: 55px;  
  width: 0;  
  height: 0;  
  border-left: 10px solid transparent;  
  border-right: 10px solid transparent;  
  border-bottom: 10px solid var(--joystick-color);  
 }  
 .joystick-arrow:nth-of-type(2) {  
  position: absolute;  
  top: 55px;  
  width: 0;  
  height: 0;  
  border-left: 10px solid transparent;  
  border-right: 10px solid transparent;  
  border-top: 10px solid var(--joystick-color);  
 }  
 .joystick-arrow:nth-of-type(3) {  
  position: absolute;  
  left: 55px;  
  width: 0;  
  height: 0;  
  border-top: 10px solid transparent;  
  border-bottom: 10px solid transparent;  
  border-left: 10px solid var(--joystick-color);  
 }  
 .joystick-arrow:nth-of-type(4) {  
  position: absolute;  
  right: 55px;  
  width: 0;  
  height: 0;  
  border-top: 10px solid transparent;  
  border-bottom: 10px solid transparent;  
  border-right: 10px solid var(--joystick-color);  
 }  
 #note {  
  grid-row: 3;  
  grid-column: 2;  
  text-align: center;  
  font-size: 0.8em;  
  color: var(--text-color);  
  transition: opacity 2s;  
 }  
 a:visited {  
  color: inherit;  
 }  
 .ball {  
  position: absolute;  
  margin-top: -5px;  
  margin-left: -5px;  
  border-radius: 50%;  
  background-color: var(--ball-color);  
  width: 10px;  
  height: 10px;  
 }  
 .wall {  
  position: absolute;  
  background-color: var(--wall-color);  
  transform-origin: top center;  
  margin-left: -5px;  
 }  
 .wall::before,  
 .wall::after {  
  display: block;  
  content: "";  
  width: 10px;  
  height: 10px;  
  background-color: inherit;  
  border-radius: 50%;  
  position: absolute;  
 }  
 .wall::before {  
  top: -5px;  
 }  
 .wall::after {  
  bottom: -5px;  
 }  
 .black-hole {  
  position: absolute;  
  margin-top: -9px;  
  margin-left: -9px;  
  border-radius: 50%;  
  background-color: black;  
  width: 18px;  
  height: 18px;  
 }  
 #youtube,  
 #youtube-card {  
  display: none;  
 }  

 #title{
    justify-content: center;
    align-items: center;
    text-align: justify;
    margin-top: 2rem;    
    margin-bottom: -3rem;    
    display: flex;
    font-family: 'Times New Roman', Times, serif;
    color: #035f4b;
 }
 /***********************About**********************************/

.aboutdiv{    
    background: rgba(17, 17, 17, 0.815);   
    /* height: 8rem; */
}
#myportfolio:hover{
    color: rgb(108, 144, 245);
}

.copyright{
    text-align: center;
    color: rgba(218, 213, 213, 0.705);
    padding-top: 2rem;
    padding-bottom: 1rem;
}    

/*************************************************************/
 @media (min-height: 425px) {  
  /** Youtube logo by https://codepen.io/alvaromontoro */  
  #youtube {  
   z-index: 2;  
   display: block;  
   width: 100px;  
   height: 70px;  
   position: absolute;  
   bottom: 20px;  
   right: 20px;  
   background: red;  
   border-radius: 50% / 11%;  
   transform: scale(0.8);  
   transition: transform 0.5s;  
  }  
  #youtube:hover,  
  #youtube:focus {  
   transform: scale(0.9);  
  }  
  #youtube::before {  
   content: "";  
   display: block;  
   position: absolute;  
   top: 7.5%;  
   left: -6%;  
   width: 112%;  
   height: 85%;  
   background: red;  
   border-radius: 9% / 50%;  
  }  
  #youtube::after {  
   content: "";  
   display: block;  
   position: absolute;  
   top: 20px;  
   left: 40px;  
   width: 45px;  
   height: 30px;  
   border: 15px solid transparent;  
   box-sizing: border-box;  
   border-left: 30px solid white;  
  }  
  #youtube span {  
   font-size: 0;  
   position: absolute;  
   width: 0;  
   height: 0;  
   overflow: hidden;  
  }  
  #youtube:hover + #youtube-card {  
   display: block;  
   position: absolute;  
   bottom: 12px;  
   right: 10px;  
   padding: 25px 130px 25px 25px;  
   width: 300px;  
   background-color: white;  
  }   
 }  
 .btn{
     color: #210124;
     background-color: #f06449;
 }
 @media (max-width: 858px) {
      #center {  
    /* display: inline;  
    align-items: center;  
    justify-content: center;  
    height: 100%;   */

    /* display: flex;
    flex-direction: column;    
    width: 8vh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; */

    
    margin-bottom: 1px;
    font-size: 20px;  
    justify-content: center;
    align-items: center;
    text-align: justify; 
    margin: 0 auto;
    display: flex; 
   } 
   #game {      
    display: inline-block;     
    justify-content: center;
    align-items: center;
    text-align: justify; 
    /* margin: 0 auto; */
    margin-left: 1.5rem;
    perspective: 600px;  
   }  
   #joystick {      
    margin-top: 4rem;
    justify-content: center;
    align-items: center;
    text-align: justify; 
    margin: 4rem auto;
    /* margin: 10px 50px;   */
    grid-row: 2;  
   }  
   #center {  
    justify-content: center;
    align-items: center;
    text-align: justify; 
    margin: 0 auto;
    display: flex; 
   }  

   #title{   
    margin-top: 2rem;    
    margin-bottom: 1rem;   
 }
 }