@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url(./fonts/GoogleSans.woff2) format("woff2");
}
@font-face {
    font-family: "Google Sans";
    font-style: italic;
    font-weight: 400 700;
    font-display: swap;
    src: url(./fonts/GoogleSans.woff2) format("woff2");
}
@font-face {
    font-family: "Google Sans Code";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url(./fonts/GoogleSansCode.woff2) format("woff2");
}
@font-face {
    font-family: "Google Sans Code";
    font-style: italic;
    font-weight: 300 800;
    font-display: swap;
    src: url(./fonts/GoogleSansCodeItalic.woff2) format("woff2");
}
body {
    margin: 0;
    height: 100vh;
    color: white;
}
* {
    font-family: "Google Sans", sans-serif;
    box-sizing: border-box;
}
code {
    font-family: "Google Sans Code";
}
.content {
    display: flex;
    width: 100%;
    height: 100%;
    background: rgba(75, 75, 75);
    padding: 15px;
    gap: 15px;
    transition: background-color 0.3s ease;
}
.online {
    background: rgba(75, 210, 75);
}
.offline {
    background: rgba(210, 75, 75);
}
.sidebar {
    height: 100%;
    width: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.scard {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 15px;
    font-size: 18px;
}
.sidebarcontent {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 10px;
}
.sidebarfooter {
    height: fit-content;
    padding: 15px;
}
a {
    color: white;
    text-decoration: underline;
}
.mainbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 50px;
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.topstats {
    display: flex;
    gap: 10px;
    width: 100%;
}
.topstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    border-radius: 10px;
    padding: 10px;
}
.topstatnum {
    font-size: 22px;
}
.stat {
    font-weight: 600;
}
.topstatname {
    font-weight: 400;
    font-size: 13px;
    text-align: center;
}
.pingcount {
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
    font-weight: 400;
}
.pingcount code {
    font-weight: 400;
}