fm-dx-webserver/web/css/main.css

:root {
    --color-main: rgba(32, 34, 40, 1);
    --color-main-bright: rgba(88, 219, 171, 1);
    --color-text: rgba(255, 255, 255, 1);
    
    --color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright)); /* 5% Brightness */
    --color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright)); /* 25% Brightness */
    --color-3: color-mix(in srgb, var(--color-main) 50%, var(--color-main-bright)); /* 50% Brightness */
    --color-4: color-mix(in srgb, var(--color-main) 20%, var(--color-main-bright)); /* 80% Brightness */
    --color-5: color-mix(in srgb, var(--color-main) 5%, var(--color-main-bright)); /* 95% Brightness */

    --color-text-2: #ccc;
}

* {
    box-sizing: border-box;
}

::selection {
    background: var(--color-main-bright);
    color: inherit;
}

/* width */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--color-1); 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-2); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-3); 
}

body {
    font-family: 'Titillium Web', sans-serif;
    color: var(--color-text);
    background-color: var(--color-main);
    transition: 0.3s ease-in-out background-color;
    margin: 0 auto;
}

#wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1180px;
    max-width: 1180px;
}
#wrapper.setup-wrapper {
    margin: auto;
    position: static;
    transform: none;
}

a {
    text-decoration: none;
    color: var(--color-text-2);
}

a:hover {
    border-bottom: 1px solid var(--color-4);
}

hr {
    color: var(--color-4);
}

table {
    border-radius: 30px;
    background-color: var(--color-2);
    padding: 20px;
    margin: auto;
}

table th {
    padding: 8px 20px;
    outline: 1px solid var(--color-3);
    background-color: var(--color-3);
}

table td {
    padding: 8px 20px;
}

table td:nth-child(1) {
    text-align: left;
}

table td:nth-child(2) {
    color: var(--color-main-bright);
    text-align: left;
}


table th:nth-child(1) {
    border-radius: 30px 0px 0px 30px; 
}

table th:nth-last-child(1){
      border-radius: 0px 30px 30px 0px;
}

@media (max-width: 1180px) {
    #wrapper {
        position: static;
        transform: none;
        margin: 50px auto;
        width: 100%;
    }
}