:root {
    --background:       #181A20;
    --background-alt:   #4c5369;
    --bg-rgb:           24, 26, 32;
    --content-bg:       #f5efe0;

    --nav-text:         #F5FCFD;
    --nav-color-light:  #81D1D810;
    --nav-color:        #81D1D8;
    --accent-color:     #EA1A6D;
    --header-color:     #007781;

    --border-debug: none;

    overflow-x: hidden;

    font-family: Tahoma,Verdana,Segoe,sans-serif;
}

html {
    overflow-x: hidden;
    /* Safari compatibility */
    width: 100%;
}

::-webkit-scrollbar {
    width: auto;
    transition-duration: 1s;
}

::-webkit-scrollbar-track{
    background-color: var(--background);
}

::-webkit-scrollbar-thumb {
    height: 20px;
    background-color: var(--content-bg);
    border-width: 2px;
    border-style: solid;
    border-color: var(--background);
    border-radius: 20px;
    width:          15px;
}

::-webkit-scrollbar-thumb:hover { 
    width:  20px;
}

.gameHolder::-webkit-scrollbar{
    display: none;
}

body {
    background-color: var(--background);
    margin: 0px;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

h3 {
    display: inline;
}

.sectionTitle {
    color: var(--header-color);
    text-shadow: 0 0 2px var(--background);
}

.centerText {
    text-align: center;
}

.marginInlay {
    margin-left: 10vw;
}

.cont {
    border-style: var(--border-debug);
    border-width: 1px;
    border-color: #000;
    
    width:      100%;
    margin:     0px;
}

.navSide {
    margin-top: 5vh;
    width:      50vw;
}

.head {
    height:     15vh;
    min-height: 140px;
}

.logo {
    display: inline-block;
    vertical-align: middle;
    max-width: 75%;
    min-width: 300px;
    border-style: var(--border-debug);
    transition-duration: 0.3s;
}

.headGrid {
    margin-left: 5%;
    margin-right: 5%;
    display: grid;
    grid-template-columns: 0.5fr 2fr;
    width: 90%;
    height: 100%;
    align-items: center;
}

.loginGrid {
    display: grid;
    width:   80vw;
    grid-template-columns: 0.5fr 2fr;
    align-items: center;
}

.slide {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width:   200%;
    transition-duration: 1s;
}

.navCont {
    text-align: right;
    align-items: right;
}

.middle {
    background-color: var(--content-bg);
    box-shadow: 0px 0px 20px var(--content-bg);
    min-height: 80vh;
    padding-top: 40px;
    padding-bottom: 40px;
    overflow: hidden;
}

.featuredHolder {
    margin: 0 10vw 0 10vw;
    height: 25vh;
    border-radius: 25px;
    box-shadow: 0 0 10px var(--background);
}

.featuredImage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    object-fit: cover;
    border-radius: 25px;
}

.noDec {
    text-decoration: none;
}

.featuredText {
    text-decoration: none;
    text-align: center;
    border-radius: 0 0 25px 25px;
    position: relative;
    color: var(--content-bg);
    bottom: calc(40px + 1vh);
    font-size: 30px;
    padding: .5vh 1vw .5vh 1vw;
    background-color: rgba(var(--bg-rgb), 0.3);
    width: auto;
    transition-duration: 1s;
    text-shadow: 0 0 4px var(--background);
}

.featuredText:hover {
    cursor: pointer;
    background-color: var(--accent-color);
    font-size: 35px;
}

.regInlay {
    margin: 0 10vw 0 10vw;
}

.thinInlay {
    margin: 0 1vw 0 1vw;
}

.flexSingle {
    display: flex;
    flex-direction: column;
}

.inline {
    display: inline-block;
}

.bottomSpace {
    margin-bottom: 5vh;
}

.foot {
    height:     5vh;
    min-height: 60px;
}

.gameButton {
    display: inline-block;
} 

.block {
    box-shadow: 0 0 10px var(--background);
    background-color: var(--background);
    margin-top: 1vh;
    border-radius: 25px;
}

.taRight {
    text-align: right;
}

.navButton {
    color:      var(--nav-text);
    text-shadow: 0px 0px 10px var(--nav-color);
    box-shadow: 0px 0px 30px var(--nav-color-light);
    background-color: var(--nav-color-light);
    font-size:   calc(10px + 1vw);
    text-decoration: none;
    border-radius: 10px;
    padding:    20px;
    transition-duration: 0.5s;
    margin:     0 10px 0 10px;
}

.userDirText {
    color: var(--nav-text);
    text-shadow: 0px 0px 10px var(--nav-color);
    display: inline;
}

.secretButton {
    background-color:   transparent;
    box-shadow:         none;
}

.navButton:hover {
    text-shadow: 0px 0px 10px var(--accent-color);
    background-color: var(--nav-color);
}

.navModal {
    background-color: var(--background);
    z-index:  20;
    box-shadow: 0px 0px 20px var(--content-bg);
    position: absolute;
    width:    50vw;
    height:   100%;
    transition-duration: 0.5s;
    right:    0;
}

.nmShow {
    animation-duration: 0.5s;
    animation-name: slideNav;
    animation-timing-function: ease-out;
    left: -50vw;
}

.nmHide {
    animation-duration: 0.3s;
    animation-name: slideNav;
    animation-direction: reverse;
    animation-timing-function: ease-in;
    left: 0vw;
}

.full {
    display:        block;
    width:          100%;
    margin-bottom:  5vh;
}

.loginButt {
    border-style: none;
    width:          100%;
    margin-bottom:  2vh;
    background-color: var(--nav-text);
}

.clickShow {
    cursor: pointer;
}

.loginButtMain {
    background-color: var(--background);
}

red {
    color: red;    
}

.blackText {
    color: var(--background);
}

.inputAdjust {
    margin: 0;
    align-items: center;
    box-sizing: content-box;
    width: 100%;
}

.right {
    text-align: right;
    float: right;
}

#mainCont {
    width:    100%;
    top:        0;
}

.nbOverlay {
    margin-right: 50vw;
}

.gameCover {
    vertical-align: middle;
    width:  14vw;
    height: 14vw;
    min-width: 175px;
    min-height: 175px;
    margin: 0 20px 0 20px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0px 0px 10px var(--background);
    transition-duration: 1s;
}

.gameCover:hover {
    cursor:     pointer;
    width:      15vw;
    height:     15vw;
    min-width: 200px;
    min-height: 200px;
    box-shadow: 0px 0px 30px var(--background);
    transform-origin: center center;
}

.gameHolder {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items:    center;
    position: relative;
    height:     20vw;
    max-height: 20vw;
    min-height: 250px;
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: auto;
    max-width: 100vw;
    -webkit-mask-box-image: radial-gradient(circle at center, rgba(0,0,0,1) 35vw, rgba(0,0,0,0) 40vw);
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 35vw, rgba(0,0,0,0) 40vw);
}

.profileGrid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    width: 100%;
    height: 75vh;
}

.controlbar {
    height: auto; 
    padding: 20px;
}

.hundo {
    width: 100%;
    height: 100%;
}

.checkboxContainer {
    background-color: #fcba03;
    border-radius: 10px;
    padding: 5px;
    transition-duration: 0.1s;
}

.checkboxContainer:hover{
    padding: 10px;
    background-color: #f1bf5b;
    cursor: pointer;
}

.nintyWid {
    width: 90%;
}

.scrollvert {
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.activityPad {
    padding: 10px;
}

.activityList {
    color: var(--nav-text);
    transition-duration: 1s;
}

.activityList:hover {
    cursor: pointer;
}

.holderHolder {
    display: grid;
    grid-template-columns: 0.1fr 1fr 0.1fr;
    height: 20vw;
    min-height: 250px;
    width:  100vw;
}

.holderButton {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    color:      var(--background);
    text-shadow: 0px 0px 10px var(--accent-color);
    opacity: 50%;
    font-size:   5vw;
    width: 100%;
    height: 100%;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
}

.widZero {
    width: auto;
}

.widForty {
    width: 40%;
}

.widFifty {
    width: 50%;
}

.noBottomMarg {
    margin-bottom: 0px;
}

.noTopMarg {
    margin-top: 0px;
}

copyOnClick {
    transition-duration: .1s;
}

copyOnClick:hover {
    cursor: pointer;
    font-size: larger;
}

.memLock {
    position: relative;
    left: -50%;
    font-size: 50px;
    color: gold;
    text-shadow: 0 0 10px white;
    z-index: 20;
}

.gameHolderPad {
    padding-left: 5vw;
    padding-right: 5vw;
}

.holderButton:hover {
    opacity: 100%;
    font-size: 7vw;
}

.gameSectionDivider {
    margin-top: 100px;
    margin-bottom: 100px;
}

.gameHolderModal {
    position:   fixed;
    top:        0;
    z-index:    50;
    height:     100vh;
    width:      100vw;
    background-color: rgba(var(--bg-rgb), 0.4);
}

.hidden {
    display:    none;
}

.blurHold {
    filter: blur(20px);
    animation-duration: 0.5s;
    animation-name: blurFade;
    animation-direction: reverse;
}

.profileFlex {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--content-bg);
    text-shadow: 0 0 5px var(--content-bg);
}

fit {
    font-size: 10vw;
}

.centerFlex {
    display: flex;
    height: 100%;
    justify-content: center;
    text-align: center;
    align-items: center;
}

.gameModalGameHolder {
    display: flex;
    flex-direction: column;
    width: 75vh;
    height: 75vh;
    border-radius: 5vw;
    color: var(--content-bg);
    text-shadow: 0 0 5px var(--background);
    background-color: var(--content-bg);
    box-shadow: 0 0 50px var(--background);
    background-size: cover;
    background-blend-mode: multiply; 
}

.descFloater {
    margin-top: auto;
}

.playButton {
    display: flex;
    margin-top: auto;
    justify-content: center;
    align-items: center;
    font-size:   2vw;
    height:   20%;
    width:    100%;
    border-radius: 0 0 5vw 5vw;
    color: var(--nav-color);
    background-color: rgba(var(--bg-rgb), 0.5);
    text-shadow: 0 0 10px var(--accent-color);
    transition-duration: 0.4s;
}

.fullHeight {
    height: 100%;
}

.regHeight {
    height: 75vh;
}

.pointer:hover {
    cursor: pointer;
}

.playButton:hover {
    cursor: pointer;
    background-color: var(--accent-color);
}

.revealGameInfoBox {

    animation-duration: 0.5s;
    animation-name: fadeIn;

}

.blurRelease {
    filter: blur(0px);
    animation-duration: 0.5s;
    animation-name: blurFade;
}

.centerAll {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    width: 100%;
}

.lessBL {
    color: var(--nav-text);
}

.ha {
    height: auto;
}

.splitGrid {
    display: grid;
    grid-template-columns: 1fr .1fr 1fr;
    width: 100%;
    height: 100%;
    justify-items: center;
}

.centerPlayer {
    border-radius: 20px;
    background-color:rgba(var(--bg-rgb), 0.9);
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 90%;
}

.playerFrame {
    border-radius: 5px;
    border-style: none;
    width: 100%;
    height: 100%;
}

.playerHolder {
    width: 100%;
}

.hsModalHolder {
    padding: 10px;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: rgba(var(--bg-rgb), 0.5);
    width: 80vw;
    height: 50vh;
    color: var(--nav-text);
    border-radius: 10px;
}


.highscoreGrid {
    display: grid;
    grid-template-columns: 1fr 0.5fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
    width: 100%;
}

.highscoreItem {
    font-size: 2em;
}

.highscoreListItemName {
    font-size: 2em;
}

.highscoreListItemScore {
    font-size: 2em;
}

.checklistContent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.checklistItem {
    background-color: #ff94a3;
    padding: 2px;
    margin: 2px;
    border-radius: 5px;
}

.checklistItem:hover {
    background-color: #bd5b68;
    cursor: pointer;
}

@keyframes blurFade {
    from {
        filter: blur(20px);
    }

    to {
        filter: blur(0px);
    }
}

@keyframes slideNav {
    from {
        left: 0;
    }

    to {
        left: -50vw;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0%;
    }

    to {
        opacity: 100%;
    }
}