:root {
    /* --- Core Colors --- */
    --bgColor: rgb(15,40,100);
    --textColor: white;
    
    /* --- Link Colors --- */
    --linkColor: #87CEEB;       /* Sky Blue */
    --linkHover: #FFFFFF;       /* White */

    /* --- UI Colors --- */
    --headerGold: #FFD700;
    --borderBlue: #6495ED;
    --refBoxBg: rgba(0, 0, 0, 0.3); /* Transparent dark for reference boxes */
    
}



body {
    background-color: var(--bgColor); 
    color: var(--textColor);
    font-family: Calibri, 'Carlito', sans-serif;
    font-size: 18px;
    margin: 8px; /* Standard browser margin */
}

/* Global Link Styles */
a, a:visited {
    color: var(--linkColor);
    text-decoration: none;   
    font-weight: bold;       
    transition: color 0.2s;  
}

a:hover {
    color: var(--linkHover);
    text-decoration: underline; 
    cursor: pointer;         
}


i {
    color: #FFD700;      /* Gold color */
    font-weight: bold;   /* Make it thick */
}


e { color: rgb(200,255,200);
    font-weight: bold;
/*    font-size: 24px; */
  }
    


@media screen and (max-width: 600px) {
    img[style*="float: left"] {
        float: none !important;
        display: block;
        margin: 0 auto 20px auto; /* Centers the image */
        max-width: 100%; /* Prevents image from being wider than the screen */
        height: auto !important;
    }
}