body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
      Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
    margin: 0;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    touch-action: manipulation;
    height: 100vh;
  }

  #highscore {
    position: absolute;
    left: calc(-100px);
    Top: calc(-100px);
    width: 5px;
    display: 'none';
  }

  #right-slide {
    position: fixed;
    z-index: 50;
    right: 40px;
    top: 75px;
    top: max(75px, calc((100vh - 600px)/2));
    height: 600px;
    overflow: hidden;
    line-height: 1.5;

  }

  #leftad {
    position: fixed;
    z-index: 50;
    left: 5px;
    top: 75px;
    top: max(75px, calc((100vh - 600px)/2));
    height: 600px;
    overflow: hidden;
  }

  /* Ad Related Media Queries */
  @media screen and (min-width: 0px) and (max-width: 1000px) {
    #right-slide {
      display: none;
    }

    #leftad {
      display: none;
    }
  }

  @media screen and (min-width: 1001px) and (max-width: 1549px) {
    #right-slide {
      width: 160px;
    }

    #leftad {
      width: 160px;
    }
  }

  @media screen and (min-width: 1550px) {
    #right-slide {
      width: 300px;
    }

    #leftad {
      width: 300px;
    }
  }

  .panel {
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 15px;
    -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
    background-color: #16181c;
    color: #e7e9ea;
    padding: 15px;
  }

  .home {
    margin: 0 auto;
  }

  .active {
    background-color: rgba(0, 0, 0, .5);


  }

  #menu1 img {
    margin-left: 10px;


  }


  .gradient {

    background: linear-gradient(to right, #0072F5 -20%, #FF4ECD 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .cutething {
    color: white;
    z-index: 9999999;
    position: fixed;
  }



  .version {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: 15px;
    left: 25px;
    color: #f5deb3;
    display: flex;
    gap: 4px;
    font-size: 13px;
  }

  .version a {
    text-decoration: none;
    color: #f5deb3;
  }

  .version a:hover {
    color: #f5e8d0;
  }

  #menu1 li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .submenu {
    margin-bottom: 10px;
    display: inline-flex;
    width: 100%;
    align-items: center;
    justify-content: center;


  }


  .keyboard {
    text-align: center;
    bottom: 70px;
    position: fixed;
    display: none;
    margin: auto;
    width: 100%;

  }

  .keyboard button {
    margin-left: 5px;
    font-size: 2rem;
    padding: 1rem;
    background: #f4e7d1;
    border: 3px solid #231f20;
    opacity: 0.4;

  }

  .keyboard button:active {

    opacity: 1;

  }

  .settings {

    display: flex;
    flex-direction: row;
    position: absolute;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    color: white;
    gap: 5px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s linear, opacity 0.3s linear;
    
  }

  .settings .details {

    z-index: 999999;
    background-color: rgba(0, 0, 0, 0.7);
    width: 200px;
    padding: 20px;
    border-radius: 20px;
        -webkit-box-shadow: 0px 0px 20px 4px #000000; 
box-shadow: 0px 0px 20px 4px #000000;
  }

  .break {
    width: 100%;
  }

  .settings button {
    color: white;
    border: 1px solid #fff;
    background-color: #f231;
    padding: 8px;
    border-radius: 10px;
  }

  #settings-btn svg:hover {
    transform: rotate(90deg);
    transition-duration: 1s;
    fill: #f5deb3;
  }

  input[type=range],
  input[type=checkbox],
  button,
  #settings-btn,
  #fullscreen-btn {
    cursor: pointer;
  }

  .noti {
    /* defaults */
    background-color: #000;
    color: white;
  }

  .noti .notify-content .notify__title {
    color: white;
    font-size: 12px;
    animation: shake 0.5s;

    /* When the animation is finished, start again */
    animation-iteration-count: 3;
  }

  .noti .notify-content .notify__text {
    font-weight: bold;

    color: white;


  }

  .noti .notify-content .notify__text a {
    text-decoration: none;
    color: green;
    font-size: 15px;




  }

  @keyframes shake {
    0% {
      transform: translate(1px, 1px) rotate(0deg);
    }

    10% {
      transform: translate(-1px, -2px) rotate(-1deg);
    }

    20% {
      transform: translate(-3px, 0px) rotate(1deg);
    }

    30% {
      transform: translate(3px, 2px) rotate(0deg);
    }

    40% {
      transform: translate(1px, -1px) rotate(1deg);
    }

    50% {
      transform: translate(-1px, 2px) rotate(-1deg);
    }

    60% {
      transform: translate(-3px, 1px) rotate(0deg);
    }

    70% {
      transform: translate(3px, 1px) rotate(-1deg);
    }

    80% {
      transform: translate(-1px, -1px) rotate(1deg);
    }

    90% {
      transform: translate(1px, 2px) rotate(0deg);
    }

    100% {
      transform: translate(1px, -2px) rotate(-1deg);
    }
  }
@media only screen and (max-width: 600px){
      #settings-btn svg{
        width:35px;
        height:35px;
    }
  }