/* shared */
@font-face {
    font-family: "Iosevka Comfy";
    src: url("assets/iosevka-comfy-regular.ttf") format("truetype");
}

html {
    font-family: "Iosevka Comfy";
    font-size: 16pt;
}

body {
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    width: 100%;
}

.right {
    float: right;
}

.lcolonq-invisible {
    visibility: hidden;
}

.lcolonq-reverse {
    transform: scale(-1, 1);
}

/* pubnix-index */
body.lcolonq-pubnix-index {
    font-family: "Iosevka Comfy";
    font-weight: bold;
    color: black;
    user-select: none;
    image-rendering: pixelated;
    background-color: #eeeeee;
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, grey 1px, transparent 1px),
        linear-gradient(to bottom, grey 1px, transparent 1px);
}

body.lcolonq-pubnix-index-obs {
    background-color: rbga(0,0,0,0);
}

#lcolonq-pubnix-index-title {
    position: absolute;
    top: 2rem;
    bottom: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
    font-size: 20vw;
}

.lcolonq-pubnix-index-letter {
    display: inline-block;
}

.lcolonq-pubnix-index-letter:hover {
    color: #333333;
}

#lcolonq-pubnix-index-subtitle {
    font-size: 5vw;
    margin-top: -5vw;
    margin-right: 12vw;
    text-align: right;
}

#lcolonq-pubnix-index-header {
    background-color: #cccccf;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    height: 2rem;
    border-bottom: 0.2rem ridge;
}

#lcolonq-pubnix-index-header a {
    color: black;
}

#lcolonq-pubnix-index-header marquee {
    color: black;
    padding-top: 0.4rem;
}

#lcolonq-pubnix-index-footer {
    background-color: #cccccf;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 2rem;
    border-top: 0.2rem groove;
}

#lcolonq-pubnix-index-footer a {
    display: inline-block;
    color: black;
    margin-top: 0.2rem;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    padding: 0.1rem;
    text-decoration: none;
    border: 0.1rem outset;
}

#lcolonq-pubnix-index-footer a:active {
    border: 0.1rem inset;
}

#lcolonq-pubnix-index-canvas {
    position: absolute;
    bottom: 2rem;
    left: 0px;
    width: 832px;
    height: 832px;
}

/* button */
body.lcolonq-button-body {
    background-color: #eeeeee;
    user-select: none;
}

.lcolonq-button {
    position: absolute;
    height: 90vh;
    width: 40vw;
    object-fit: fill;
    image-rendering: pixelated;
    border: dotted #888888;
    margin-top: 5vh;
    margin-bottom: 5vh;
    margin-left: 5vw;
    margin-right: 5vw;
}

a.lcolonq-button-link :hover {
    background-color: #cccccc;
}

a.lcolonq-button-link :active {
    background-color: #aaaaaa;
}

#lcolonq-button-green {
    left: 0px;
}

#lcolonq-button-red {
    right: 0px;
}

/* register */
#lcolonq-register-container {
    position: absolute;
    top: 0px;
    left: 0px;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 2fr 1fr;
}

#lcolonq-register-box {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lcolonq-register-link {
    width: max-content;
    text-align: center;
    display: block;
    background-color: #6441a5;
    border-radius: 0.5rem;
    color: white;
    background-color: #6441a5;
    border-radius: 0.5rem;
    padding: 10px;
    cursor: pointer;
    user-select: none;
}

#lcolonq-register-link:hover {
    background-color: #533094;
}

#lcolonq-registered-container {
    position: absolute;
    top: 0px;
    left: 0px;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 2fr 1fr;
}

#lcolonq-registered-box {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    justify-content: center;
}

.lcolonq-registered-fieldname {
    font-weight: bold;
}

#lcolonq-register-error-container {
    position: absolute;
    top: 0px;
    left: 0px;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-columns: 1fr 2fr 1fr;
}

#lcolonq-register-error-box {
    grid-row: 2;
    grid-column: 2;
    display: flex;
    justify-content: center;
}

/* menu */
#lcolonq-menu {
    overflow-y: scroll;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lcolonq-menu-grid {
    top: 0px;
    display: grid;
    height: 100%;
    grid-template-rows: max-content 4fr;
    margin: 0 50px;
}

#lcolonq-menu-header {
    grid-row: 1;
    grid-column: 2;
    text-align: center;
    padding-bottom: 1rem;
}

#lcolonq-menu-header h1 {
    margin-bottom: 0rem;
}

#lcolonq-menu-body {
    grid-row: 2;
    grid-column: 2;
}

#lcolonq-menu-body-grid {
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-auto-rows: minmax(10rem, auto);
    gap: 1rem;
    margin-bottom: 1rem;
}

#lcolonq-menu-friendzone {
    grid-column: 1/-1;
    display: grid;
    grid-auto-flow: dense;
    grid-template-columns: subgrid;
    grid-template-rows: auto; /* first row is just the title */
    grid-auto-rows: minmax(10rem, auto);
    gap: 1rem;
    outline: solid;
    outline-offset: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#lcolonq-menu-friendzone-title {
    grid-column: 1/-1;
    text-align: center;
    margin-top: 0rem;
}

.lcolonq-menu-box {
    border: solid;
    border-color: black;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    user-select: none;
}

.lcolonq-menu-box:hover {
    background-color: #eeeeee;
}

.lcolonq-menu-box h3 {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.lcolonq-menu-box-long {
    grid-row-end: span 2;
}

.lcolonq-menu-box textarea {
    resize: none;
    margin-top: 1rem;
    flex: 1;
}

/* auth */
.lcolonq-auth {
    position: absolute;
    top: 0px;
    left: 0px;
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 2fr 1fr;
}

.lcolonq-auth-box-outer {
    grid-row: 2;
    grid-column: 2;
}

.lcolonq-auth-box {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.lcolonq-auth-box h1 {
    margin-top: 0rem;
}

#lcolonq-auth-submit {
    display: none;
}

#lcolonq-auth-below {
    text-align: center;
}

#lcolonq-auth-register {
    font-size: 0.7rem;
    color: CanvasText;
}

#lcolonq-auth-error {
    grid-row: 3;
    grid-column: 2;
    text-align: center;
    color: red;
}

/* greencircle */
#lcolonq-gc-body {
    overflow-y: scroll;
    height: auto;
}

#lcolonq-gc-hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#lcolonq-gc-spin {
    height: 60vh;
    width: 60vh;
    margin-top: 20vh;
    margin-bottom: 20vh;
    display: grid;
    place-items: center;
}

#lcolonq-gc-logo {
    grid-area: 1 / 1;
    margin-top: 2vh;
    margin-left: 8vh;
    height: 100%;
    image-rendering: pixelated;
}

#lcolonq-gc-spin-image {
    grid-area: 1 / 1;
    animation: spin 40s linear infinite;
    margin-left: 2vh;
    height: 250%;
    width: 250%;
    user-select: none;
    pointer-events: none;
}

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

@media (max-width : 320px) {
    #lcolonq-gc-logo {
        max-width: 60vw;
        max-height: 60vw;
    }
    #lcolonq-gc-spin-image {
        height: 160%;
        width: 160%;
    }
}

#lcolonq-gc-explainer {
    text-align: justify;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 100vh;
    mask-image: linear-gradient(180deg, white 50%, transparent 95%);
    overflow: hidden;
}

#lcolonq-gc-explainer h1 {
    text-align: center;
    font-size: 1.9rem;
}

#lcolonq-gc-relentless {
    text-align: justify;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}

#lcolonq-gc-relentless h1 {
    font-size: 1.9rem;
}

#lcolonq-gc-panels {
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, 15rem);
    grid-auto-rows: minmax(10rem, auto);
    gap: 1rem;
}

@media (max-width : 320px) {
    #lcolonq-gc-panels {
        grid-template-columns: 1fr;
    }
}

.lcolonq-gc-panel {
    border: solid black;
    color: inherit;
    text-decoration: none;
    padding: 1rem;
    display: none;
    cursor: pointer;
}

.lcolonq-gc-panel:hover {
    background-color: #eeeeee;
}

.lcolonq-gc-visible {
    display: block;
}

.lcolonq-gc-panel h2 {
    text-align: center;
}

.lcolonq-gc-now {
    font-weight: bold;
    color: red;
}

/* throwshade */
#lcolonq-throwshade-body {
    overflow-y: scroll;
}
#lcolonq-throwshade {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    /* background-image: url("./assets/rectangular.jpg"); */
    background-color: darkgray;
    background-size: 100% 100%;
}
.lcolonq-throwshade-canvas {
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.lcolonq-throwshade-canvas canvas {
    margin: auto;
    display: block;
    width: auto;
    height: 100%;
    image-rendering: pixelated;
}
#lcolonq-throwshade-bottom {
    flex-grow: 1;
    height: 40%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding-top: 0.6rem;
}
#lcolonq-throwshade-bottom-left {
    flex-grow: 1;
    padding-bottom: 1rem;
    padding-left: 0.7rem;
    padding-right: 1rem;
}
#lcolonq-throwshade-textarea {
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    overflow: auto;
    outline: none;
    box-shadow: none;
    color: white;
    background-color: rgb(0 0 0 / 0.8);
}
#lcolonq-throwshade-bottom-right {
    flex-grow: 1;
    padding-bottom: 1rem;
    padding-left: 0.7rem;
    padding-right: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    max-width: 40%;
}
#lcolonq-throwshade-bottom-right img {
    cursor: pointer;
    height: 40%;
}
#lcolonq-throwshade-current {
    margin: 0.5rem;
}

/* gizmo */
#lcolonq-gizmo-body {
    width: 100vw;
    height: 100vh;
}
#lcolonq-gizmo {
    width: 100%;
    height: 100%;
}
#lcolonq-gizmo-top {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    right: 0px;
    top: 0px;
    color: white;
    background-color: black;
    padding-top: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 1rem;
}
#lcolonq-gizmo-top:hover {
    opacity: 1;
}
#lcolonq-gizmo-bottom {
    background-color: white;
    width: 100%;
    height: 100%;
}
#lcolonq-gizmo-contents {
    border: none;
    width: 100%;
    height: 100%;
}

/* soundboard */
#lcolonq-soundboard {
    color: white;
    background-color: black;
    overflow-y: scroll;
    height: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#lcolonq-soundboard-container {
    top: 0px;
    width: min(90vw, 30rem);
    height: 100%;
}
#lcolonq-soundboard-entryframe {
    overflow: hidden;
    margin-top: 3rem;
    margin-bottom: 3rem;
    margin-left: 2rem;
    margin-right: 2rem;
}
#lcolonq-soundboard-entry {
    font-size: 30pt;
    width: calc(100% - 2.2rem);
    padding: 1rem;
    color: white;
    background-color: #111111;
    border: 0.1rem solid darkgrey;
}
#lcolonq-soundboard-entry:focus {
    outline: none;
}
#lcolonq-soundboard-entrytext {
    white-space: nowrap;
    color: darkgrey;
}
#lcolonq-soundboard-docs {
    display: grid;
    gap: 1rem;
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-auto-rows: minmax(10rem, auto);
    margin-bottom: 1rem;
}
.lcolonq-soundboard-doc {
    border: 0.1rem solid darkgrey;
    padding: 0.5rem;
}
.lcolonq-soundboard-doc h3 {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0.5rem;
}