/* =====================================
   SEBAS ART - Y2K NEOCITIES STYLE
   ===================================== */

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #001b44;

    background-color: #0088ff;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.35) 2px,
            transparent 2px
        );

    background-size: 18px 18px;
}


/* =====================================
   MAIN CONTAINER
   ===================================== */

.container {
    width: 850px;
    max-width: 90%;

    margin: 30px auto;

    background: #e8f7ff;

    border: 5px ridge #ffffff;

    box-shadow:
        8px 8px 0px #0044aa,
        0 0 20px rgba(255, 255, 255, 0.8);
}


/* =====================================
   HEADER
   ===================================== */

header {
    text-align: center;

    padding: 25px;

    background: linear-gradient(
        #7ed6ff,
        #168cff 50%,
        #0054c7
    );

    color: white;

    border-bottom: 4px ridge white;

    text-shadow: 2px 2px #004a9f;
}

header h1 {
    margin: 0;

    font-size: 42px;

    letter-spacing: 3px;
}

header p {
    font-weight: bold;
}


/* =====================================
   NAVIGATION
   ===================================== */

nav {
    background: #003c91;

    padding: 8px;

    border-bottom: 4px ridge white;
}

nav ul {
    list-style: none;

    margin: 0;
    padding: 0;

    display: flex;

    justify-content: center;

    gap: 8px;
}

nav a {
    display: block;

    padding: 8px 18px;

    color: white;

    background: linear-gradient(
        #66cfff,
        #0066cc
    );

    border: 3px outset #bdefff;

    text-decoration: none;

    font-weight: bold;
}

nav a:hover {
    background: linear-gradient(
        #ff9df2,
        #c300a9
    );

    color: white;
}


/* =====================================
   MAIN CONTENT
   ===================================== */

main {
    padding: 20px;
}

section {
    margin-bottom: 20px;

    padding: 18px;

    background: white;

    border: 4px ridge #7fcfff;
}

h2 {
    color: #0055bb;

    border-bottom: 2px dotted #168cff;

    padding-bottom: 5px;
}


/* =====================================
   COMMISSION BUTTON
   ===================================== */

.big-button {
    display: inline-block;

    padding: 12px 25px;

    background: linear-gradient(
        #ff75ed,
        #c500ae
    );

    color: white;

    border: 4px outset #ffcaff;

    text-decoration: none;

    font-weight: bold;

    text-shadow: 1px 1px #66005b;
}

.big-button:hover {
    background: linear-gradient(
        #ffe675,
        #ff9d00
    );
}


/* =====================================
   FOOTER
   ===================================== */

footer {
    text-align: center;

    padding: 15px;

    background: #003c91;

    color: white;

    border-top: 4px ridge white;

    font-size: 12px;
}