* {
    box-sizing: border-box;
}

body {
    background-color: #050816;
}

@keyframes twinkle_meow {
        0% { opacity: 1;
    }
    50% { opacity: 0.3;
    }
    100% { opacity: 1;
    }
    
    }

@keyframes bright_meow {
    0% { filter: brightness(0.5);
    }
    50% { filter: brightness(1);
    }
    100% { filter: brightness(2);
    }
}

@keyframes calculatorEnter {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.history {
    display: none;
}

.history.show {
    display: block;
}

.history-button {
    width: 100%;
    height: 45px;
    margin-top: 15px;
    background-color: #333333;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 18px;
}

.history {
    display: none;
    margin-top: 10px;
    padding: 10px;
    background-color: #111827;
    color: white;
    border-radius: 10px;
}

.history.show {
    display: block;
}

body::before{
    content: ""; 
    top: 0;
    left: 0;
    width: 3px;
    height: 3px;
    
    animation: twinkle_meow 4s infinite;
    position: absolute;
    box-shadow: 10px 20px 2px white,
100px 25px 2px white,
27px 2px 2px white,
50px 20px 2px white,
75px 500px 2px white,
270px 200px 2px white,
100px 750px 2px white,
98px 86px 2px white,
120px 240px 2px white,
190px 250px 2px white,
200px 750px 2px white,
100px 20px 2px white,
350px 100px 2px white,
450px 300px 2px white,
550px 150px 3px white,
650px 500px 2px white,
750px 250px 2px white,
850px 700px 2px white,
950px 100px 3px white,
1050px 400px 2px white,
1150px 650px 2px white,
1250px 200px 2px white,
1350px 550px 3px white,
1450px 350px 2px white,
1550px 750px 2px white,
1650px 150px 2px white,
1750px 500px 3px white,
1850px 300px 2px white;
z-index: 0;
}

body::after{
    content: ""; 
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    
    animation: bright_meow 4s infinite;
    position: absolute;
    box-shadow:
    180px 80px 4px white,
    420px 180px 5px #dbeafe,
    700px 100px 4px white,
    950px 300px 6px #dbeafe,
    1200px 150px 4px white,
    1450px 450px 5px #dbeafe,
    1650px 200px 4px white,
    1800px 650px 6px white;
    z-index: 0;
}

.shooting-star {
    position: fixed;
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px 3px white;
    animation: shooting 8s infinite;
}

@keyframes shooting {
    0% {
        transform: translate(-100px, -100px);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }
    25%{opacity: 1; transform: translate(700px, 500px);
    }

    50% {
        opacity: 0;
    }

    100% {
        transform: translate(700px, 500px);
        opacity: 0;
    }
}
.calculator{
    width: 320px;
    padding: 20px;
    border-radius: 15px;
    margin: 50px auto;
    background-color: #222222;
    position: relative;
    z-index: 1;
    animation: calculatorEnter 1s ease-out;
}

.display{
    width: 100%;
    height: 70px ;
    background-color: #333333;
    color: white;
    font-size: 32px;
    text-align: right;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

button{
    height: 60px;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.operator{
    background-color: #ff9500;
    color: #eeeeee;
}

.equals{
    grid-column: span 2;
    background-color: #34c759;
    color: white;
}

button:hover {
    filter: brightness(1.2);
}