@media (max-width: 550px)  {
   .paletteball {
    width: 15px;
    height: 35px;
    border-top: 20px solid rgba(235, 235, 235, 0.842);
    margin-top: 310px;
    top: 110px;
    left: 50%;
    transform: translate(-50%, 50%);
    
}

.paletteball-toggle {
    transition: 0.3s;
    background-color: rgba(150, 150, 150, 0.842);
    border-top: 20px solid rgba(17, 17, 17, 0.842);
}

.unlock {
   
    align-items: center;
    justify-content: center;
    
    display: flex;
    font-size: 11px;
    top: 40%;

    
    
    
   
}

.unlock h1 {
    
    
    
    
    
    
   
}

.results {
    margin-top: 20px;
}

.heading-border {
    margin-top: -30px;
}

.main-heading h1 {
    margin-bottom: 10px;
}

.options-container {
    width: 100px;
    font-size: 18px;
   
  
}

.game-container {
    margin-top: -20px;
}

.ping-pong-container {
    width: 350px;
    height: 250px;
    top: 50px;
    margin-top: -460px;
}

.ping-pong-container .pingball {
    left: -255px;
}

.leftline {
    left: -243px;
}
.rightline {
  left: -30px;
}

.lineholder {
    top: 50px;
    margin-left: -70px;
}

.lineholder2 {
    top: 50px;
    margin-left: 70px;
    
} 

.mouth {
    top: 30px;
    width: 250px;
    left: 56%;
    transform: translate(-50%, 50%);
    height: 24px;
    transform-origin: top;
    transform: skew(0deg) translateX(-145px) rotate3d(0, 1, 0.5, 3.142rad);
    
    
}

.options-container {
    margin-top: 460px;
    font-size: 14px;
}

.options-divider {
    top: 546px;
}

.game-container {
    height: 10vh;
    /* background-color: red; */
}





.credits {
    margin-top: 65px;
    font-size: 12.5px;
    height: 30px;
}

.darklight-toggle {
    font-family: 'Resolve-light';
    display: block;
    /* background-color: rgb(0, 217, 255); */
    text-align: center;
    position: absolute;
    top: 480px;
    left: 50%;
    transform: translate(-50%, 50%);
    color: rgb(168, 167, 167);
    text-transform: uppercase;
    font-size: 15px;
}

.darklight-toggle span {
    color: rgb(10, 10, 10);
}

.start:active {
 transition: 0.1s;
 outline: none;
 opacity: 0.5;



}
.stop:active {
    transition: 0.1s;
    outline: none;
    opacity: 0.5;

}

@keyframes ballmove {
    0% {
        left: -255px;
          
    }
   10% {
       width: 12px;
   }

   11% {
    width: 15px;
}

    50% {
        
        left: -20px;
        background-color: rgb(0, 114, 207);
       
    }

  
    100% {
        left: -255px;
       
    }
}

@keyframes container {
    0% {
        top: 50px;
    }
    50% {
        top: 55px;
    }
    100% {
        top: 50px;
    }
}

}

@media (max-width: 360px) {
 .options-container {
     min-width: 90%;
 }
}

@media (orientation: landscape) {
    .results {
       margin-top: 50px;
    }

    .credits {
        margin-bottom: 30px;
    }
}