* {
     box-sizing: border-box;
 }

 body {
     background: linear-gradient(135deg, #FFB6C1 0%, #FFC0CB 25%, #E0BBE4 50%, #D4A5A5 75%, #FFB6C1 100%);
     background-size: 400% 400%;
     animation: gradient 15s ease infinite;
     background-image:
         repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, .3) 10px, rgba(255, 255, 255, .3) 20px),
         repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, .3) 10px, rgba(255, 255, 255, .3) 20px);
     min-height: 100vh;
     padding: 50px 0;
     font-family: 'Comic Neue', cursive;
 }

 .container {
     background: linear-gradient(135deg, #FFE4E1 0%, #FFF0F5 100%);
     padding: 35px;
     border-radius: 30px;
     border: 5px solid #FF69B4;
     box-shadow:
         0 0 20px rgba(255, 105, 180, 0.4),
         8px 8px 0px #FF1493,
         12px 12px 30px rgba(255, 20, 147, 0.3);
     max-width: 400px;
     transform: rotate(-1deg);
     position: relative;
 }



 .container::before {
     content: '✨';
     position: absolute;
     top: 10px;
     right: 10px;
     font-size: 24px;
     animation: sparkle 1.5s ease-in-out infinite;
 }

 .container::after {
     content: '💖';
     position: absolute;
     bottom: 10px;
     left: 10px;
     font-size: 24px;
     animation: pulse 2s ease-in-out infinite;
 }

 @keyframes sparkle {

     0%,
     100% {
         opacity: 1;
         transform: scale(1);
     }

     50% {
         opacity: 0.5;
         transform: scale(1.2);
     }
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.1);
     }
 }

 h1 {
     color: #FF1493;
     margin-bottom: 30px;
     font-family: 'Permanent Marker', cursive;
     text-shadow:
         2px 2px 0px #FFB6C1,
         4px 4px 0px #FF69B4;
     transform: rotate(2deg);
     letter-spacing: 2px;
 }

 #display {
     width: 100%;
     height: 70px;
     font-size: 28px;
     text-align: right;
     padding: 10px 15px;
     margin-bottom: 25px;
     border: 4px solid #FF69B4;
     border-radius: 20px;
     background: linear-gradient(135deg, #FFF 0%, #FFF0F5 100%);
     box-shadow:
         inset 2px 2px 5px rgba(255, 105, 180, 0.2),
         0 0 15px rgba(255, 105, 180, 0.3),
         4px 4px 0px #FF69B4;
     font-family: 'Comic Neue', cursive;
     font-weight: bold;
     transform: rotate(1deg);
     color: #FF1493;
 }

 #display:focus {
     outline: none;
     transform: rotate(0deg);
     box-shadow:
         inset 2px 2px 5px rgba(255, 105, 180, 0.2),
         0 0 20px rgba(255, 105, 180, 0.5),
         4px 4px 0px #FF69B4;
 }

 .button {
     width: 70px;
     height: 60px;
     font-size: 24px;
     font-weight: bold;
     font-family: 'Permanent Marker', cursive;
     border: 4px solid #FF69B4 !important;
     border-radius: 20px;
     background: linear-gradient(135deg, #FFB6C1 0%, #FFC0CB 100%);
     color: #FF1493;
     box-shadow:
         0 0 10px rgba(255, 105, 180, 0.3),
         4px 4px 0px #FF69B4;
     transition: all 0.2s;
     cursor: pointer;
     position: relative;
 }

 .button:hover {
     background: linear-gradient(135deg, #FF69B4 0%, #FFB6C1 100%) !important;
     color: #FFF !important;
     transform: translate(2px, 2px) scale(1.05);
     box-shadow:
         0 0 15px rgba(255, 105, 180, 0.5),
         2px 2px 0px #FF69B4;
 }

 .button:active {
     transform: translate(4px, 4px) scale(0.98);
     box-shadow: 0px 0px 0px #FF69B4;
 }

 .button:nth-child(odd) {
     transform: rotate(-2deg);
 }

 .button:nth-child(even) {
     transform: rotate(1deg);
 }

 .button:hover:nth-child(odd),
 .button:hover:nth-child(even) {
     transform: rotate(0deg) translate(2px, 2px) scale(1.05);
 }

 /* Special button colors */
 .row:first-of-type .button {
     background: linear-gradient(135deg, #E0BBE4 0%, #D4A5A5 100%);
     color: #8B008B;
 }

 .row:first-of-type .button:hover {
     background: linear-gradient(135deg, #D4A5A5 0%, #C9A0DC 100%) !important;
     color: #FFF !important;
 }

 .button:last-child {
     background: linear-gradient(135deg, #98D8C8 0%, #B4E7CE 100%);
     color: #2F8B77;
 }

 .button:last-child:hover {
     background: linear-gradient(135deg, #7BC9B8 0%, #98D8C8 100%) !important;
     color: #FFF !important;
 }

 /* Hearts decoration */
 .text-center::after {
     content: '🧮 ⭐ 🧮 ⭐ 🧮';
     display: block;
     font-size: 20px;
     margin-top: -5px;
     letter-spacing: 8px;
     animation: shimmer 2s ease-in-out infinite;
 }

 @keyframes shimmer {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.6;
     }
 }

 /* Dark Mode Toggle Switch */
 .dark-mode-toggle {
     position: fixed;
     top: 20px;
     right: 20px;
     z-index: 1000;
 }

 .toggle-container {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .toggle-label {
     font-size: 24px;
     transition: all 0.3s ease;
 }

 .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: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 100%);
     transition: 0.4s;
     border-radius: 34px;
     border: 3px solid #FF1493;
     box-shadow: 0 0 10px rgba(255, 105, 180, 0.4);
 }

 .slider:before {
     position: absolute;
     content: "☀️";
     height: 26px;
     width: 26px;
     left: 4px;
     bottom: 4px;
     background-color: white;
     transition: 0.4s;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 14px;
 }

 input:checked+.slider {
     background: linear-gradient(135deg, #5A189A 0%, #7B2CBF 100%);
     border-color: #9D4EDD;
     box-shadow: 0 0 10px rgba(157, 78, 221, 0.6);
 }

 input:checked+.slider:before {
     transform: translateX(26px);
     content: "🌙";
 }

 .slider.round {
     border-radius: 34px;
 }

 .slider.round:before {
     border-radius: 50%;
 }

 /* Add smooth transitions */
 body,
 .container,
 #display,
 h1,
 .button {
     transition: all 0.4s ease-in-out;
 }