:root {
    font-family: 'Inter', sans-serif;
    background-color: black;
    color: white;
}

.elegant-heading {
    margin-top: 50;
    font-family: 'Instrument Serif', serif;
    font-weight: 400; /* This font usually looks best at its natural weight */
    font-size: 3rem;  /* It's a "display" font, so bigger is better! */
    text-align: center
}
.elegant-heading:hover {
    text-decoration: underline;
}

.body{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: .85rem;

    /* text-align: right; */

    max-width: 1500px;
    margin: 0 auto;
    /* This creates a 5% margin on the sides and 50px at the top/bottom */
    padding: 40px 20px;
    box-sizing: border-box; /* Crucial: makes sure padding doesn't cause horizontal scrolling */
}

.body-center{
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: .85rem;
    text-align: center;

    max-width: 900px;    /* Limits how wide the text gets (standard for readability) */
    margin: 0 auto;      /* The magic line: centers the box horizontally */
    padding: 40px 20px;
    box-sizing: border-box;
}

.body-emphasis {
    font-weight: bold;
}
.body-emphasis:hover {
    text-decoration: underline;


    color: transparent; 
    /* Fallback text color for browsers that don't support background-clip: text */
    -webkit-text-fill-color: transparent; 

    /* Define the gradient background that will "fill" the text */
    background: linear-gradient(to right, #762aa5, #d268fc); /* Example: red to blue */
    /* Clip the background to the text shape */
    background-clip: text;
    -webkit-background-clip: text;

    /* Set the initial background size to cover the entire text area */
    background-size: 0% 100%;
    /* Ensure the background does not repeat */
    background-repeat: no-repeat;
    
    /* Apply the animation */
    animation: color-fill 1.1s linear forwards;
}

@keyframes color-fill {
    0% {
        background-size: 0% 100%; /* Starts with 0% width of the background visible */
    }
    100% {
        background-size: 100% 100%; /* Ends with 100% width of the background visible */
    }
}



.tesseract-heading {
    color: #A161EA;
    font-family: 'Instrument Serif', serif;
    font-size: 3rem;

    font-weight: 400;
    text-align: center;

    max-width: 900px;    /* Limits how wide the text gets (standard for readability) */
    margin: 0 auto;      /* The magic line: centers the box horizontally */
    padding: 40px 20px;
    box-sizing: border-box;
}
.tesseract-heading:hover {
    text-decoration: underline;
    background: #2e2e2e;
}

.social-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 10px;
    font-size: 1rem;
    color: #fff;
    background-color: #5865F2; /* Discord blue */
    border: none;
    border-radius: 5px;
    text-decoration: none;
    text-align: center;

    display: block; 
    margin: auto;
    width: 45px;
}