@media only screen and (min-width:1280px) {
    .content {
        width: 68%;
    }
    .sidebar {
        width: 30%;
    }
    .rankRow {
        display: flex;
        width: 100%;
        height: 40pt;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        background: rgb(var(--main-1));
        margin: 10pt 0;
        text-decoration: none;
        color: rgb(var(--white));
    }
    .rankRow:first-child {
        margin-top: 0;
    }
    .rankRow:last-child {
        margin-bottom: 0;
    }
    .rankPos {
        width: 10%;
        text-align: center;
        font-size: 16pt;
    }
    .rankTrophy {
        width: 8%;
        font-size: 22pt;
        text-align: center;
    }
    .t-first {
        color: rgb(255, 215, 0);
    }
    .t-second {
        color: rgb(192, 192, 192);
    }
    .t-third {
        color: rgb(205, 127, 50);
    }
    .rankImg {
        width: 40pt;
        height: 40pt;
    }
    .rankImg img {
        width: 100%;
        height: 100%;
    }
    .rankUser {
        width: calc(62% - 40pt);
        padding-left: 10pt;
        text-align: left;
    }
    .rankPoints {
        width: 20%;
        text-align: right;
        padding-right: 5pt;
    }
}

@media only screen and (min-width:900px) and (max-width:1279px) {
    .content {
        width: 68%;
    }
    .sidebar {
        width: 30%;
    }
    .rankRow {
        display: flex;
        width: 100%;
        height: 40pt;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        background: rgb(var(--main-1));
        margin: 10pt 0;
        text-decoration: none;
        color: rgb(var(--white));
    }
    .rankRow:first-child {
        margin-top: 0;
    }
    .rankRow:last-child {
        margin-bottom: 0;
    }
    .rankPos {
        width: 10%;
        text-align: center;
        font-size: 16pt;
    }
    .rankTrophy {
        width: 8%;
        font-size: 22pt;
        text-align: center;
    }
    .t-first {
        color: rgb(255, 215, 0);
    }
    .t-second {
        color: rgb(192, 192, 192);
    }
    .t-third {
        color: rgb(205, 127, 50);
    }
    .rankImg {
        width: 40pt;
        height: 40pt;
    }
    .rankImg img {
        width: 100%;
        height: 100%;
    }
    .rankUser {
        width: calc(62% - 40pt);
        padding-left: 10pt;
        text-align: left;
    }
    .rankPoints {
        width: 20%;
        text-align: right;
        padding-right: 5pt;
    }
}

@media only screen and (min-width:501px) and (max-width:899px) {
    .content {
        width: 100%;
    }
    .sidebar {
        display: none;
    }
    .rankRow {
        display: flex;
        width: 100%;
        height: 40pt;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        background: rgb(var(--main-1));
        margin: 10pt 0;
        text-decoration: none;
        color: rgb(var(--white));
    }
    .rankRow:first-child {
        margin-top: 0;
    }
    .rankRow:last-child {
        margin-bottom: 0;
    }
    .rankPos {
        width: 10%;
        text-align: center;
        font-size: 16pt;
    }
    .rankTrophy {
        width: 8%;
        font-size: 22pt;
        text-align: center;
    }
    .t-first {
        color: rgb(255, 215, 0);
    }
    .t-second {
        color: rgb(192, 192, 192);
    }
    .t-third {
        color: rgb(205, 127, 50);
    }
    .rankImg {
        width: 40pt;
        height: 40pt;
    }
    .rankImg img {
        width: 100%;
        height: 100%;
    }
    .rankUser {
        width: calc(62% - 40pt);
        padding-left: 10pt;
        text-align: left;
    }
    .rankPoints {
        width: 20%;
        text-align: right;
        padding-right: 5pt;
    }
}

@media only screen and (max-width:500px) {
    .content {
        width: 100%;
    }
    .sidebar {
        display: none;
    }
    .rankRow {
        display: flex;
        width: 100%;
        height: 40pt;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        align-content: center;
        background: rgb(var(--main-1));
        margin: 10pt 0;
        text-decoration: none;
        color: rgb(var(--white));
    }
    .rankRow:first-child {
        margin-top: 0;
    }
    .rankRow:last-child {
        margin-bottom: 0;
    }
    .rankPos {
        width: 12%;
        text-align: center;
        font-size: 12pt;
    }
    .rankTrophy {
        width: 10%;
        font-size: 16pt;
        text-align: center;
    }
    .t-first {
        color: rgb(255, 215, 0);
    }
    .t-second {
        color: rgb(192, 192, 192);
    }
    .t-third {
        color: rgb(205, 127, 50);
    }
    .rankImg {
        width: 40pt;
        height: 40pt;
    }
    .rankImg img {
        width: 100%;
        height: 100%;
    }
    .rankUser {
        width: calc(58% - 40pt);
        padding-left: 10pt;
        text-align: left;
    }
    .rankPoints {
        width: 20%;
        text-align: right;
        padding-right: 5pt;
    }
}