body {  
    /* https://coolors.co/f06449-ede6e3-7d82b8-36382e-613f75 */  
    --background-color: #ede6e3;  
    --wall-color: #36382e;  
    --joystick-color: #210124;  
    --joystick-head-color: #f06449;  
    --ball-color: #f06449;  
    --end-color: #7d82b8;  
    --text-color: #210124;  
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;  
    background-color: var(--background-color);  
   }  
   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;  
   }  
   @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;  
    }  
   }