/* General Page Styling */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #cd5555;
    color: #0e0e0e;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}

h3 {
    margin-bottom: 20px;
    font-weight: 500;
    letter-spacing: 1px;
}

/* The Skeuomorphic Button */
.skeuomorphic-button {
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;

    /* The "3D" Magic: Background Gradient */
    background: linear-gradient(145deg, #ffffff, #d1d1d1);

    /* Shadow Stack: 
       1. Light highlight on top-left
       2. Dark shadow on bottom-right 
    */
    box-shadow:  5px 5px 10px #090909, 
                -2px -2px 5px #444;
}

/* Hover Effect: Slightly brighter */
.skeuomorphic-button:hover {
    background: linear-gradient(145deg, #ffffff, #e6e6e6);
}

/* Active Effect: The "Press" */
.skeuomorphic-button:active {
    background: #df4508;
    /* Reverse the shadows to make it look pushed in */
    box-shadow: inset 5px 5px 10px #b8b8b8, 
                inset -5px -5px 10px #ffffff;
    transform: translateY(2px);
}

.bottom-nav {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 10px;
    z-index: 10;
}

.bottom-nav a {
    color: #021629;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem; /* Slightly smaller than the top nav */
    text-transform: uppercase;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.bottom-nav a:hover {
    color: #000000;
    opacity: 1;
    text-decoration: underline;
}