/* ======================================
   Specific Styles for Finn's Page
   ====================================== */

/* Load Custom Fonts */
@font-face {
    font-family: 'fisher price font';
    src: url('fisher price font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'starmap font';
    src: url('starmap.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hermes 3000 font';
    src: url('hermes 3000.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'november font';
    src: url('November.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ======================================
   General Styles
   ====================================== */

body {
    font-family: 'starmap font', Arial, sans-serif;
    background-color: #3f263a;
    margin: 0;
    padding: 0;
    background-image: url('texture2.png'); /* Subtle background texture */
    cursor: url('bejamin copy.png'), auto; /* Custom cursor */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ======================================
   Layout
   ====================================== */

.main-table {
    width: 100%;
    flex: 1; /* Allow the content to take up the available space */
    display: flex;
    justify-content: center; /* Centers content horizontally */
    border-spacing: 50;
}

.banner {
    font-family: 'november font', Arial, sans-serif;
    text-align: center;
    position: relative;
    color: #ff87bd;
}

.sidebar {
    position: fixed;  /* Keeps the index bar fixed as you scroll */
    right: 0;         /* Aligns the bar to the right side */
    top: 250px;       /* Adjust this to position the bar vertically */
    width: 120px;     /* Set the width of the index bar */
    max-height: 90%;  /* Set the maximum height relative to the viewport */
    overflow-y: auto; /* Adds a scrollbar if content overflows */
    background-color: #53445e;
    border-left: 3px dashed #6f6a8a;
    padding: 10px;
    z-index: 1000;    /* Ensures the sidebar is above other content */
    color: #b8b8e6;
    font-size: 15px
}

.content {
    flex: 1; /* Allow content to take up the remaining space */
    padding: 20px;
    text-align: left;
    margin: 0 220px; /* Creates the clear columns of space on both sides */
    max-width: 800px; /* Ensures content is not too wide */
    overflow: auto; /* Ensure content clears the float */
    color: #b8b8e6;
}

img {
    display: flex;
    margin: 20px auto;
    width: 90%;
    max-width: 100px;
    place-content: right;
}

/* ======================================
   Typography
   ====================================== */

/* Header Styles with Twinkling Effect */
h1 {
    font-family: 'november font', Arial, sans-serif;
    font-size: 5em;
    text-shadow: 2px 2px #ff0000;
    margin: 0;
    animation: sparkle 8s infinite; /* Apply the sparkling animation */
}

/* Sparkling Animation */
@keyframes sparkle {
    30%, 50% {
        opacity: ;
        text-shadow: 4px 0.3px #ff0000;
    }
    50% {
        opacity: 1;
        text-shadow: 4px 2px 5px #ff87bd, 0 0 8px #ff87bd; /* Adds a sparkling effect */
        color:#ffa6b9
    }
}

marquee {
    font-weight: bold;
    color: #ff0000;
    font-size: 2.2em;
    margin-top: 10px;
}

h2 {
    font-size: 1.5em;
    text-shadow: 2px 2px #382d6e;
    margin-top: 0;
    color: #b8b8e6;
}

ul {
    list-style-type: square;
    padding-left: 20px;
}

li {
    padding: 10px 0;
    font-size: 1.2em;
    text-shadow: 1px 1px #fff;
}

li a {
    text-decoration: none;
    color: #ff00ff;
}

li a:hover {
    text-decoration: underline;
    color: #00ff00;
}


/* ======================================
   Links
   ====================================== */

.home-link {
    position: fixed;
    bottom: 20px; /* Aligns link with the bottom of the page */
    left: 20px; /* Aligns link to the left side */
    font-size: 1em; /* Sets the font size for the link */
    color: #ff0000; /* Link color */
    text-decoration: none;
}

.home-link:hover {
    text-decoration: underline;
    color: #00ff00; /* Changes color on hover */
}

/* ======================================
   Animations
   ====================================== */

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

.blinking {
    animation: blink 1s infinite;
}