* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

body {
    background: #e3f9ff; /* Page background */
    overflow: hidden; /* Prevent scrollbars from emoji movement */
}

/* Container holds the calculator centered */
.container {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* Transparent so emojis behind are visible */
    position: relative;
    z-index: 2; /* Above emojis */
}

.calculator {
    background: #3a4452;
    padding: 20px;
    border-radius: 10px;
    z-index: 3;
}

.calculator form input {
    border: 0;
    outline: 0;
    width: 60px;
    height: 60px;
    border-radius: 10px;
    box-shadow: -8px -8px 15px rgba(255,255,255,0.1),
                5px 5px 15px rgba(0,0,0,0.2);
    background: transparent;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    margin: 10px;
}

form .display {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

form .display input {
    text-align: right;
    flex: 1;
    font-size: 45px;
    box-shadow: none;
}

form input.equal {
   width: 145px;
}

form input.operator {
    color: #33ffd8;
}

/* ========================= */
/* Animated emoji background */
/* ========================= */
.animated-emoji {
    position: absolute;
    font-size: 3rem;
    opacity: 0.6;
    user-select: none;
    pointer-events: none;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    z-index: 1; /* Behind calculator, above body background */
}

/* Emoji positions + animations */
.emoji1 { top: 5%; left: 5%; color: #FFD700; animation: float1 6s ease-in-out infinite; }
.emoji2 { top: 5%; left: 45%; color: #87CEEB; animation: float2 8s ease-in-out infinite; }
.emoji3 { top: 5%; left: 85%; color: #FF6347; animation: float3 7s ease-in-out infinite; }

.emoji4 { top: 30%; left: 15%; color: #32CD32; animation: float4 9s ease-in-out infinite; }
.emoji5 { top: 30%; left: 55%; color: #FF69B4; animation: float5 6.5s ease-in-out infinite; }
.emoji6 { top: 30%; left: 90%; color: #FFA500; animation: float6 8.5s ease-in-out infinite; }

.emoji7 { top: 60%; left: 8%;  color: #1E90FF; animation: float7 7.2s ease-in-out infinite; }
.emoji8 { top: 60%; left: 40%; color: #FF4500; animation: float8 8.7s ease-in-out infinite; }
.emoji9 { top: 60%; left: 78%; color: #7B68EE; animation: float9 7.8s ease-in-out infinite; }

.emoji10 { top: 85%; left: 20%; color: #DC143C; animation: float10 8.3s ease-in-out infinite; }
.emoji11 { top: 85%; left: 55%; color: #20B2AA; animation: float11 9.1s ease-in-out infinite; }
.emoji12 { top: 85%; left: 85%; color: #FF1493; animation: float12 7.5s ease-in-out infinite; }

.emoji13 { top: 10%; left: 15%; color: #FF4500; animation: float13 7s ease-in-out infinite; }
.emoji14 { top: 10%; left: 80%; color: #00CED1; animation: float14 8s ease-in-out infinite; }

.emoji15 { top: 35%; left: 5%; color: #FFD700; animation: float15 6.5s ease-in-out infinite; }
.emoji16 { top: 35%; left: 90%; color: #FF69B4; animation: float16 7.5s ease-in-out infinite; }

.emoji17 { top: 65%; left: 20%; color: #7CFC00; animation: float17 7.2s ease-in-out infinite; }
.emoji18 { top: 65%; left: 75%; color: #BA55D3; animation: float18 6.8s ease-in-out infinite; }

.emoji19 { top: 85%; left: 10%; color: #FF6347; animation: float19 8.3s ease-in-out infinite; }
.emoji20 { top: 85%; left: 85%; color: #1E90FF; animation: float20 7.9s ease-in-out infinite; }

/* ========================= */
/* Floating animations */
/* ========================= */
@keyframes float1 { 0% { transform: translate(0,0);} 100% { transform: translate(0,15px);} }
@keyframes float2 { 0% { transform: translate(0,0);} 100% { transform: translate(10px,-10px);} }
@keyframes float3 { 0% { transform: translate(0,0);} 100% { transform: translate(-15px,10px);} }
@keyframes float4 { 0% { transform: translate(0,0);} 100% { transform: translate(15px,15px);} }
@keyframes float5 { 0% { transform: translate(0,0);} 100% { transform: translate(-10px,-10px);} }
@keyframes float6 { 0% { transform: translate(0,0);} 100% { transform: translate(10px,10px);} }
@keyframes float7 { 0% { transform: translate(0,0);} 100% { transform: translate(-15px,-15px);} }
@keyframes float8 { 0% { transform: translate(0,0);} 100% { transform: translate(10px,-10px);} }
@keyframes float9 { 0% { transform: translate(0,0);} 100% { transform: translate(-15px,15px);} }
@keyframes float10 { 0% { transform: translate(0,0);} 100% { transform: translate(-10px,-10px);} }
@keyframes float11 { 0% { transform: translate(0,0);} 100% { transform: translate(15px,5px);} }
@keyframes float12 { 0% { transform: translate(0,0);} 100% { transform: translate(-10px,10px);} }
@keyframes float13 { 0% { transform: translate(0,0);} 100% { transform: translate(0,12px);} }
@keyframes float14 { 0% { transform: translate(0,0);} 100% { transform: translate(15px,-10px);} }
@keyframes float15 { 0% { transform: translate(0,0);} 100% { transform: translate(-12px,14px);} }
@keyframes float16 { 0% { transform: translate(0,0);} 100% { transform: translate(10px,-15px);} }
@keyframes float17 { 0% { transform: translate(0,0);} 100% { transform: translate(-10px,10px);} }
@keyframes float18 { 0% { transform: translate(0,0);} 100% { transform: translate(12px,-12px);} }
@keyframes float19 { 0% { transform: translate(0,0);} 100% { transform: translate(-15px,13px);} }
@keyframes float20 { 0% { transform: translate(0,0);} 100% { transform: translate(15px,-10px);} }