body {
        margin: 0;
        font-family: 'Roboto', sans-serif;
        background-color: black;
        color: #f5f5f5;
    }
    header {
        background: linear-gradient(90deg, #b60202 0%, #350d01 100%);
        padding: 2rem 0;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0);
    }
    header h1 {
        font-family: 'Orbitron', sans-serif;
        color:#ffd700;
        font-size: 2.2rem;
        letter-spacing: 2px;
        margin: 0;
    }
    nav {
        margin-top: 1rem;
    }
    nav a {
        color: #ffd700;
        text-decoration: none;
        margin: 0 1.5rem;
        font-weight: bold;
        transition: color 0.2s;
    }

    .userinfo {
        color: #ffd700;
        text-decoration: none;
        margin: 0 1.5rem;
        font-weight: bold;
        transition: color 0.2s; 
    }

    nav a:hover {
        color: #006eff;
    }
    .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2rem;
        padding: 3rem 1rem;
    }
    .card {
        background: rgba(30, 30, 32, 0.95);
        border-radius: 1rem;
        box-shadow: 0 4px 24px rgba(0,0,0,0.3);
        width: 320px;
        padding: 1rem;
        text-align: center;
        transition: transform 0.2s;
    }
    .card:hover {
        transform: translateY(-8px) scale(1.15);
    }
    .card h2 {
        font-family: 'Orbitron', sans-serif;
        font-size: 1.5rem;
        margin-bottom: 1rem;
        color: #006eff;
    }
    .card.fantasy h2 {
        color: #ffd700;
    }
    .minicard {
        color: #ffd700;
        background: #302f2f;
        border-radius: 1rem;
        transition: transform 0.2s;
        text-align: center;
        padding: 2px;
    }
    .card p {
        font-size: 1rem;
        line-height: 1.6;
    }
    footer {
        text-align: center;
        padding: 2rem 0;
        background: black;
        color: #aaa;
        font-size: 0.9rem;
        margin-top: 2rem;
    }
    .link {
        color: #006eff;
        font-size: 16px; 
    }
    .buttonL {
        background-color: #b60202;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text (optional, but often desired) */
        padding: 0.4rem;
        font-size: 14px;
        text-decoration:none;
        color: #ffd700;
        border: 1px solid #555;
        padding: 0.5rem 1rem;
        cursor: pointer;
        height: 5px;
        Width: 6rem;
        transition: background-color 0.2s;
        border-radius: 0.5rem;
    }
    .startbutton{
        background-color: black;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text (optional, but often desired) */
        padding: 0.4rem;
        font-size: 10px;
        text-decoration:none;
        color: lime;
        border: 1px solid #555;
        padding: 0.5rem 1rem;
        cursor: pointer;
        height: 5px;
        Width: 4rem;
        transition: background-color 0.2s;
        border-radius: 0.5rem;
    }
    .buttonD{
        background-color: black;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text (optional, but often desired) */
        padding: 0.4rem;
        font-size: 10px;
        text-decoration:none;
        color: gray;
        border: 1px solid #555;
        padding: 0.5rem 1rem;
        cursor: not-allowed;
        height: 5px;
        Width: 4rem;
        transition: background-color 0.2s;
        border-radius: 0.5rem;
    }
    .stopbutton{
        background-color: black;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text (optional, but often desired) */
        padding: 0.4rem;
        font-size: 10px;
        text-decoration:none;
        color: red;
        border: 1px solid #555;
        padding: 0.5rem 1rem;
        cursor: pointer;
        height: 5px;
        Width: 4rem;
        transition: background-color 0.2s;
        border-radius: 0.5rem;
    }
    .inpt {
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text (optional, but often desired) */
        font-size: 16px;
        background-color: #22222c;
        border: 1px solid #555;
        border-radius: 0.5rem;
        color: white;
        padding: 0.4rem;
        margin-right: 0.5rem;
        height: 0.5rem;
        width: 6.5rem;
    }
    .serverinpt {
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text (optional, but often desired) */
        font-size: 10px;
        background-color: #22222c;
        border: 1px solid #555;
        border-radius: 0.5rem;
        color: white;
        padding: 0.4rem;
        margin-right: 0.5rem;
        height: 1 rem;
        width: 10.5rem;
    }
    .table2 {
        border-collapse: collapse;
        width: 100%;
        font-size: 10px;

    }
    .restartbutton{
        background-color: black;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text (optional, but often desired) */
        font-size: 10px;
        text-decoration:none;
        color: #ffd700;
        border: 1px solid #555;
        padding: 0.5rem 1rem;
        cursor: pointer;
        height: 5px;
        Width: 8rem;
        transition: background-color 0.2s;
        border-radius: 0.5rem;
    }   
    .savebutton {
        background-color: black;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text (optional, but often desired) */
        padding: 0.2rem;
        font-size: 10px;
        text-decoration:none;
        color: #ffd700;
        border: 1px solid #555;
        padding: 0.5rem 1rem;
        cursor: pointer;
        height: 5px;
        Width: 4rem;
        transition: background-color 0.2s;
        border-radius: 0.5rem;
    } 
    .selector{
        background-color: black;
        display: inline-flex;
        border-radius: 0.5rem;
        align-items: left; /* Vertically centers the text */
        justify-content: left;
        padding: 0.4rem;
        font-size: 10px;
        color: #ffd700;
        border: 1px solid #555; 
        height: 6px;
        Width: 8rem;
        border-radius: 0.5rem;
    }  
    option{
        background-color: black;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text (optional, but often desired) */
        padding: 0.4rem;
        font-size: 10px;
        color: #ffd700;
        border: 1px solid #555; 
        padding: 0.5rem 1rem;
        height: 6px;
        Width: 8rem;
        border-radius: 0.5rem;
    }   
    select option{
        background-color: black;
        border-radius: 0.5rem;
        display: inline-flex;
        align-items: center; /* Vertically centers the text */
        justify-content: center; /* Horizontally centers the text (optional, but often desired) */
        padding: 0.4rem;
        font-size: 10px;
        color: #ffd700;
        border: 1px solid #555; 
        padding: 0.5rem 1rem;
        height: 6px;
        Width: 8rem;
        border-radius: 0.5rem;
    }
   option:required {
        background: #006eff;
        color: #ffd700;
}
    option:default option:checked option:selected option:disabled option:defined {
        background: #22222c;
        color: #ffd700;
} 
    option[disabled] { 
        display: none; 
}  
span {
    line-height: 1.2rem;
}