/* Main font definitions */
@font-face {
    font-family: 'SourceSansPro-Regular';
    font-display: swap;
    src: url('/fonts/SourceSansPro-Regular.ttf');
}
@font-face {
    font-family: 'SourceSansPro-SemiBold';
    font-display: swap;
    src: url('/fonts/SourceSansPro-SemiBold.ttf');
}
@font-face {
    font-family: 'SourceSansPro-Black';
    font-display: swap;
    src: url('/fonts/SourceSansPro-Black.ttf');
}
@font-face {
    font-family: 'Snowtop-Caps';
    font-display: swap;
    src: url('/fonts/Snowtop-Caps.ttf');
}

/* Dark Mode Body Styling */
body {
    margin: auto;
    padding: 0;
    background-color: #282830; /* Dark background */
    color: #e8e8e8; /* Light text */
    font-size: 16px;
    font-family: SourceSansPro-Regular;
    overflow-x: hidden;
}

#snowCanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
}

#cacheWarning23 {
    display: none;
}

.exc{background:#26cfdd;color:#282830;display:table;width:100%;text-align:center;}
.exc:hover{background:#4f4f5f;color:#26cfdd;}
.exc2{background:#22bcc9;color:#282830;display:table;width:100%;text-align:center;}
.exc2:hover{background:#4f4f5f;color:#22bcc9;}
.better{background:#5cd56b;color:#282830;display:table;width:100%;text-align:center;}
.better:hover{background:#4f4f5f;color:#5cd56b;}
.better2{background:#51bb5e;color:#282830;display:table;width:100%;text-align:center;}
.better2:hover{background:#4f4f5f;color:#51bb5e;}
.normal{background:#cbaa27;color:#282830;display:table;width:100%;text-align:center;}
.normal:hover{background:#4f4f5f;color:#cbaa27;}

.exc a, .exc2 a, .better a, .better2 a, .normal a {
    color: #282830 !important;
}

/* Hover styles for links within these classes */
.exc:hover a, .exc2:hover a, .better:hover a, .better2:hover a, .normal:hover a {
    color: inherit !important;
}

.btn {
    background: #e8e8e8;
    color: #4f4f5f;
    cursor: pointer;
}

.btn:hover {
    background: #666677;
    color: #e8e8e8;
}

.btn[disabled] {
    background: #333344;
    color: #afafaf;
    cursor: default;
}

.Btn-Basic {
    background: #2a66a9;
    color: #e8e8e8;
    border: 2px solid #16375d;
    cursor: pointer;
}

.Btn-Basic:hover {
    background: #e8e8e8;
    color: #2a66a9;
    border: 2px solid #2a66a9;
}

.Btn-Basic[disabled] {
    background: #333344;
    color: #afafaf;
    cursor: default;
    border: 2px solid #afafaf;
}

.Btn-Premium {
    background: #1d8186;
    color: #e8e8e8;
    border: 2px solid #125154;
    cursor: pointer;
}

.Btn-Premium:hover {
    background: #e8e8e8;
    color: #1d8186;
    border: 2px solid #1d8186;
}

.Btn-Premium[disabled] {
    background: #333344;
    color: #afafaf;
    cursor: default;
    border: 2px solid #afafaf;
}

.Btn-Gold {
    background: #b89b00;
    color: #e8e8e8;
    border: 2px solid #5b4d00;
    cursor: pointer;
}

.Btn-Gold:hover {
    background: #e8e8e8;
    color: #b89b00;
    border: 2px solid #b89b00;
}

.Btn-Gold[disabled] {
    background: #333344;
    color: #afafaf;
    cursor: default;
    border: 2px solid #afafaf;
}

.Btn-Platinum{background:#8700b8;color:#e8e8e8;border: 2px solid #410059;cursor:pointer;}
.Btn-Platinum:hover{background:#e8e8e8;color:#8700b8;border: 2px solid #8700b8;}
.Btn-Platinum[disabled]{background:#eee;color:#afafaf;cursor:default;border: 2px solid #afafaf;}


.btnBasic {
    background: #2a66a9;
    color: #e8e8e8;
    border: 2px solid #16375d;
    cursor: pointer;
}

.btnBasic:hover {
    background: #e8e8e8;
    color: #2a66a9;
    border: 2px solid #2a66a9;
}

.btnBasic[disabled] {
    background: #333344;
    color: #afafaf;
    cursor: default;
    border: 2px solid #afafaf;
}

.btnPremium {
    background: #1d8186;
    color: #e8e8e8;
    border: 2px solid #125154;
    cursor: pointer;
}

.btnPremium:hover {
    background: #e8e8e8;
    color: #1d8186;
    border: 2px solid #1d8186;
}

.btnPremium[disabled] {
    background: #333344;
    color: #afafaf;
    cursor: default;
    border: 2px solid #afafaf;
}

.btnGold {
    background: #b89b00;
    color: #e8e8e8;
    border: 2px solid #5b4d00;
    cursor: pointer;
}

.btnGold:hover {
    background: #e8e8e8;
    color: #b89b00;
    border: 2px solid #b89b00;
}

.btnGold[disabled] {
    background: #333344;
    color: #afafaf;
    cursor: default;
    border: 2px solid #afafaf;
}


.btnPlatinum{background:#8700b8;color:#e8e8e8;border: 2px solid #410059;cursor:pointer;}
.btnPlatinum:hover{background:#e8e8e8;color:#8700b8;border: 2px solid #8700b8;}
.btnPlatinum[disabled]{background:#eee;color:#afafaf;cursor:default;border: 2px solid #afafaf;}


.btn2 {
    cursor: pointer;
    background: #4f4f5f;
    color: #e8e8e8;
    padding: 10px;
    font-size: 20px;
    border-radius: 5px;
}

.btn2:hover {
    background: #666677;
    color: #4f4f5f;
}

h1 {
    font-family: SourceSansPro-Regular;
    font-size: 40px;
    margin-top: 0px;
    text-align: center;
    color: #4f4f5f; /* Adjusted for dark mode */
}

h2 {
    font-family: SourceSansPro-Regular;
    font-size: 40px;
    margin-top: 0px;
    text-align: center;
    color: #e8e8e8; /* Adjusted for dark mode */
}


h3 {
    font-family: SourceSansPro-Regular;
    font-size: 30px;
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
    color: #84b5eb; /* Adjusted for dark mode */
}

strong {
    color: #84b5eb;
    font-weight: normal;
    font-style: normal;
    font-family: SourceSansPro-SemiBold;
}

a:link, a:visited, a:hover, a:active {
    text-decoration: none;
    color: #e8e8e8; /* Light text for dark mode */
}

header {
    width: 100%;
    background: #424249; /* Dark background */
}

.inside {
    margin: 0 auto;
    min-width: 1000px;
    max-width: 1300px;
    width: 100%;
    font-family: SourceSansPro-Black;
    font-size: 42px;
    text-align: left;
    color: #2c65a4; /* Adjusted for dark mode */
    text-transform: uppercase;
}

.head-span {
    color: #e56a1f;
}

.head-low {
    font-size: 30px;
    margin-top: -20px;
    color: #e8e8e8; /* Adjusted for dark mode */
    margin-left: 2px;
    padding-bottom: 10px;
}

.logo {
    display: inline-block;
    vertical-align: middle;
    margin-right: 1%;
}

.nav-element {
    padding: 10px;
    display: inline-block;
    color: #e8e8e8; /* Light text for dark mode */
    font-size: 21px;
    vertical-align: middle;
}

.nav-element:hover {
    background: #282830;
}

.wrap {
    width: 100%;
    padding-top: 20px;
}

.main {
    margin: 0 auto;
    min-width: 1000px;
    max-width: 1200px;
    width: 100%;
    text-align: left;
}

.downcssu {
    float: left;
    margin-bottom: 15px;
}

.time {
    text-align: right;
    margin-bottom: 15px;
}

.monitor-img {
    width: 200px;
    height: 150px;
    background-repeat: no-repeat;
    background-size: cover;
}

.monitor {
    text-align: center;
    display: table;
    width: 100%;
    margin-bottom: 30px;
}

.monitor-server-pre {
    display: table-cell;
    text-align: center;
}

.monitor-server {
    width: 200px;
    color: #e8e8e8;
    background: #4f4f5f;
    border: 2px #f7f7f7 solid;
    border-radius: 5px;
    margin: 0 auto;
}

.list-main {
    margin-top: 40px;
    width: 100%;
    color: #4f4f5f;
    background: #e8e8e8;
    border: 2px #f7f7f7 solid;
    border-radius: 5px;
}

.info-table {
    display: table;
    width: 100%;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
    color: #e8e8e8;
    background: #4f4f5f;
}

.info-table-original {
    display: table;
    width: 100%;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
    color: #e8e8e8;
    background: #4f4f5f;
}

.server-info{color:#e56a1f;}

.info-table-different {
    display: table;
    width: 100%;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
    color: #4f4f5f;
    background: #e8e8e8;
}

.info-table-different a{
    color: #4f4f5f !important;
}

.info-table-different a:hover {
    text-decoration: underline;
}

.support-message{background:#4f4f5f;color:#e8e8e8;}

.info-table-head {
    display: table;
    width: 100%;
    text-align: center;
    max-width: 100%;
    box-sizing: border-box;
    color: #e8e8e8;
    background:#282830;
    text-transform:uppercase;
}

.info-cell {
    display: table-cell;
    text-align: left;
    padding: 3px;
    font-size: 22px;
}

.info-head {
    text-transform: uppercase;
    text-align: center;
    font-family: SourceSansPro-SemiBold;
    font-size: 30px;
}

footer {
    width: 100%;
    background: #424249; /* Dark background */
    height: 50px;
    margin-top: 30px;
    padding: 0;
}

.inside-footer {
    margin: 0 auto;
    min-width: 1000px;
    max-width: 1200px;
    width: 100%;
    text-align: left;
    color: #e8e8e8;
    padding-top: 15px;
}

.order {
    text-align: center;
    display: table;
    width: 100%;
    margin-bottom: 30px;
}

.order-boost-pre {
    display: table-cell;
    text-align: center;
}

.order-boost {
    width: 300px;
    color: #e8e8e8;
    background: #4f4f5f;
    border: 2px #f7f7f7 solid;
    border-radius: 5px;
    margin: 0 auto;
}

.order-boostBasic {
    width: 300px;
    background: #2a66a9;
    color: #e8e8e8;
    border: 2px #f7f7f7 solid;
    border-radius: 5px;
    margin: 0 auto;
}

.order-boostPremium {
    width: 300px;
    background: #1d8186;
    color: #e8e8e8;
    border: 2px #f7f7f7 solid;
    border-radius: 5px;
    margin: 0 auto;
}

.order-boostGold {
    width: 300px;
    background: #b89b00;
    color: #e8e8e8;
    border: 2px #f7f7f7 solid;
    border-radius: 5px;
    margin: 0 auto;
}

.order-boostPlatinum{width:300px;background:#8700b8;color:#e8e8e8;border:2px #f7f7f7 solid;border-radius:5px;margin:0 auto;}

.order-img {
    text-align: justify;
    width: 290px;
    background: #e8e8e8;
    color: #4f4f5f;
    padding: 5px;
    font-size: 18px;
}

.order-title {
    padding: 2px;
    text-transform: uppercase;
    font-size: 30px;
}

.order-price {
    padding: 2px;
    font-size: 20px;
}

.but-service {
    cursor: pointer;
    color: #e8e8e8;
    background: #e56a1f;
    border: 0.5px #d2611d solid;
    border-radius: 10px;
    font-size: 30px;
    padding: 5px;
    width: 400px;
    font-family: SourceSansPro-SemiBold;
}

.but-service:hover {
    color: #e8e8e8;
    background: #2c65a4;
    border: 0.5px #26568a solid;
}

.linky {
    color: #84b5eb;
}
.linky:hover {
    text-decoration: underline;
}

.downcs{color:#84b5eb !important;}
.downcs:hover{text-decoration:underline;}

.additional-color{color:gray;}
.round-length{color:#84b5eb}
.round-length-index{color:#2c65a4;}
.shipshop{color:#84b5eb;}