@font-face {
    font-family: 'Super Mario 256'; 
    src: url('../SuperMario256.ttf')
}

body {
    margin: 0;
    height: 100vh;
    overflow: hidden;
	background: #000;
}

img, .noSelect {
    user-select: none;
}

.noClick {
    pointer-events: none;
}

.yesClick {
    pointer-events: all;
}

.cornerPiece {
    position: sticky;
}

.center {
    text-align: center;
    max-width: 100%;
}

.fit {
    width: fit-content;
}

.supercenter {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%);
}

.smallMargin {
    margin-top: 1%;
}

.topMargin {
    margin-top: 3%;
}

.topMargin2 {
    margin-top: 4%;
}

.small {
    font-size: 7vh;
}

.smaller {
    font-size: 5vh;
    -webkit-text-stroke-width: 0.20vh;
    -webkit-text-stroke-color: black;
    text-shadow: 0.35vh 0.35vh 0vh rgba(0, 0, 0, 0.3);
}

.slightlySmaller {
    font-size: 6vh;
    -webkit-text-stroke-width: 0.25vh;
    -webkit-text-stroke-color: black;
    text-shadow: 0.35vh 0.35vh 0vh rgba(0, 0, 0, 0.3);
}

.biggerShadow {
    -webkit-text-stroke-width: 0.3vh;
    -webkit-text-stroke-color: black;
    text-shadow: 0.5vh 0.5vh 0vh rgba(0, 0, 0, 0.3);
}

.bigger {
    font-size: 3.5vh;
}

.veryBig {
    font-size: 8vh;
}

.mini {
    font-size: 3vh;
    margin-top: 0.5%;
}

.pre {
    white-space: pre;
}

.valign {
    vertical-align: middle;
}

.underline {
    text-decoration: underline;
}

.inline {
    display: inline-block;
}

.pointer {
    cursor: pointer !important;
}

.help {
    cursor: help !important;
}

.outOfOrder, .darkDiff {
    filter: brightness(50%);
}

.darken, .youAreNotTheOne {
    filter: brightness(65%);
}

.youAreNotTheOne {
    transform: scale(0.85)
}

#everything {
    width: 100%;
    height: 100%;
}

p {
    font-family: aller, helvetica, arial;
    color: white;
    font-size: 2.9vh;
    word-break: break-word;
}

h1, h2, h3 {
    font-family: 'Super Mario 256', sans-serif;
    font-weight: normal;
    margin: 0% 0%;
    letter-spacing: -0.01em;
    -webkit-text-size-adjust: 100%;
    -webkit-text-stroke-color: black;
}

h1 {
    color: white;
    font-size: 6vh;
    line-height: 100%;
    overflow: hidden;
    white-space: nowrap;
    -webkit-text-stroke-width: 0.25vh;
    text-shadow: 0.375vh 0.375vh 0vh rgba(0, 0, 0, 0.3);
}

h2 {
    color: rgb(255, 200, 0);
    font-size: 8vh;
    -webkit-text-stroke-width: 0.265vh;
    text-shadow: 0.35vh 0.35vh 0.1vh rgba(0, 0, 0, 0.3);
}

h3, input[type=text], input[type=password], input[type=number], .h3Size {
    font-size: 3.5vh;
    color: white;
    -webkit-text-stroke-width: 0.14vh;
    -webkit-text-stroke-color: black;
    text-shadow: 0.2vh 0.2vh 0.02vh rgba(0, 0, 0, 0.3);
}

a {
    text-decoration: none;
    color: inherit;
    -webkit-text-stroke-width: inherit;
    -webkit-text-stroke-color: inherit;
    text-shadow: inherit;
	cursor: pointer;
}

.transparentBox, input[type=text], input[type=password], input[type=number], textarea {
    border: 0 solid transparent;
    border-radius: 2vh;
    background-color: rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

#pageSelect {
    height: 25%;
    font-size: 5.5vh;
    width: 18vh;
    margin: 8% 0% 8% 0%;
    text-align: center;
    padding-left: 0;
}

.brownBox {
    border: 2.5vh solid transparent;
    border-radius: 3vh;
    background-color: #995533;
    border-image: url('../brownbox.png') 10% round;
}

.fancybox {
    width: 69vh;
    padding: 1vh 3vh;
    border: 3.5vh solid transparent;
    border-radius: 3vh;
    background-color: #001931;
    border-image: url('../fancybox.png') 10% stretch;
    border-image-slice: 65;
}

.bounce {
    animation: boxAnimator 0.25s;
}

.epicbox {
    border: 3.5vh solid transparent;
    border-image: url('../epicbox.png') 20% stretch;
    border-image-slice: 85 77;
    border-image-width: 9.5vh;
}

.spaced {
    margin-bottom: 2%;
}

.lessSpaced {
    margin-bottom: 1%;
}

.sideSpace {
    margin-left: 2%;
}

.sideSpaceB {
    margin-left: 4%;
}

.sideSpaceC {
    margin-left: 1%;
}

.sideSpaceD {
    margin-right: 25%;
}

.rightSpace {
    margin-right: 2%;
}

h3 {
    font-size: 4vh;
}

.selectedFilter {
    filter: brightness(100%);
}

#filterStuff div {
    text-align: left;
    display: inline-block;
    width: 30%;
}

#filterStuff div h1, .smallerer {
    font-size: 4vh;
    -webkit-text-stroke-width: 0.18vh;
    -webkit-text-stroke-color: black;
    text-shadow: 0.3vh 0.3vh 0vh rgba(0, 0, 0, 0.3);}

.sideButton {
    margin-bottom: 30%;
    height: 11%
}

.gdButton {
    cursor: pointer;
    z-index: 1;
    user-select: none;
    pointer-events: all;
    transition-duration: 0.07s;
    transition-timing-function: ease-in-out;
}

.gdButton:active, .gdButton:focus-visible, a:focus-visible .gdButton {
    animation: bounceButton 0.25s ease-in-out forwards;
}

.youCanClickThis:hover {
    border-bottom: 2px solid aqua
}

.youCanClickThis2:hover {
    border-bottom: 2px solid lime
}

.unregistered:hover {
    color: rgb(0, 230, 0);
}

.popup {
    position: fixed; 
    display: none; 
    width: 100%;
    height: 100%;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 2;
}

#searchBox {
    background-color: rgb(173, 115, 76);
    width: 122vh;
    height: 75%; 
    overflow-y: auto; 
    overflow-x: hidden;
}

#searchBox::-webkit-scrollbar, #statusDiv::-webkit-scrollbar, #commentBox::-webkit-scrollbar { 
    display: none; 
}

.searchResult {
    width: 80%;
    height: 32%;
    background-color: #A1582C;
    margin: auto;
    border-bottom: 0.18vh rgba(0, 0, 0, 0.4) solid;
    padding-left: 18vh;
    padding-top: 1vh;
    white-space: nowrap;
    overflow-x: hidden;
}

.searchResult:nth-child(odd) {
    background-color: #C1743F;
}

#statusDiv, #commentBox {
    overflow-x: hidden;
    overflow-y: auto;
}

#selectCount {
    position: absolute;
    bottom: 7.5%;
    left: 4.8%;
    background-color: red;
    width: 4.5vh;
    height: 4.5vh;
    border-radius: 10vh;
    border: 0.25vh solid white;
}

.specialThanks {
    display: inline-block;
    width: 27%;
    height: 21%;
    margin: 0% 0% 7.5% 0%;
}

.specialThanks h2 {
    margin-bottom: 3%;
    font-size: 4vh;
}

.roundBottom {
    border-bottom-left-radius: 2vh;
    border-bottom-right-radius: 2vh;
}

.flex {
    display: flex;
}

.flex img {
    align-self: center;
}

.achSelect {
    cursor: pointer;
    z-index: 1;
    user-select: none;
    pointer-events: all;
}

.achSelect:active {
    transform: scale(1.04);
}

.gdpslogo {
    margin-bottom: 0%;
    border-radius: 10%;
    filter: drop-shadow(0.5vh 0.5vh 0.15vh rgba(0, 0, 0, 0.6)) 
}

.downloadDisabled {
    text-decoration: line-through;
}

.hidey {
    opacity: 0%;
    pointer-events: none;
    transition-duration: 0s !important;
}

cr { color: #ff5a5a }
co { color: #ffa54b }
cy { color: #ffff00 }
cg { color: #40e348 }
ca { color: #00ffff }
cb { color: #60abef }
cp { color: #ff00ff }
cs { color: #C0C0C0 }
cbb { color: #CD7F32 }

.red {
    color: #ff0000 !important;
}

.yellow {
    color: #ffde00;
}

.gold {
    color: rgb(255, 200, 0);
}

.green {
    color: rgb(85, 204, 55);
}

.lightgreen {
    color: #4CDA5B
}

.whatIfItWasPurple {
    color: #FF82FF;
}

.nong {
    color: #FFAABE;
}

.blue {
    color: #27CEFA;
}

.brightblue {
    color: #99ffff
}

.brightred {
    color: #ffaaaa;
}

.gray {
    filter: grayscale(100%);
}

.grayscale {
    filter: grayscale(100%) brightness(0.7);
}

.disabled {
    filter: grayscale(100%) brightness(0.9);
    pointer-events: none !important;
}

.spin {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
     animation: spin 2s linear infinite;
     mix-blend-mode: luminosity;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); } 
    }

@keyframes boxAnimator {
    0% {
        transform: scale(0) translate(-50%, -50%);
        transform-origin:left top
    }
    75% {
        transform: scale(1.075) translate(-50%, -50%);
        transform-origin:left top
    }
    100% {
        transform: scale(1) translate(-50%, -50%);
        transform-origin:left top
    }
}
@keyframes menuBounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    75% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1.2);
    }
}
@keyframes bounceButton {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
    75% {
        transform: scale(1.06);
    }
    100% {
        transform: scale(1.1);
    }
}

/*
 * Disable all transitions and animations if the user has reduced motion enabled in their sytem settings
 * Also disabled on devices that may be slow to render new frames for performance optimization
 */
@media screen and
  (prefers-reduced-motion: reduce), 
  (update: slow) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}