:root {
    --background-color: black;
    --text-color: white;
    --demphasis-color: #ffffff80;
    --accent-color: #00fffb;
    --animation-speed-short: 200ms;
    --animation-speed-mid: 400ms;
    --animation-speed-long: 600ms;
    --animation-curve: cubic-bezier(0, .8, .27, .99);
    --animation-curve: cubic-bezier(0.81, 0.06, 0.01, 1.01);
    --animation-curve: cubic-bezier(0.59, 0.06, 0.33, 0.93);
    --animation-curve: cubic-bezier(0.15, 0.51, 0.5, 0.93);
    --animation-curve: cubic-bezier(0, 0.84, 0.5, 0.93);
    --font-height: 1.25em;
    --options-area-height: 5em;
    --radius: 20px;
    --back-button-width: 20px;
    --input-height: 1.2em;
    --spacing: 10px;
    --line-width: 1px;
    --nav-height: 4.5rem;
}

/*
This one is a little cute and cartoony
@font-face {
    font-family: 'GowunDodum';
    src: url(/resource/font/GowunDodum-Regular.ttf);
}
*/

@font-face {
    font-family: 'NotoSansKR-Light';
    src: url(/resource/font/NotoSansKR-Light.otf);
}

*, *::before, *::after {
    transition: transform var(--animation-speed-mid) var(--animation-curve), opacity var(--animation-speed-mid) var(--animation-curve);
    box-sizing: border-box;
    position: relative;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: underline;
}

form {
    width: inherit;
}

input, textarea, button {
    /* "color-scheme" is to make autocomplete input style match page's color scheme better */
    color-scheme: dark;
    font-size: inherit;
    font-family: inherit;
    background: transparent;
    color: white;
    border: none;
    border-radius: 0;
    max-width: 100%;
}

input {
    border-bottom: 1px solid white;
}

textarea, .file-preview-container {
    background-color: rgb(44, 44, 44);
    color: white;
    border-radius: 2px;
    resize: none;
    font: inherit;
    padding: var(--spacing);
}

textarea:focus, input:focus {
    outline: none;
}

embed {
    background-color: white;
}

.tool-tip {
    display: none;
}

html, body, #body, .page {
    /* App is always 100% */
    height: 100%;
}

body {
    background-color: rgb(16, 26, 37);
    font-size: var(--font-height);
    font-family: 'NotoSansKR-Light', sans-serif;
    color: var(--text-color);
}

body>div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.url {
    /* Shorten URLs to ellipsis */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

#loading-screen {
    position: fixed;
    height: 100vh;
    width: 100vw;
    background-color: var(--background-color);
    z-index: 100;

    color: white;

    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#loading-screen {
    display: flex;
}

body:has(#body:not(.loading)) #loading-screen {
    display: none;
}


#loading-screen span {
    font-family: 'Courier New', Courier, monospace;
    color: white;
    animation: hop 5s var(--animation-curve) infinite;
}

.loading:not(#body) {
    opacity: .5;
    pointer-events: none;
}

@keyframes hop {
    0% {
        transform: translateY(0);
    }

    5% {
        transform: translateY(10px);
    }

    10% {
        transform: translateY(0);
    }
}

@keyframes loading-animation {
    0% {
        opacity: 0;
        transform: scale(.25, .25);
    }

    100% {
        opacity: 1;
        transform: scale(.5, .5);
    }
}

@keyframes loading-animation-highlight {
    0% {
        transform: translateX(-50px);
    }

    100% {
        transform: translateX(50px);
    }
}


.page, nav {
    /* display: flex; */
    max-width: 600px;
    width: 100%;
}

.page {
    display: flex;
    flex-direction: column;

    /* height: calc(100% - var(--nav-height)); */
    /* padding-top: var(--nav-height); */
    background-position: center;
    background-size: cover;
}

.page:not(#conversation) {
    /*
    Adding padding to top of page (nav bar 
    */
    padding-top: var(--nav-height);
}

.page:not(#conversation), nav {
    /* Standard padding excluding conversation (where padding is added to the messages-container. Otherwise, the scroll bar intrudes unpleasantly far from the edge */
    padding: var(--spacing);
}


.page>* {
    width: 100%;
}

#settings>* {
    margin-top: var(--spacing);
}

.section-divider {
    border-bottom: solid 1px var(--text-color);
    margin: calc(var(--spacing)*1.5) 20%;
    opacity: .5;
}


/***** TRANSMITTING INDICATOR BAR *****/
#transmission-indicator-bar {
    height: 2px;
    width: 100%;

    position: absolute;
    top: var(--nav-height);

    background-color: white;

    z-index: 1;
}

#body:not(.getting-updates) #transmission-indicator-bar {
    animation: end-transmission 1s forwards;
}

#body.getting-updates #transmission-indicator-bar {
    animation: start-transmission 200ms both, ongoing-transmission 1s alternate-reverse infinite both;
}

@keyframes start-transmission {
    0% {
        scale: 0 1;
        opacity: .75;
    }

    100% {
        scale: .75 1;
        opacity: .75;
    }
}

@keyframes ongoing-transmission {
    0% {
        opacity: .25;
    }

    100% {
        opacity: .75;
    }
}

@keyframes end-transmission {
    0% {
        scale: .75 1;
        opacity: .75;
    }

    10% {
        scale: 1 1;
        opacity: 1
    }

    100% {
        opacity: 0;
    }
}



/***** NAV *****/
#body>nav {
    /* MAIN SITE NAVIGATION */
    height: var(--nav-height);
    width: 100%;
    /* text-align: right; */
    position: absolute;
    z-index: 1;

    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Allow pointer events to pass through nav element */
    pointer-events: none;
}

nav>* {
    /* Allow all nav children to receive pointer events */
    pointer-events: all;
}

nav>button {
    backdrop-filter: blur(3px);
}

nav #disconnected {
    pointer-events: none;
    color: var(--text-color);
    z-index: 1;
}

#disconnected::before {
    content: '';
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 50%;
    border-top: 1px solid var(--text-color);
    width: calc(var(--nav-height)/3);
    height: calc(var(--nav-height)/3);
    animation: spin 1s linear infinite;
    /* Setting position absolute appears to prevent messy repainting of the sibling menu button's drop shadow in iOS Safari */
    position: absolute;
    translate: 0 -50%;
}

/* #body>nav>button { */
/* LOGIN BUTTON */
button {
    border: solid var(--line-width) var(--text-color);
    border-radius: var(--radius);
    padding: var(--spacing);
    padding-top: calc(var(--spacing) - 5px);

}

button, .message-unread, .message-unread::before, #disconnected::before {
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.4));
}

/* TOGGLE BUTTON */
button.toggle {
    /* A button that contains a moving element that switches between on and off*/
    padding: 0;
    height: 1em;
    width: 2em;
    /* We do want content to stay within the border: */
    box-sizing: content-box;

}

button.toggle>div {
    /* The moving inner circle that switches between on and off*/
    height: 1em;
    width: 1em;
    border-radius: 1000px;
    transition-property: background-color, transform, opacity;
}

button.toggle:not(.on)>div {
    background-color: red;
    transform: translate(0, 0);
}

button.toggle.on>div {
    background-color: greenyellow;
    transform: translate(100%, 0);
}


/**** INTRODUCTION PAGE SECTIONS ****/
.page#introduction section {
    margin: var(--spacing) 0;
}



/**** CONTACT CONTAINER ****/

#contact-container {
    padding: 0 var(--spacing);
}

/*** USER ***/


/*** ANIMATION-RELATED ADAPTATIONS ***/


/*** USER HEADER ***/
.compose-message-area, .add-reject-contact-input-area {
    display: flex;
    flex-direction: row;
}


.user-header input {
    display: none;
    border: none;
    width: 100%;
}

.profile-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--input-height);
    width: var(--input-height);
    overflow: hidden;
    border-radius: 100vw;
    margin: 0 var(--spacing);
}

.profile-image-container.empty-image img {
    display: none;
}

.profile-image-container.empty-image::after {
    content: 'ㅇ';
}

.profile-image-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Swap the div name for the input name during edit */
.user.show-profile-area .edit input {
    display: block;
}

.user.show-profile-area .edit .profile-name-container {
    display: none;
}

/*** MESSAGE AREA ***/

.messages-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: scroll;
    overflow-x: hidden;

    padding-top: var(--nav-height);
    /* Make space on top of the compose-message-area element */
    padding-bottom: 100px;
    padding-left: var(--spacing);
    padding-right: var(--spacing);
}

.message-date {
    text-align: center;
    font-size: .75rem;
    color: var(--demphasis-color);
    padding: var(--spacing) calc(var(--spacing) * 2);
}

/****** RECEIVED MESSAGES *******/

.message-container {
    max-width: 80%;

    margin: calc(var(--spacing) / 2) 0;
    align-self: start;

    /* display: none; */

    overflow-wrap: break-word;
}

.message-container.user-message {
    align-self: end;
}

/* The goal here is to only make the most recent 10 messages display, with 100% opacity for the most recent 5 and decreasing opacity they get older */
/*
.message-container:nth-last-child(1) {
    display: block;
}

.message-container:nth-last-child(2) {
    display: block;
}

.message-container:nth-last-child(3) {
    display: block;
}

.message-container:nth-last-child(4) {
    display: block;
}

.message-container:nth-last-child(5) {
    display: block;
    opacity: .8
}

.message-container:nth-last-child(6) {
    display: block;
    opacity: .7
}

.message-container:nth-last-child(7) {
    display: block;
    opacity: .6
}

.message-container:nth-last-child(8) {
    display: block;
    opacity: .5
}

.message-container:nth-last-child(9) {
    display: block;
    opacity: .4
}

.message-container:nth-last-child(10) {
    display: block;
    opacity: .3
}
*/

.incoming-message-container.message-quote:empty {
    display: none;
}

.message-clip-container, .message-date {
    background-color: rgb(42, 42, 42);
}

.message-container:not(.user-message) .message-clip-container {
    clip-path: inset(0 0 0 0 round calc(var(--spacing) * 2) calc(var(--spacing) * 2) calc(var(--spacing) * 2) 0);
}

.message-container.user-message .message-clip-container {
    clip-path: inset(0 0 0 0 round calc(var(--spacing) * 2) calc(var(--spacing) * 2) 0 calc(var(--spacing) * 2));
}

/* OPEN GRAPH */
.message-clip-container.open-graph {
    margin-top: var(--spacing);
    padding-bottom: calc(var(--spacing)*2);
}

.message-clip-container.open-graph h1, .message-clip-container.open-graph p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 calc(var(--spacing)*2);
}

.message-clip-container.open-graph h1 {
    font-size: 1em;
}

.message-clip-container.open-graph p {
    font-size: .8em;
    opacity: .75;
}

.message-clip-container.open-graph p.open-graph-source {
    margin-top: var(--spacing);
    font-size: .5em;
    opacity: .5;
}

.message-clip-container.open-graph img {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
}

.message-unread {
    position: absolute;
    right: -1em;
    font-size: .5em;
    bottom: 0;
}

.message-container.user-message .message-unread {
    /* It should appear to the left of the right-aligned user messages */
    left: -1em;
}

.message-unread::before {
    content: attr(data-count);
    color: white;
}

.message-unread[data-count="0"] {
    display: none;
}

.message-quote:not(:empty)::before, .message-quote:not(:empty)::after {
    font-size: 2em;
    top: 50%;
    transform: translateY(-50%);
}

.message-quote:not(:empty)::before {
    content: open-quote;
    left: calc(var(--spacing) * -1);
}

.message-quote:not(:empty)::after {
    content: close-quote;
    right: calc(var(--spacing) * -1);
}

.message-quote .message-media-container {
    filter: grayscale(.5);
}

.message-content-container {
    display: flex;
    flex-wrap: wrap;
    max-height: calc(20 * var(--font-height));
    justify-content: center;
}

.message-content-container.text-only-message {
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 2) 0 calc(var(--spacing) * 2);
    display: block;
}

.file-icon.loading::before, .file-icon.tap-to-load::before {
    font-size: 2em;
    display: block;
}

.file-icon.loading::before {
    content: '📄';
}

.file-icon.tap-to-load::before {
    content: '↻';
}

.message-media-container {
    /* All message media containers (with both preview before sending and sent/received messges */
    display: flex;
    overflow: scroll;
    max-width: 100%;
    min-width: 33%;
    flex: 1;
}

.file-preview-container .message-media-container {
    /* Preview before sending */
    /* Make width same as file-preview-container height (so it's square) */
    width: 4em;
    max-width: 4em;
}

.message-media-container>* {
    object-fit: cover;
    overflow: hidden;
}

/*** COMPOSE MESSAGE AREA ***/

.compose-message-area {
    width: 100%;
    display: flex;
    /* Have everything rest on the bottom of the div (as the textarea grows)*/
    align-items: flex-end;
    /* Make a little room from the bottom of the screen */
    padding-bottom: calc(var(--spacing) * 2);

    /* Try separating the compose area from the flow of the page so we have a translucent/blurry overlay that the messages can pass under */
    position: absolute;
    bottom: 0;
    left: 0;
    backdrop-filter: blur(3px);
    border-radius: var(--radius) var(--radius) 0 0;
}

.compose-message-area form {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    /* Break usual padding to use more real estate at the bottom of the screen */
    padding-left: 0;
    padding-right: 0;
}

.compose-message-area form>* {
    margin: initial;
}

.compose-message-area form>*:not(:last-child) {
    margin-right: var(--spacing);
}

.compose-message-area button {
    border: none;
}

.compose-message-area textarea, .compose-message-area button, .compose-message-area input {
    /* height: var(--input-height); */
    min-height: calc(var(--input-height) + 25px);
    height: calc(var(--input-height) + 25px);
}

.compose-message-area textarea {
    width: 100%;
    padding-top: var(--spacing);
    padding-bottom: 0;
    max-height: calc(4 * var(--font-height));
}

.compose-message-area button {
    width: var(--input-height);
}

.compose-message-area button, .compose-message-area input {
    /* Break usual font size--Essentially the text here is graphics, not text */
    font-size: 1.5rem;
}

.compose-message-area button, .compose-message-area input[type="file"]::before, .file-preview-container>* {
    /* Center text & icons */
    display: flex;
    justify-content: center;
    align-items: center;
}

.compose-message-area input[type="file"] {
    width: var(--input-height);
    /* Make a square */
    border: none;
}

.compose-message-area input[type="file"]::before {
    content: '+';
    width: 100%;
    height: 100%;
}

.compose-message-area input[type="file"].files-selected::before {
    transform: rotateZ(45deg);
}

.compose-message-area input[type="file"]::-webkit-file-upload-button {
    /* Get rid of default file input style */
    visibility: hidden;
}

.file-preview-container {
    display: flex;
    overflow: scroll;
    height: 4em;
    width: 100%;
}

.file-preview-container>* {
    /* height: 100%; */
    /* width: fit-content; */
    /* BG color same as textarea */
    background-color: rgb(44, 44, 44);
    border: solid 1px rgb(44, 44, 44);
    box-shadow: 0 0 2px black;
}

.file-preview-container>*:not(:last-child) {
    border-right: none;
}

.file-preview-container>*::before {
    content: attr(data-order);
    color: white;
    /* background-color: white; */
    /* border-radius: 1000px; */
    /* width: fit-content; */
    /* height: fit-content; */
    /* text-align: center; */
    position: absolute;
    top: calc(var(--spacing) / 2);
    left: var(--spacing);
    /* transform: translateX(-50%); */
    z-index: 1;

    /* font-weight: 900; */

    text-shadow: 0 0 2px black;
}

.file-preview-container>*>* {
    /* height: 100%; */
}

.file-preview-container:not(:empty)~textarea, .file-preview-container:empty {
    display: none;
}

/*** ADD / REJECT CONTACT AREA ***/

.user:not(.pending-contact) .add-reject-contact-area {
    display: none;
}

.code-container {
    display: flex;
    justify-content: space-between;
}

/*** MODAL STYLES ***/

.modal {
    position: fixed;
    top: 0;
    left: 0;
    padding: 60px;
    /* thicc padding */
    margin: var(--spacing);
    width: 100%;
    max-width: calc(100% - 20px);
    overflow: hidden;
    background-color: black;
    color: white;
    border-radius: var(--radius);
    z-index: 1000;
    animation: pop-in var(--animation-speed-mid) var(--animation-curve) both;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.modal>* {
    animation: fade-in var(--animation-speed-mid) var(--animation-speed-mid) var(--animation-curve) both;
    margin: var(--spacing);
    max-width: 100%;
}

.share-modal {
    height: calc(100% - var(--spacing) * 2);
    justify-content: space-between;
    text-align: center;
}

.share-modal>div {
    border-top: solid 1px var(--text-color);
    width: 100%;
    padding: 1em 0 calc(var(--spacing) * 2) 0;
}

.share-modal>div>h1 {
    background-color: var(--background-color);
    position: absolute;
    top: 0;
    left: 50%;
    font-size: .5em;
    padding: 0 var(--spacing);
    transform: translate(-50%, -50%);
}

.share-modal input, .share-modal button {
    height: 4rem;
    text-align: inherit;
}

.share-modal .code-container input {
    width: 1.2rem;
    margin: 5px;
    border-radius: 0;
}

.share-link::after {
    content: '⤴';
    display: inline;
    margin-left: var(--spacing);
}

.modal~* {

    z-index: 0;
}

.modal~.modal {
    z-index: 900;
}

/* De-emphasize everything "behind" the modal except their containers */
.modal~*>* {
    opacity: .2 !important;
    /* override animations, etc. */
}

.modal .close-button {
    position: absolute;
    top: var(--spacing);
    right: var(--spacing);
    border-radius: 13px;
    width: 3rem;
    height: 3rem;
}

/*** NOTIFICATION STYLES ***/

.notification {
    position: fixed;
    bottom: 0px;
    width: 100vw;
    padding: var(--spacing);
    background-color: darkseagreen;
    z-index: 9999;
    height: auto;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, .3);
    text-align: center;

    font-size: .75em;

    display: flex;
    justify-content: center;
    align-items: center;
}

#connected-text, #disconnected-text, #permanent-disconnection-button {
    position: absolute;
    color: var(--text-color);
}

#connected-text::before, #disconnected-text::before {
    content: '';
    display: inline-block;
    border: 1px solid rgb(46, 46, 46);
    border-radius: 50%;
    border-top: 1px solid var(--text-color);
    width: 1em;
    height: 1em;
    position: absolute;
    left: calc(-1em - var(--spacing));
    top: .25em;
    animation: spin 1s linear infinite;
}

#connection-status {
    /* Translate off screen */
    transform: translateY(100%);
    padding: 1em;
    background-color: var(--background-color);
    height: calc(var(--spacing) * 2 + 1em);
}

#body {
    /* Body is location of background image */
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    overflow: scroll;
    /* NO x-axis scrolling */
    overflow-x: hidden;
}

#body:not(.user) #connection-status {
    /* Non-users have no socket connection */
    display: none;
}

#body.permanent-disconnection #connection-status {
    background-color: red;
}

#body:not(.disconnected) #disconnected-text, #body:not(.disconnected) #disconnected, #body.disconnected #connected-text {
    opacity: 0;
}

#body:not(.permanent-disconnection) #permanent-disconnection-button {
    opacity: 0;
    display: none;
}

#body.disconnected #connection-status>* {
    transition-delay: var(--animation-speed-mid);
    opacity: 1;
}

/*#body.disconnected #connection-status,*/
#body.permanent-disconnection #connection-status {
    /* Un-translate back on screen */
    transform: translateY(0%);
}

#body:not(.disconnected) #connection-status {
    transition-delay: var(--animation-speed-mid);
}

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

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

@keyframes pop-in {
    0% {
        transform: scale(0);
    }

    25% {
        transform: scale(1.1);
    }

    50% {
        transform: scale(.99);
    }

    100% {
        transform: scale(1);
    }
}

.fade-out {
    animation: fade-in var(--animation-speed-short) reverse both;
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes expand-from-center {
    0% {
        transform: scale(0, 1);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes expand-to-fullscreen {
    0% {
        transform: rotateX(20deg) translateY(-50%) translateZ(-200px) scale(0);
        transform-origin: bottom;
    }

    25% {
        transform: rotateX(10deg) translateY(0) translateZ(-100px) scale(1);
        animation-timing-function: ease-out;
    }

    100% {
        transform: rotateX(0deg) translateY(0) translateZ(0) scale(1);
    }
}

@keyframes slide-down-for-message {
    0% {
        transform: translateY(calc(-1 * var(--font-height)));
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes slide-up-for-message {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(-1 * var(--font-height)));
    }
}


@keyframes slide-down-for-profile {
    0% {
        transform: translateY(calc(-1 * var(--options-area-height)));
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes slide-up-for-profile {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(-1 * var(--options-area-height)));
    }
}

@keyframes slide-down-for-message-area {
    0% {
        transform: translateY(calc(-1 * (100vh - var(--font-height))));
    }

    100% {
        transform: translateY(0);
    }
}

.bounce {
    animation: bounce var(--animation-speed-long) var(--animation-curve);
}

@keyframes bounce {
    0% {
        transform: scale(1);
    }

    75% {
        transform: scale(.975);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes interact-wiggle {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(.98);
    }

    95% {
        transform: scale(1.01);
    }

    100% {
        transform: scale(1);
    }
}

/* Change (shrink) the border radius of the header element once the element below it has transform animated up under it to hide any gaps */
@keyframes close-border-radius {
    0% {
        border-radius: inherit;
    }

    50% {
        border-radius: var(--radius);
    }

    100% {
        border-radius: var(--radius);
    }
}

/* ADDITIONAL INPUT STYLES */

form {
    display: flex;
    flex-direction: column;
    padding: var(--spacing);
    max-width: 100%;
}

form>* {
    /* Space every first child that follows something to have a top margin */
    margin-top: 1em;
}

input:invalid,
input.invalid {
    border-color: red;
}

form label {
    font-family: system-ui, sans-serif;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.1;
    white-space: nowrap;
}

input {
    font-size: 1em;
    max-width: 100%;
}

input:not([type="checkbox"]):not([type="color"]) {
    padding: 10px 10px 5px 10px;
}

input:not([type="checkbox"])::placeholder {
    opacity: 0;
}

/* ".form-input-line input" refers to inputs (some of) which are too short to contain text (in the credit card subscription form) */
input:not([type="checkbox"]):not(:placeholder-shown)+label, input:not([type="checkbox"]):placeholder-shown:focus+label, .form-input-line input+label, .form-input-line input+label {
    transform: translate(10px, -1.4em) scale(.5);
}

.input-container label {
    position: absolute;
    opacity: 50%;
    z-index: 100;
    left: 0px;
    bottom: 10px;
    transform: translate(10px, 0) scale(1);
    transform-origin: left;
    pointer-events: none;
    font-weight: normal;
}

form .checkbox-container label {
    margin-left: var(--spacing);
}

input[type="checkbox"] {
    /* Add if not using autoprefixer */
    -webkit-appearance: none;
    appearance: none;
    /* For iOS < 15 to remove gradient background */
    background-color: #fff;
    /* Not removed via appearance */
    margin: 0;

    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);

    display: grid;
    place-content: center;

    float: left;
}

input[type="checkbox"]::before {
    content: "";
    width: 0.65em;
    height: 0.65em;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    /* box-shadow: inset 1em 1em var(--form-control-color);*/
    box-shadow: inset 1em 1em purple;

    /* Windows High Contrast Mode */
    background-color: CanvasText;

    /* transform-origin: bottom left; */
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
    transform: scale(1);
}

input[type="checkbox"]:focus {
    outline: max(2px, 0.15em) solid currentColor;
    outline-offset: max(2px, 0.15em);
}

.hidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}

.checkbox-container+.checkbox-container {
    margin-top: 1em;
}

.scrollable-text {
    max-height: 6em;
    overflow: scroll;
    border: 1px solid;
    margin-bottom: 1em;
    font-size: .5em;
}

/* Styles for agreements (privacy policy, etc.) */
.agreement h2 {
    font-size: 1em;
}

.agreement .page-title {
    text-align: center;
    font-weight: bold;
}

.agreement>* {
    margin-top: var(--spacing);
}

/******* SETTINGS PAGE *********/
/* Settings page allows you to update custom assets */
.has-custom-image {
    color: var(--accent-color);
}

/******* VISIBILITY TOGGLE ********/
/* Toggle is closed by default and gains an "open" class when toggled open */
.visibility-toggle::after {
    content: '▼';
}

.visibility-toggle.open::after {
    content: '▲';
}

/******* ELEMENTS THAT SHOULD ONLY APPEAR TO CERTAIN USERS *******/

#body:not(.user) .user-only {
    /* Hide things from non-user (not logged in) that are for users */
    display: none;
}

#body.user .not-user {
    /* Hide things from user that are for non-users (not logged in) */
    display: none;
}



.apps-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.apps-container>* {
    margin: 30px 0;
}

.icon-container {
    /* A white aura */
    filter: drop-shadow(0px 0px var(--spacing) rgba(255, 255, 255, .5));
}

.icon {
    /* Style icon using squircle */
    -webkit-mask-image: url(/resource/img/squircle.svg);
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;

    mask-image: url(/resource/img/squircle.svg);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;

    max-width: 100%;
    width: 150px;
}