body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(circle, #1e272e, #000000);
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
    perspective: 400px;
}

/* main container element, z-indexed to 1 to place infront of background particle effects, a large border radius to create a rounded effect, 
 and a 25degree rotation about the object's x-axis to initially make it appear as though it is lying backwards*/
.container {
    z-index: 1;
    position: relative;
    top: -50px;
    background: rgba(0, 0, 0, 0.85);
    padding: 40px;
    border-radius: 110px;
    box-shadow: 0px 0px 50px rgba(255, 255, 255, 0.7), 0 0 50px #6c5ce7, 0 0 100px #6c5ce7; /* Box shadow creates a blurred color gradient/shadow effect around the object*/
    text-align: center;
    max-width: 500px;
    width: 100%;
    transform: rotateY(0deg) rotateX(25deg);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

/* On hover, the main container is rotated back about the x-axis to 0 degrees, and pushed forward on the z-axis, creating illusion of it being flipped upwards */
.container:hover {
    transform: rotateY(0deg) rotateX(0deg) translateZ(50px);
    box-shadow: 0 0 80px rgba(255, 255, 255, 0.8), 0 0 100px #8e44ad, 0 0 200px #8e44ad;
}

/* h1 heading element invokes the neon glow flicker animation seen below 'easing' the shadow effect in and out of visability */
h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #ff9ff3, #48dbfb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: neon-glow 1.5s infinite alternate ease-in-out;
}


@keyframes neon-glow {
    0% {
        text-shadow: 0 0 20px #ff9ff3, 0 0 30px #ff9ff3, 0 0 40px #ff9ff3;
    }
    100% {
        text-shadow: 0 0 30px #48dbfb, 0 0 40px #48dbfb, 0 0 50px #48dbfb;
    }
}


label {
    font-size: 1.2rem;
    margin-bottom: 10px;
    display: block;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.7);
}

/* Input field with rounded border radius, blue border and centered input text. The blue border will will serve as the input's initial state 
when the user is not interacting with it. when the border is in 'focus', a gold border and pulse animation (seen below) will be put into affect */
input {
    padding: 10px;
    font-size: 1rem;
    border: 2px solid #3498db;
    border-radius: 10px;
    width: 100%;
    margin-bottom: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.7);
    transition: all 0.3s ease;
    text-align: center;
}

/* pulse animation applied at 1 second intervals when input field is being interacted with*/
input:focus {
    border-color: #f1c40f;
    outline: none;
    box-shadow: 0 0 30px rgba(243, 156, 18, 0.7), inset 0 0 20px rgba(0, 0, 0, 0.8);
    animation: pulse 1s infinite;
}

/* pulsing animation for input field */
@keyframes pulse {
    0% {
        box-shadow: 0 0 10px rgba(243, 156, 18, 0.7), inset 0 0 5px rgba(0, 0, 0, 0.8);
    }
    100% {
        box-shadow: 0 0 20px rgba(243, 156, 18, 0.9), inset 0 0 10px rgba(0, 0, 0, 0.8);
    }
}


button {
    padding: 12px 25px;
    font-size: 1.2rem;
    border-radius: 10px;
    background: linear-gradient(45deg, #ff6b6b, #ee5253);
    border: none;
    color: white;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0px 0px 15px #ff6b6b, 0px 0px 30px #ee5253;
    position: relative;
    overflow: hidden;
}


button:active::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    animation: ripple 1s ease-out;
    pointer-events: none;
}

/* Ripple animation increases the the size of the circular ripple as it decreases it opacity
creating a circular ripple when clicking the "Is It Prime?" button that grows outward and quickly disapates  */
@keyframes ripple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* the "Is it Prime?" button alters its color gradient and rotates slightly when hovering over it*/
button:hover {
    background: linear-gradient(45deg, #ee5253, #ff9f43);
    transform: rotateY(10deg) rotateX(5deg);
    box-shadow: 0 0 50px #ff9f43, 0 0 100px #ee5253;
}


p#prime_result {
    font-size: 1.5rem;
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.3);
    color: white;
    padding: 10px;
    border-radius: 8px;
    font-weight: bold;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4), 0 0 50px rgba(255, 255, 255, 0.7);
    animation: fadeIn 0.8s ease-in-out, pulse 1.5s infinite alternate;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Different output backgrounds and text colors for different calculation results. based on variable class name assigned in the JS file*/
p#prime_result.prime {
    background-color: #2ecc71;
    box-shadow: 0 0 60px #2ecc71, 0 0 80px #2ecc71;
}

p#prime_result.not-prime {
    background-color: #e74c3c;
    box-shadow: 0 0 60px #e74c3c, 0 0 80px #e74c3c;
}

p#prime_result.orange {
    background-color: #f39c12;
    box-shadow: 0 0 60px #f39c12, 0 0 80px #f39c12;
}

/* positioning for the particles effects, ensuring they're behind the other elements and covering the entire background  */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1; 
    background: radial-gradient(circle, #1e272e, #000000); 
}