body{
    font-family: Arial, Helvetica, sans-serif;
    background: #eee;
    color:#333;
    text-align: center;
    transition: background 0.3s ease, color 0.3s ease;
}

#buttons {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}


.light-mode{
    background: #eee;
    color:#333;
}


.dark-mode{
    background: #333;
    color:#eee;
}


.ugly-mode{
    background: #FFFF00;
    color: #FF0000;
    button{
        background: #66ff00;
    }
    p {
        color: #BF40BF;
    }
}



.tripping-balls{
  background:
    repeating-linear-gradient(0deg,   #ff0000 0 3px, #00ff00 3px 6px) 0 0 / 11px 11px no-repeat,
    repeating-linear-gradient(90deg,  #00ffff 0 3px, #ff00ff 3px 6px) 2px 2px / 13px 13px no-repeat,
    repeating-linear-gradient(45deg,  #ffff00 0 4px, #000000 4px 8px) 1px 0 / 17px 17px no-repeat,
    repeating-linear-gradient(-45deg, #ff6ec7 0 5px, #39ff14 5px 10px) 0 1px / 19px 19px no-repeat,

    repeating-radial-gradient(circle at 23% 37%,
      #ff00ff 0 7px, #00ffea 7px 14px, #ffff00 14px 21px, #ff0000 21px 28px),

    conic-gradient(from 15deg,
      #39ff14 0 40deg, #ff0000 40deg 80deg, #00ffff 80deg 150deg,
      #ffff00 150deg 210deg, #ff6ec7 210deg 300deg, #000 300deg 360deg);
  color: #00ff00;

  button {

    background:
      repeating-linear-gradient(135deg, #000 0 6px, #fff 6px 12px) 0 0 / 12px 12px no-repeat,
      linear-gradient(90deg, #ff00ff, #ffff00, #39ff14, #00ffff, #ff0000);
    color: #00ffff;
  }

  p {

    background:
      repeating-linear-gradient(0deg, #7a1f7a 0 10px, #ff0066 10px 20px) 0 0 / 21px 21px no-repeat,
      repeating-radial-gradient(circle at 60% 40%,
        #ffff00 0 6px, #00ff00 6px 12px, #ff00ff 12px 18px);
    color: #fffb00;
  }
}