body {


    background-color: #000000;
    padding: 0px;
    margin: 0px;
    font-family: 'Roboto', sans-serif;
    color: aliceblue;
    font-size: 16px;
    }
    
    
    #gradient {
          width: 100%;
          min-height: 100vh;
          padding: 0px;
          margin: 0px;
      text-align: center;
          align-items: center;
          justify-content: center;
        }
    
    
        #grid {
          width: 312px;
          height: 312px;
          align-items: center;
          justify-content: center;
          text-align: center;
        
    
        }
        #box {
          width: 312px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
        position: absolute;
        }
    
        .score-display {
    
          text-align: center;
        
        }
    
        h1 {
          width: 312px;
          text-align: center;
          opacity: 0.5;
        }
    
        h6 {
          font-size: 16px;
          padding: 10px;
          opacity: 0.5;
        }
    
        @keyframes beat {
        0% { transform: scale(1); }
        50% { transform: scale(1.01); }
        100% { transform: scale(1); }
    }
    
    .beat {
        display: inline-block;
        animation: beat 2s infinite;
    }
    
        /* Style the toggle switch handle */
        .toggle-handle {
          position: absolute;
          top: 2px;
          left: 2px;
          width: 26px;
          height: 26px;
          background-color: #fff;
          border-radius: 50%;
          transition: transform 0.3s ease;
        }
    
            /* Hide the default checkbox */
            .toggle-checkbox {
          display: none;
        }
    
        /* Style the toggle switch label */
        .toggle-label {
          display: inline-block;
          cursor: pointer;
          width: 60px;
          height: 30px;
          background-color: #ccc;
          border-radius: 15px;
          position: relative;
        }
    
        
        .switch {
          position: relative;
          display: inline-block;
          width: 60px;
          height: 34px;
        }
    
        .switch input {
          opacity: 0;
          width: 0;
          height: 0;
        }
    
        .slider {
          position: absolute;
          cursor: pointer;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: #0a0a0a;
          transition: 0.4s;
          border-radius: 34px;
        }
    
        
        .slider:before {
          position: absolute;
          content: "";
          height: 26px;
          width: 26px;
          left: 4px;
          bottom: 4px;
          background-color: white;
          transition: 0.4s;
          border-radius: 50%;
        }
    
        input:checked+.slider {
          background-color: #03bf0f;
        }
    
        input:checked+.slider:before {
          transform: translateX(26px);
        }