@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@900&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: "Courier New", monospace;
    background-color: #e7e2dd;
    color: #1e2a3a;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* ensure body takes full viewport height */
}

/* Add this section to create the centered infinite symbol in the background */
body::before {
    content: "∞";
    font-size: 2200px;
    opacity: 0.1;
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1); /* Initial scale of 1 */
    z-index: -1;
    color: rgba(255, 255, 255, 0.8); /* Set the color to opal with increased opacity */
    text-shadow: 0 0 40px rgba(255, 203, 164, 0.8); /* Opal glow */
    animation: scalePulse 4s infinite alternate, glow 1s infinite alternate; /* Combine animations */
}

@keyframes scalePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2); /* Scale up to 1.2 times */
    }
}

@keyframes glow {
    0% {
        text-shadow: 0 0 40px rgba(255, 203, 164, 0.8); /* Opal glow at the start */
    }
    100% {
        text-shadow: 0 0 100px rgb(170, 0, 0); /* Dark red glow at the end */
    }
}



header {
    text-align: center;
    padding: 20px 0;
}

@keyframes flicker {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }
  
  .logo {
    font-family: "Cinzel Decorative", cursive;
    font-size: 72px;
    font-weight: bold;
    letter-spacing: 5px;
    animation: flicker 3s infinite;
  }
  

  main {
    flex: 1; /* take available space */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 0; /* give some padding instead of margin */
}

/* Define the fade animation */
@keyframes fade {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* Apply the fade animation when the .fade-out class is added */
.content-box.fade-out {
    animation: fade 0.6s ease-out;
}

.content-box {
    background-color: #c1beb9;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    transition: box-shadow 0.3s; transform 0.6s ease-in-out, opacity 0.6s ease-in-out; 
    opacity: 1;
    width: 80%; /* use percentage width */
    max-width: 1000px; /* maximum width limit */
    margin: 0 auto; /* center the box */
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
    .content-box {
        width: 95%; /* Increase width for smaller screens */
        padding: 20px; /* reduce padding for smaller screens */
    }
}

/* Add a darker red glow effect on hover */
.content-box:hover {
    box-shadow: 0 10px 30px rgba(139, 0, 0, 0.6);
}

/* Updated styles for definitions */
.definition-title {
    font-size: 24px;
    font-weight: bold;
}

.definition-description {
    font-size: 18px;
    text-align: center;
    font-style: italic;
    margin-top: 10px;
    white-space: normal; /* Start with nowrap */
}

footer {
    text-align: center;
    padding: 20px 0; /* give some padding to footer */
}

.social-icons {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #1e2a3a5b; /* Adjusted text color */
    transition: color 0.3s; /* Add a transition for color change */
}

.icon {
    margin: 0 10px;
    color: #1e2a3a5b; /* Adjusted text color */
    text-decoration: none;
    transition: color 0.3s; /* Add a transition for color change */
}

/* Darken the color on hover */
.social-icons:hover,
.icon:hover {
    color: #122030; /* Darkened color on hover */
}


.email-box {
    background-color: #a9a6a1; /* Slightly darker email box color */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    text-align: center;
    margin-top: 80px; /* Adjusted margin */
    opacity: 0.3; /* Start with opacity 0 to make it invisible */
    transition: opacity 0.5s;
}

/* Apply the animation when hovering over the email box */
.email-box:hover {
    opacity: 1; /* Increase opacity when hovering */
}


.email-box h3 {
    font-family: 'Book Antiqua', serif; /* Use Book Antiqua font */
    font-size: 18px;
    color: #1e2a3a; /* Adjusted text color */
}