@font-face {
    font-family: Splatoon1;
    src: url(assets/fonts/Splatoon1.otf);
}

@font-face {
    font-family: Splatoon2;
    src: url(assets/fonts/Splatoon2.otf);
}

body {
    background-color: #28303d;
    color: #9ee1f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

a {
    color: #9ee1f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-decoration: none;
    transition: 400ms;
}

a:hover {
    color: #7cf5c7;
}

@media all and (min-width: 600px) {
    .sidebar {
        height: 100%;
        width: 13.3rem;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        overflow-x: hidden;
        padding-top: .2rem;
        background-color: #404355;
    }

    .closeMenu {
        width: 0;
        height: 0;
        position: relative;
        left: -100px;
    }

    .mainbody {
        padding-left: 13.1rem;
        text-align: center;
    }

    .hubbody {
        text-align: center;
        margin: 0px 4rem;
    }
    
    .openMenu {
        height: 0px;
        margin: 0px;
        padding: 0px;
        background-color: #28303d;
        border-color: #28303d;
    }

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

    .hub{
        display: inline-block;
        width: 20rem;
        height: 10rem;
        border: .4rem solid #404355;
        margin-inline: auto;
        margin: 0 2rem;
        margin-top: 4rem;
        border-radius: 2rem;
        color: #404355;
        background-color: #28303d;
        transition: 333ms;
        font-size: 2.1rem;
        font-weight: bold;
    }
    
    .hub p{
        display: table-cell;
        height: 10rem;
        width: 26rem;
        vertical-align: middle; 
        margin-inline: auto;
    }

    .hub.a:hover, .hub.b:hover, .hub.c:hover{
        background-color: #404355;
        color: #9ee1f5;
        border-color: #9ee1f5;
        width: 23rem;
        font-size: 2.8rem;
    }

    .hub.d:hover, .hub.e:hover, .hub.f:hover{
        background-color: #404355;
        color: #9ee1f5;
        border-color: #9ee1f5;
        width: 26rem;
        font-size: 2.8rem;
    }

    .hub:active {
        background-color: #404355;
        color: #7cf5c7;
        border-color: #7cf5c7;
    }

    body:has(.hub.a:hover) .hub.b, body:has(.hub.a:hover) .hub.c, body:has(.hub.b:hover) .hub.a, body:has(.hub.b:hover) .hub.c,
    body:has(.hub.c:hover) .hub.a, body:has(.hub.c:hover) .hub.b, body:has(.hub.d:hover) .hub.e, body:has(.hub.e:hover) .hub.d,
    body:has(.hub.f:hover) .hub.d, body:has(.hub.f:hover) .hub.e, body:has(.hub.e:hover) .hub.f, body:has(.hub.d:hover) .hub.f{
        width: 17rem;
    }
}

.addSpace {
    padding-bottom: 11%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

.addSpace2 {
    padding-bottom: 6%;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
}

.addSpace3 {
    padding-bottom: 8%;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}

/* Bingo Page */

.bingoimg {
    width: 60%;
    height: auto;
}

.largeimg {
    position: fixed;
    height: 80%;
    width: auto;
    top: 10%;
    left: 50%;
    z-index: 2;
    transform: translateX(-50%)
}

.largediv{
    position: fixed;
    top: 0.5%;
    left: 50%;
    z-index: 3;
    text-align: center;
    transform: translateX(-50%)
}

.pov {
    padding-bottom: 2%;
    text-align: center;
}

.pov a{
    text-decoration: underline;
    font-size: 18px;
}

/* Tourney (MOCKUPS) */

.bigboy{
    display: inline-block;
    width: 31.5rem;
}

.userInfo{
    vertical-align: top;
    width: 28rem;
    height: 12rem;
    padding-top: 4.8%;
    margin-bottom: .8rem;
    text-align: center;
    margin-top: 0;
    margin-left: 2.5rem;
}

.userTxt{
    display: inline-block;
    vertical-align: middle;
    scale: 1.5;
    margin-inline: auto;
}

.pfp{
    margin-left: 10%;
    margin-top: 1%;
    vertical-align: middle;
    width: 150px;
    height: 150px;
    border-radius: 75px;
}

.rates{
    text-align: center;
    margin-inline: auto;
}

.prevMatches{
    text-align: center;
    width: 30.7rem;
}

@media all and (min-width: 600px) {
    .mainbody2 {
        padding-left: 13.1em;
    }

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

    .stageHolds{
        margin-top: 3px;
        width: 9rem;
        height: 8.33rem;
        display: inline-block;
        outline: 0.3rem solid #9ee1f5;
        transition: 333ms;
    }

    .stageInfo{
        width: 50rem;
        height: 28rem;
        display: inline-block;
        padding-top: 1.5%;
        text-align: center;
        vertical-align: top;
    }
    
    .stageTxt{
        font-weight: bold;
        font-size: 16px;
        margin: 0.55rem 0;
    }

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

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

    .gameInfo {
        display: inline-block;
        margin: 0 14rem;
    }

    .playerInfo {
        display: inline-block;
        width: 20rem;
    }

    .scoreInfo {
        display: inline-block;
        margin: 0 4rem;
        width: 28rem
    }

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

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

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

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

@media all and (min-width: 1690px) {
    .stageImg {
        max-width: 11rem;
        width: 11rem;
        object-fit: fill;
        height: auto;
    }

    .stageHolds{
        margin-top: 3px;
        width: 11rem;
        height: 9.33rem;
        display: inline-block;
        outline: 0.3rem solid #9ee1f5;
        transition: 333ms;
    }
    
    .stageInfo{
        width: 60rem;
        height: 28rem;
        display: inline-block;
        padding-top: 1.5%;
        text-align: center;
        vertical-align: top;
    }

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

@media all and (min-width: 1880px) {
    .mainbody2 {
        padding-left: 13.1rem;
    }

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

    .stageHolds{
        margin-top: 3px;
        width: 13rem;
        height: 10.33rem;
        display: inline-block;
        outline: 0.3rem solid #9ee1f5;
        transition: 333ms;
    }
    
    .stageInfo{
        width: 70rem;
        height: 28rem;
        display: inline-block;
        padding-top: 1.5%;
        text-align: center;
        vertical-align: top;
    }

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

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

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

    .gameInfo {
        display: inline-block;
        margin: 0 15rem;
    }

    .playerInfo {
        display: inline-block;
        width: 20rem;
    }

    .scoreInfo {
        display: inline-block;
        margin: 0 4rem;
        width: 30rem
    }
    
    .gameImg {
        border-radius: 30px;
        width: 20rem;
        height: auto;
        border: 5px solid #9ee1f5
    }

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

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

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

.stageHolds:hover {
    background-color: #404355;
}

.circle {
    position: relative;
    top: 10px;
    left: 10px;
    text-align: center;
    width: var(--r);
    height: var(--r);
    border-radius: 100%;
    background-color:  #28303d;
}

.circle-border {
    text-align: center;
    width: var(--r);
    height: var(--r);
    border-radius: 100%;
    background: linear-gradient(270deg, var(--c) 50%, transparent 50%), linear-gradient(calc(-90deg + ((var(--p) - 50deg)*3.6)), var(--c) 50%, #28303d 50%)
}

.circle-border.low {
    background: linear-gradient(90deg, #28303d 50%, transparent 50%),  linear-gradient(calc(90deg + (var(--p)*3.6)), var(--c) 50%, #28303d 50%)
}

.circleTxt{
    position: relative;
    font-size: var(--s);
    top: var(--t);
    font-weight: bold;
    color: var(--c)
}

.balls{
    display: inline-block;
}

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

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

.fullImg {
    width: 25rem;
    height: auto;
    border-radius: 30px;
    border: .4rem solid #404355
}

.modeRate {
    display: inline-block;
    width: 30%
}

.modeImg {
    display: inline-block;
    vertical-align: middle;
    width: 3rem;
    height: auto;
}

.modeTxt {
    display: inline-block;
    vertical-align: middle;
    font-weight: bold;
    font-size: 22px;
    color: var(--c);
}

.recentMatch{
    display:inline-block;
    margin-right:3%;
    margin-top:0.1rem;
    color: var(--c)
}

.match {
    display: inline-block;
    background-color: #404355;
    width: 29rem;
    height: 3.7rem;
    border-radius: 20px;
    text-align: center;
}

.match:not(:last-child) {
    margin-bottom: 2.5rem;
}

.dot {
    display: inline-block;
    border-radius: 100%;
    width: 2.8rem;
    height: 2.8rem;
    margin-top: .41rem;
    margin-left: .33rem;
} 

.dot:first-child {
    margin-left: 0
}

.recentTxt {
    display: inline-block;
    width: 100%;
    z-index: 1;
    text-align: right;
    font-weight: bold;
    padding-right: 1%;
    margin-top: .25vh;
}

table {
    border-collapse: collapse;
    width: 100%;
    margin-inline: auto;
}
  
td, th {
    text-align: left;
    padding: 8px;
}

tr:nth-child(odd) td, th {
    border: 1px solid #404355;
}
  
tr:nth-child(even) td {
    background-color: #404355;
    border: 1px solid #28303d;
}

.searchbox {
    width: 40%;
    background-color: #404355;
    color: #9ee1f5;
    border: 0px;
    height: 3vh;
    font-size: 20px;
    text-align: center;
    border-radius: 5px;
}

.game {
    display: block;
    position: relative;
    line-height: 1rem;
    margin-bottom: 1%;
}

/* tourney pages */

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

    .tourhub:hover {
        background-color: #404355;
        color: var(--c);
        border-color: var(--c);
        width: 16rem;
        height: 8rem;
        margin: .5rem .5rem;
        font-size: 3.7rem;
    }

    .tourhub:hover p {
        height: 7.4rem;
    }

    .sidecont {
        display: inline-block;
        width: 25rem;
        margin-right: 5rem;
    }

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

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

    .linkyuwu {
        font-size: 1.4rem;
    }

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

    .desc {
        display: inline-block;
        vertical-align: top;
        width: 45rem;
        font-size: 1.5rem;
    }
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #28303d; 
}

::-webkit-scrollbar-thumb {
  background: #404355; 
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ee1f5; 
}

/* this class does nothing, it exists so I can grab colors */
.getColor {
    color:#eedbf8
}