@media all and (max-width: 700px) {
    a{
        font-size: 32px;
    }
    .sidebar {
        height: 100%;
        width: 0rem;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        overflow-x: hidden;
        padding-top: .2rem;
        background-color: #404355;
        transition: 333ms;
    }

    .closeMenu {
        margin-top: 0.3rem;
        margin-left: 1rem;
        color: #f18080;
        font-size: 34px;
        font-weight: bold;
        padding: .05rem .3rem;
        border: 3px solid #f18080;
        background-color: #404355;
        transition: 333ms;
        border-radius: .5rem;
    }

    .closeMenu:hover {
        color: #b94848;
        border-color: #b94848;
    }

    .openMenu {
        margin-top: 1.3rem;
        margin-left: 1rem;
        color: #9ee1f5;
        font-size: 24px;
        font-weight: bold;
        padding: .05rem .3rem;
        border: 3px solid #9ee1f5;
        background-color: #28303d;
        transition: 333ms;
        border-radius: .5rem;
    }

    .openMenu:hover {
        color: #7cf5c7;
        border-color: #7cf5c7;
    }


    .mainbody {
        text-align: center;
    }

    .btext {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .hub{
        display: block;
        width: 24rem;
        height: 8rem;
        border: .4rem solid #9ee1f5;
        margin-inline: auto;
        margin-top: 4rem;
        border-radius: 2rem;
        color: #9ee1f5;
        background-color: #28303d;
        transition: 333ms;
        font-size: 2rem;
        font-weight: bold;
    }

    .hub p{
        display: table-cell;
        height: 8rem;
        width: 26rem;
        vertical-align: middle; 
        margin-inline: auto;
    }

    .hubbody{
        text-align: center;
        margin: 0 2.5rem;
    }

    /* USER, COMPARE, AND MATCH */

    .openMenu{
        position: absolute;
        top: .2rem;
        left: .3rem;
    }

    .mainbody2{
        padding: 0;
    }

    .bigboy{
        width: 100%;
    }

    .balls{
        padding: 0;
    }

    .userInfo{
        margin-inline: auto;
    }

    .recentMatch{
        margin-inline: auto;
    }

    .prevMatches{
        margin-inline: auto;
    }

    .stageImg {
        width: 5.5rem;
        object-fit: fill;
        height: auto;
    }

    .stageHolds{
        margin-top: 3px;
        width: 5.5rem;
        height: 8rem;
        display: inline-block;
        outline: 0.3rem solid #9ee1f5;
        transition: 333ms;
    }
    
    .stageInfo{
        width: 29rem;
        display: block;
        padding-top: 1.5%;
        text-align: center;
        margin-inline: auto;
    }

    .stageTxt{
        font-weight: bold;
        font-size: 18px;
        margin: 0.45rem 0;
    }

    .stagediv {
        position: fixed;
        top: 24%;
        left: 50%;
        z-index: 3;
        text-align: center;
        transform: translateX(-50%);
        display: block;
        background-color: #28303d;
        margin-top: 8%;
        width: 32rem;
        height: 33rem;
        border-radius: 100px;
        border: 10px solid #404355
    }

    .infodiv {
        position: fixed;
        top: 24%;
        left: 50%;
        z-index: 3;
        text-align: center;
        transform: translateX(-50%);
        display: block;
        background-color: #28303d;
        margin-top: 12%;
        width: 32rem;
        height: 26rem;
        border-radius: 100px;
        border: 10px solid #404355
    }

    .gameInfo {
        display: inline-block;
    }

    .playerInfo {
        text-align: center;
        display: inline-block;
        width: 8.5rem;
    }

    .scoreInfo {
        display: inline-block;
        margin: 0 .3rem;
        margin-top: 4.5rem;
        width: 12rem
    }

    .gameImg {
        border-radius: 20px;
        width: 15rem;
        height: auto;
        border: 5px solid #9ee1f5
    }

    .stageName {
        font-size: 20px;
        font-weight: bold;
    }

    .largeTxt {
        font-size: 16px;
        font-weight: bold;
    }

    .dotGame {
        position: relative;
        display: inline-block;
        border-radius: 100%;
        width: 5rem;
        height: 5rem;
        vertical-align: top;
        margin-top: 6em;
    }
}

@media all and (max-width: 700px) {
    .tourhub{
        display: inline-block;
        width: 13rem;
        height: 7rem;
        border: .4rem solid var(--c);
        margin-inline: auto;
        margin: 1rem 2rem;
        border-radius: 2rem;
        color: var(--c);
        background-color: #404355;
        transition: 333ms;
        font-size: 3rem;
        font-weight: bold;
    }
        
    .tourhub p {
        display: table-cell;
        height: 6.8rem;
        width: 16rem;
        vertical-align: middle; 
        margin-inline: auto;
    }

    .podium{
        font-size: 2rem;
        font-weight: bold;
    }

    .podplayer {
        color: var(--c);
    }

    .linkyuwu {
        font-size: 1.4rem;
    }

    .linkyuwu p a{
        font-weight: bold;
    }

    .desc{
        margin-top: 3rem;
    }
}