:root {
    --r6yellow: #fad505;
    --r6gold: #faac05;
    --r6black: #0D0D0D;
    --r6grey: #262626;
    --lightGrey: #696969;
    --r6white: #F2F2F2;
    --darkRed: #810000;
    --smallText: 1.25vw;
    --mediumText: 1.5vw;
    --largeText: 1.75vw;
    --xLargeText: 2vw;
    --xLargeText: 2vw;
}

.center-vert-align {
    position: relative;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    /* border: 2px solid red; */
}

.center-horz-align {
    position: relative;
    height: 30%;
    margin-top: -15vh;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    /* border: 2px solid blue; */
}

/* Enter new styles here */

.sidemenu {
    position: absolute;
    height: 90%;
    top: 10%;
    width: 25%;
    background: rgb(13, 13, 13, .75);
    border-right: 2px solid var(--r6grey);
    overflow-x: hidden;
    overflow-y: auto;
    /* border: 2px solid red; */
}

/* .sidemenu-heading {
    position: relative;
    width: 100%;
    height: min-content;
    font-size: var(large);
    text-align: center;
    color: var(--r6gold);
    border-bottom: 2px solid var(--r6grey);
    border-right: 2px solid var(--r6grey);
    border: 2px solid blue;
} */

.sidemenu-section {
    position: relative;
    height: min-content;
    /* border: 2px solid blue; */
}

.sidemenu-heading {
    position: relative;
    height: min-content;
    width: 100%;
    font-size: var(--xLargeText);
    text-align: center;
    color: var(--r6white);
    border-bottom: 2px solid var(--r6grey);
}

.sidemenu-list {
    position: relative;
    list-style: none;
    height: min-content;
    width: 100%;
    flex-direction: column;
    gap: 3%;
    border-bottom: 2px solid var(--r6grey);
}

.sidemenu-list-item {
    position: relative;
    height: min-content;
    display: flex;
    flex-direction: column;
    gap: 1%;
    width: 95%;
    left: 2.5%;
    margin-top: 2%;
    border-radius: .25em;
    background-color: rgba(250, 172, 5, 0.1);
    transition: all .2s ease-in-out;
    cursor: pointer;
    margin-bottom: 1%;
    /* border: 2px solid green; */
}

.sidemenu-list-item:hover {
    background-color: rgba(250, 172, 5, 0.3);
}

.sidemenu-list-item-title {
    position: relative;
    color: var(--r6white);
    font-size: var(--mediumText);
    left: 2%;
    top: 2%;
    width: 96%;
    overflow: hidden;
    white-space: none;
    text-wrap: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    /* border: 2px solid green; */
}

.sidemenu-list-item-description {
    position: relative;
    color: var(--r6white);
    font-size: var(--mediumText);
    left: 2%;
    top: 2%;
    width: 96%;
    /* overflow: hidden;
    white-space: none;
    text-wrap: nowrap; */
    text-overflow: ellipsis;
    cursor: pointer;
    /* border: 2px solid green; */
}

.sidemenu-list-item-tail {
    position: relative;
    color: var(--r6white);
    font-size: var(--smallText);
    top: 10%;
    text-align: end;
    width: 100%;
    height: min-content;
    cursor: pointer;
}

.midmenu-container {
    position: absolute;
    top: 10%;
    left: 27.5%;
    height: 90%;
    width: 70%;
    display: flex;
    flex-direction: row;
    /* border: 2px solid red; */
}

.midmenu-section {
    position: relative;
    height: 100%;
    width: 30%;
    background: rgb(13, 13, 13, .75)
        /* border: 2px solid blue; */
}

.midmenu-section-leaderboard {
    position: relative;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-left: 2px solid var(--r6grey);
    /* border: 2px solid blue; */
}

.midmenu-section-leaderboard-heading {
    position: relative;
    width: 100%;
    height: min-content;
    font-size: var(--xLargeText);
    color: var(--r6white);
    text-align: center;
    top: .5%;
    border-bottom: 2px solid var(--r6grey);
}

.midmenu-section-leaderboard-winner {
    position: relative;
    width: 95%;
    left: 2.5%;
    border-radius: .25em;
    height: min-content;
    font-size: var(--largeText);
    color: var(--r6white);
    text-align: center;
    top: 1%;
    background-color: rgba(250, 172, 5, 0.5);
    border-bottom: 2px solid var(--r6grey);
}

.midmenu-section-leaderboard-list {
    position: relative;
    list-style: none;
    height: min-content;
    width: 100%;
    display: flex;
    flex-direction: column;
    top: 2%;
    /* border: 2px solid blue; */
}

.midmenu-section-leaderboard-list-item {
    position: relative;
    height: min-content;
    margin-bottom: 2%;
    padding-top: 1%;
    padding-bottom: 1%;
    border-radius: .25em;
    width: 95%;
    left: 2.5%;
    transition: all .2s ease-in-out;
    background-color: rgba(250, 172, 5, 0.1);
}

.midmenu-section-leaderboard-list-item:hover {
    background-color: rgba(250, 172, 5, 0.3);
}

.midmenu-section-leaderboard-list-item-name {
    position: relative;
    color: var(--r6white);
    font-size: var(--mediumText);
    text-align: center;
    text-indent: 1%;
}

#midmenu-section-2 {
    position: relative;
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 2%;
    border-right: 2px solid var(--r6grey);
    border-left: 2px solid var(--r6grey);
    /* border: 2px solid red; */
}

.midmenu-section-mvp,
.midmenu-section-matches,
.midmenu-section-logs {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    background-color: rgba(250, 172, 5, 0.1);
    border-radius: .25em;
    width: 95%;
    left: 2.5%;
    transition: all .2s ease-in-out;
    /* border: 2px solid red; */
}

#midmenu-section-logs {
    height: 60%;
}

.midmenu-section-mvp:hover,
.midmenu-section-matches:hover,
.midmenu-section-logs:hover {
    background-color: rgba(250, 172, 5, 0.3);
}

.midmenu-section-mvp-center,
.midmenu-section-matches-center,
.midmenu-section-logs-center {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.midmenu-section-mvp-heading,
.midmenu-section-matches-heading,
.midmenu-section-logs-heading {
    position: relative;
    color: var(--r6white);
    height: min-content;
    text-align: center;
    font-size: var(--xLargeText);
}

.midmenu-section-mvp-description,
.midmenu-section-matches-description {
    position: relative;
    color: var(--r6white);
    font-size: var(--largeText);
    white-space: none;
    text-wrap: pretty;
    text-align: center;
}

.midmenu-section-logs-list {
    position: relative;
    list-style: none;
    height: 88%;
    width: 95%;
    left: 2.5%;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 2%;
    /* border: 2px solid red; */
}

.midmenu-section-logs-list-item {
    position: relative;
    background: rgb(13, 13, 13, .5);
    border-radius: .25em;
}

.midmenu-section-logs-list-item-info {
    position: relative;
    color: var(--r6white);
    font-size: var(--mediumText);
    left: 1%;
    padding-top: 1%;
}