/* Color Scheme */
/* Main Background = #0F141C - Deep Navy Black */
/* Secondary Background = #161D29 - Soft Blue-Gray */
/* Elevated Panels = #1D2635 - Slate Blue */
/* Border/Dividers = #2A364B - Muted Steel */
/* Primary Accent = #4F8CFF - Cool Blue */
/* Hover Accent = #6BA3FF - Bright Blue */
/* Active/Selected = #3D7BFF - Rich Azure */
/* Main Banner Text = #F2F7FF - Ice Blue White */
/* Secondary Banner Text = #C7D8F7 - Frosted Blue */
/* Banner Accent Text = #7DB2FF - Electic Blue */
/* Text Primary = #E7EDF7 - Soft White */
/* Text Secondary = #A9B4C7 - Muted Gray-Blue */
/* Disabled Text = #667085 - Dark Muted Blue */
/* Success = #4CAF8D - Blue-Tinted Green */
/* Warning = #D9A441 - Muted Amber */
/* Error = #D65C6E - Soft Crimson */

body {
    background-color: #0F141C;
    color: #E7EDF7;
}

.banner-box {
    background-color: #1D2635;
    color: #F2F7FF;
    padding: 40px 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.banner-box h1 {
    margin: 0;
    font-size: 2.5rem;
    font-family: sans-serif;
    letter-spacing: 1px;
}

.content {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    background-color: #161D29;
    color: #E7EDF7;
    padding: 20px;
    margin: 20px auto;
    max-width: 50%;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tile {
    background-color: #1D2635;
    width: 220px;
    height: auto;
    padding: 0px 15px;
    text-align: center;
    border: #2A364B solid 2px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.125);
    transition: background-color 0.3s ease;
}

.tile:hover {
    background-color: #2A364B;
}

.tile img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
}

.wide-tile {
    background-color: #1D2635;
    width: 100%;
    height: auto;
    padding: 15px;
    text-align: center;
    border: #2A364B solid 2px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.125);
}

.links {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 15px;
}

.floating-btn {
    display: flex;
    width: 50px;
    height: 50px;
    background-color: #1b2230;
    color: #F2F7FF;
    text-decoration: none;
    border-radius: 1000rem;
    font-family: sans-serif;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    cursor: pointer;
    font-size: 1.5rem;
    transition: background-color 0.3s ease;
}

.floating-btn:hover {
    background-color: #253349;
}

.floating-btn img {
    margin: auto;
    width: 32px;
    height: auto;
}