/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* --- Color Variables for Easy Customization --- */
:root {
    --base-color: #e0e0e0; /* The main background color, often a light gray/off-white */
    --light-shadow: #ffffff; /* A bright, soft highlight for the top-left */
    --dark-shadow: #a3a3a3; /* A deep, dark shadow for the bottom-right */
    --accent-color: #007bff; /* A color for buttons/focus states */
}

body {
    background-color: var(--base-color);
    font-family: sans-serif; /* Use a classic, clean font */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

/* --- Skeuomorphic Container (The main canvas) --- */
.skeu-container {
    background-color: var(--base-color);
    padding: 30px;
    border-radius: 20px;
    /* Soft, large shadow for the container to make it look inset into the page */
    box-shadow: 
        10px 10px 30px var(--dark-shadow) inset,
        -10px -10px 30px var(--light-shadow) inset;
    width: 90%;
    max-width: 600px;
    text-align: center;
}

/* --- Skeuomorphic Button (Raised/Extruded) --- */
.skeu-button {
    /* Basic button styling */
    padding: 15px 30px;
    border: none;
    border-radius: 12px;
    font-size: 1.1em;
    cursor: pointer;
    margin: 20px;
    
    /* The magic: Two opposing shadows for a raised/3D effect */
    background-color: var(--base-color);
    box-shadow: 
        8px 8px 16px var(--dark-shadow),     /* Dark shadow on the bottom-right */
        -8px -8px 16px var(--light-shadow);  /* Light shadow on the top-left */
    
    transition: all 0.15s ease-in-out; /* Smooth transition for hover/active states */
}

/* Button: Hover State (Slightly "pop" it out more) */
.skeu-button:hover {
    box-shadow: 
        12px 12px 24px var(--dark-shadow), 
        -12px -12px 24px var(--light-shadow);
    transform: scale(1.02);
}

/* Button: Active State (Make it look pressed in/recessed) */
.skeu-button:active {
    box-shadow: 
        2px 2px 5px var(--dark-shadow) inset,    /* Inner shadow for recessed look */
        -2px -2px 5px var(--light-shadow) inset;
    transform: scale(0.98);
}

/* --- Skeuomorphic Card/Panel (A simple floating surface) --- */
.skeu-card {
    background-color: var(--base-color);
    padding: 20px;
    border-radius: 15px;
    margin-top: 25px;
    text-align: left;
    
    /* Same raised look as the button */
    box-shadow: 
        6px 6px 12px var(--dark-shadow),
        -6px -6px 12px var(--light-shadow);
}

/* --- A Classic Look: Adding an Inset Input Field --- */
.skeu-input {
    padding: 10px 15px;
    margin: 10px;
    width: 80%;
    border: none;
    border-radius: 10px;
    font-size: 1em;
    
    /* The input field is typically an inset (pushed-in) element */
    background-color: var(--base-color);
    box-shadow: 
        3px 3px 6px var(--dark-shadow) inset,
        -3px -3px 6px var(--light-shadow) inset;
    
    /* Remove default focus outline and replace with a custom highlight */
    outline: none;
    transition: box-shadow 0.2s;
}

.skeu-input:focus {
    /* Subtle accent color glow when focused */
    box-shadow: 
        3px 3px 6px var(--dark-shadow) inset,
        -3px -3px 6px var(--light-shadow) inset,
        0 0 10px var(--accent-color);
}