html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    background-size: cover;
}

div.x {
    display: flex;
    flex-direction: row;
}
div.y {
    display: flex;
    flex-direction: column;
}

div.tight * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.tight {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

div.pushright * {
    margin-left: auto !important;
}
div.pushleft * {
    margin-left: auto !important;
}

.toright {
    margin-left: auto !important;
}

.toleft {
    margin-right: auto !important;
}


div.c {
    display: flex;  
    align-items: center;    
    justify-content: center;
}

div.bc * {
    margin-left: auto;
    margin-right: auto;
}

div.blurred {
    backdrop-filter: blur(10px);
}

div.tinted {
    background-color: #00000055;
}

div.w9 {
    width: 90%;
}

div.h9 {
    height: 90%;
}

div.fill {
    flex: 1;
    height: 100%;
    min-height: 0;
    /* ensures proper overflow behavior in flex containers */
    align-self: stretch;
}

div.fill9 {
    flex: 1;
    margin: 10%;
    height: calc(100% - 10%);
    /* account for top+bottom margins */
    min-height: 0;
    align-self: stretch;
}

.w1 {
    width: 10% !important;
}
.w2 {
    width: 20% !important;
}
.w3 {
    width: 30% !important;
}
.w4 {
    width: 40% !important;
}
.w5 {
    width: 50% !important;
}
.w6 {
    width: 60% !important;
}
.w7 {
    width: 70% !important;
}
.w8 {
    width: 80% !important;
}
.w9 {
    width: 90% !important;
}
.w10 {
    width: 100% !important;
}

div.cw10 * {
    width: 100% !important;
}


div.rounded {
    border-radius: 10px;
}

.centered {
    margin-left: auto !important;
    margin-right: auto !important;
}
.centeredy {
    margin-top: auto !important;
    margin-bottom: auto !important;
}
.nospace, p strong, p a {
    margin: 0 !important;
}

div.wide {
    width: 100%;
}

div.high {
    height: 100%;
}

div.top {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

div.bottom {
    margin-top: auto;
    margin-left: 0;
    margin-right: 0;
}

div.low {
    padding-left: auto;
    padding-right: auto;
    height: auto
}

div.left {
    height: 100%;
}

div.bar {
    width: 30vw;
}

div.rt * {
    margin-right: 10%;
    text-align: right !important;
}
div.ct * {
    text-align: center !important;
}
div.lt * {
    margin-left: 10%;
    text-align: left !important;
}
div.bt * {
    margin-left: 10%;
    margin-right: 10%;
    text-align: justify !important;
}

html body .rt {
    text-align: right !important;
}
html body .ct {
    text-align: center !important;
}
html body .lt {
    text-align: left !important;
}
html body .bt {
    text-align: justify !important;
}

.obfuscated {
    font-family: "Bytesized" !important;
}



.spaceholder_medium {
    margin-bottom: 30vh;
    background-color: transparent !important;
}

.spaceholder_small {
    margin-bottom: 10vh;
    background-color: transparent !important;
}

.spaceholder_tiny {
    margin-bottom: 3vh;
    background-color: transparent !important;
}

img.pixelart {
    image-rendering: pixelated;
}

.spaceholder_big {
    margin-bottom: 45vh;
}

.spaceholder_fill {
    display: flex;
    margin: 0;
    flex: 1;
    min-height: 0;
}
.spaceholder_fillx {
    margin: 0;
    flex: 1;
    min-width: 0;
}


h1 {
    font-size: 75pt;
}

a.inline {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

a.invis {
    color: white;
}

li {
    margin-left: 0 !important;
}

/* ============= Mobile styling ============= */
@media (max-width: 768px) {
    h1 {
        font-size: 25pt;
    }

    .mobile-invis {
        display: none !important;
    }
}
@media (min-width: 768px) {
    .desktop-invis {
        display: none !important;
    }
}