/*servers*/
.hero-servers {
    position: absolute;
    left: 2.75rem;
    top: 7.125rem;
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 5;
}

@media (max-width: 75rem) {
    .hero-servers {
        display: none !important;
    }
}

.atreus-onlinebox {
    background: url(../images/line1.png) no-repeat left bottom,
    url(../images/line2.png) no-repeat left top,
    url(../images/line3.png) no-repeat right top,
    url(../images/line4.png) no-repeat right bottom;
    padding: 0.625rem;
    height: calc(100% - 1.5rem);
}

.atreus-gold-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.1875rem;
    width: 100%;
    background: linear-gradient(90deg, transparent, #caa45f, #ffd87a, #fff2b0, #ffd87a, #caa45f, transparent);
    box-shadow: 0 0 0.625rem #ffd87a, 0 0 1.25rem rgba(255, 215, 120, .6);
    animation: atreus-goldMove 6s linear infinite;
}

.atreus-server-card {
    max-width: 20.3125rem;
    padding: 0.625rem;
    border-radius: 0.375rem;
    background: linear-gradient(145deg, #2a1b09, #0f0f0f);
    border: 0.0625rem solid #caa45f;
    box-shadow: 0 0 2.1875rem rgba(212, 166, 74, .25),
    inset 0 0 2.1875rem rgba(255, 215, 120, .08);
    color: #fff;
    position: relative;
    overflow: hidden;
    font-family: Arial;
}

.atreus-gold-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.1875rem;
    width: 100%;
    background: linear-gradient(90deg, transparent, #caa45f, #ffd87a, #fff2b0, #ffd87a, #caa45f, transparent);
    box-shadow: 0 0 0.625rem #ffd87a, 0 0 1.25rem rgba(255, 215, 120, .6);
    animation: atreus-goldMove 6s linear infinite;
}

.atreus-flex-b {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.atreus-onlinewrap {
    border: 0.0625rem solid #424242;
    background-size: 100% 100%;
}

.atreus-nameserv {
    font-size: 1.125rem;
    color: #FFFFFF;
    position: relative;
    padding: 0 0 0 .3rem;
}

.atreus-nameserv span {
    color: #FFC737;
}

.atreus-progressline {
    border: 0.0625rem solid #242E3D;
    border-radius: 1.1875rem;
    width: 100%;
    height: 0.75rem;
    margin: 0.3125rem 0;
}

.atreus-progress {
    background: url(../images/progress.png) no-repeat;
    background-size: 100% 100%;
    height: 0.375rem;
    max-width: 100%;
}

.atreus-progressbox {
    background: #242E3D;
    margin: 0.1875rem 0.1875rem 0 0.1875rem;
    border-radius: 1.1875rem;
}

.atreus-descriptserv a {
    font-size: 1rem;
    color: #617693;
    text-decoration: none;
}

.atreus-descriptserv a:hover {
    text-decoration: underline;
}

.atreus-descriptserv a:before {
    margin: 0 0.4375rem 0 0;
}

.atreus-servstarted {
    color: #888d95;
}

.atreus-server.atreus-offline .atreus-onlineserv {
    color: rgba(255, 255, 255, 0.78);
}
.atreus-onlineserv {
    margin-right: 1.5rem;
}
.atreus-server {
    margin: 0;
    border-bottom: 0.0625rem solid #212531;
    padding: 0.3125rem 0;
}

.atreus-onlinebox > :last-child {
    border-bottom: none;
}

.atreus-serv3 .atreus-nameserv > :before {
    position: absolute;
    top: -2rem;
    left: -2.1875rem;
}

.atreus-server.atreus-offline {
    opacity: 1;
}

.atreus-serv1 .atreus-nameserv > :before, .atreus-serv2 .atreus-nameserv > :before {
    top: -2.4rem;
    left: -2.4rem;
}