@font-face {
    src: url(libertinus_sans.otf);
    font-family: libertinus_sans;
}

@font-face {
    src: url(libertinus_mono.otf);
    font-family: libertinus_mono;
}

body {
    margin: 0;
    padding: 0;
    background-color: #2e2e5e;
    color: white;
    
    font-family: libertinus_sans, sans-serif;
    overflow-x: hidden;

    height: 100vh;
}

h1, h2 {
    font-variant: small-caps;
    text-align: center;
    margin: 0.3em 0;
}

h1 {
    font-size: 48px;
}

h2 {
    font-size: 40px;
}


/* X-button formatting */


.x_button {
    position: absolute;
    right: 0;
    top: 0;

    margin: 0.5em;

    width: 24px;
    height: 24px;

    cursor: pointer;
}

.x_button::before, .x_button::after {
    content: "";
    background: #ff0000;
    transition: 0.125s background ease;

    display: block;
    position: absolute;

    width: 20px;
    height: 4px;

    left: 1.5px;
    top: 9.5px;
}

.x_button::before {
    transform: rotate(45deg);
}

.x_button::after {
    transform: rotate(135deg);
}

.x_button:hover::before, .x_button:hover::after {
    background: #c80000;
}

.x_button:active::before, .x_button:active::after {
    background: #b80000;
}


/* Meme list formatting */

#meme_list_resizer {
    position: fixed;
    width: 100%;
    height: var(--mrh);
    bottom: var(--mlh);

    cursor: row-resize;

    background: #484885;
    transition: 0.125s background ease;
}

#meme_list_resizer::after {
    position: absolute;
    top: calc(0px - var(--mrh));
    left: calc(50% - (2 * var(--mrh)));

    content: "";

    height: calc(2 * var(--mrh));
    width: calc(8 * var(--mrh));

    border-top-left-radius: 4px;
    border-top-right-radius: 4px;

    background: #484885;
    transition: 0.125s background ease;
}

#meme_list_resizer:hover, #meme_list_resizer:hover::after {
    background: #5555a0;
}

#meme_list_resizer:active, #meme_list_resizer:active::after {
    background: #5d5da9;
}

#meme_list_container {
    position: fixed;
    bottom: 0;
    
    padding: 0;

    width: 100vw;
    height: var(--mlh);
}

#ul_container {
    display: block;
    float: left;

    width: calc(100% - var(--mliw));
    height: 100%;

    overflow-x: scroll;
}

#meme_list {
    background: #373774;

    min-width: 100%;
    width: max-content;
    height: 100%;
    padding: 0;

    margin: 0;
}

#new_meme_button, #meme_list li {
    width: var(--mliw);
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
    float: left;

    transition: 0.125s background ease, 0.125s filter ease, 0.125s background-size ease;
    position: relative;
    cursor: pointer;

    overflow: hidden;

    background: var(--image);
    background-size: var(--mliw);
    background-position: center;

    font-size: 1.25em;
    text-shadow: 2px 2px #000000;
    word-wrap: break-word;
}

#new_meme_button {
    background: #ffffff;
}

#new_meme_button:hover {
    background: #f0f0f0;
}

#new_meme_button:active {
    background: #e0e0e0;
}

#meme_list li:hover {
    filter: brightness(0.925);
    background-size: calc(var(--mliw) * 1.1);
}

#meme_list li:active {
    filter: brightness(0.825);
}

/* PLUS button */
#new_meme_button::before, #new_meme_button::after {
    content: "";
    position: absolute;
    background: #00d000;
}
#new_meme_button::before {
    top: 50%;
    left: 50%;
    width: 4px;
    height: 20px;
    margin-top: -10px;
    margin-left: -2px;
}
#new_meme_button::after {
    top: 50%;
    left: 50%;
    width: 20px;
    height: 4px;
    margin-top: -2px;
    margin-left: -10px;
}


/* New meme form formatting */


#new_meme_form {
    margin: 0 auto;
    position: absolute;
    top: 0;

    display: none;
    align-items: center;
    justify-items: center;

    height: 100vh;
    width: 100vw;

    background: rgba(0, 0, 0, 0.5);
}

#new_meme_form.active {
    display: grid;
}

#new_meme_form h2 {
    align-self: flex-end;
}

form {
    position: relative;

    width: 500px;
    align-self: flex-start;
}

form label {
    margin-left: 0.5em;
    width: 30%;
}

form input[type="radio"] {
    display: none;
}

form input[type="radio"]+label {
    display: inline-block;

    background-color: #6060ff;
    padding: 4px 16px;

    width: calc(33% - 29.333px);

    cursor: pointer;

    text-align: center;

    margin: 0 -4px;
    
    transition: 0.125s background ease;
}

form input[type="radio"]+label:first-of-type {
    margin: 0 0;
}

form input[type="radio"]:checked + label {
    background-color: #7676ff;
}

form input[type="radio"]:not(:checked):hover + label {
    background-color: #7070ff;
}

form input[type="radio"]:not(:checked) + label:active {
    background-color: #8080ff;
}

form input[type="submit"], button {
    all: unset;

    cursor: pointer;

    position: relative;

    background-color: #6060ff;
    padding: 0.5em 1em;
    border-radius: 1em;

    font-family: libertinus_mono, monospace;
    font-size: 13px;

    margin-top: 5px;
    transition: 0.125s background ease;
}

button:disabled {
    background-color: #8080cf;
    color: #c0c0e8;
    cursor: default;
}

form input[type="submit"]:hover, button:hover:not(:disabled) {
    background: #7070ff;
}

form input[type="submit"]:active, button:active:not(:disabled) {
    background: #8080ff;
}

form #template:not(:checked) ~ #template_subform {
    display: none;
}

form #file:not(:checked) ~ #file_subform {
    display: none;
}

form #url:not(:checked) ~ #url_subform {
    display: none;
}

form div {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: #4848e0;
}

form #submit_button {
    height: 3em;
}

input[type="file"] {
    margin: unset;
    padding: unset;
    height: 1.em;
}

#image_template, input[type="url"], input[type="file"] {
    width: 70%;
    padding: 0.25em;
    margin: 0.5em 0;
    margin-right: 0.5em;
}

/* Workspace image (image being edited) */

#workspace {
    display: inline-block;
    position: relative;

    width: calc(100% - var(--sbw));
    height: calc(100% - var(--mlh) - var(--mrh));

    overflow: hidden;
}

#meme_background {
    margin-top: 1em;
    margin-left: 1em;

    display: table;

    position: relative;

    background: var(--image);
    background-repeat: no-repeat;
    background-size: contain;
    
    max-width: calc(100% - 2em);
    max-height: calc(100% - 2em);
}

#meme_background > div {
    position: absolute;
    
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    left: calc((var(--pw) * var(--x)) - ((var(--w) * var(--x)) * (var(--pw))));
    top:  calc((var(--ph) * var(--y)) - ((var(--h) * var(--y)) * (var(--ph))));
    width: calc(var(--w) * var(--pw) - 2px);
    height: calc(var(--h) * var(--ph) - 2px);

    margin: auto;
    
    text-align: center;
    vertical-align: middle;
    word-wrap: break-word;

    border: 1px solid rgba(255, 0, 0, 0.5);
    transition: 0.125s border-color ease;

    transform: rotateZ(var(--rot));

    overflow: hidden;
}

#meme_background > div:hover:not(.active) {
    border: 1px solid rgba(255, 0, 0, 0.75);
    transition: 0.125s border-color ease;
}

#meme_background > div.active {
    border: 1px solid rgba(0, 255, 0, 0.75);
    transition: 0.125s border-color ease;
}

/* sidebar stuff */

#sidebar {
    float: right;
    position: relative;

    width: var(--sbw);
    height: calc(100% - var(--mlh) - var(--mrh));

    background: #373774;

    overflow-y: auto;
}

#sidebar > :first-child {
    margin: 0.5em;
    margin-bottom: 0;
}

#sidebar > :not(:first-child) {
    margin-left: 0.5em;
    margin-right: 0.5em;
}

#meme_name {
    width: calc(100% - 1.5em);
    text-align: center;
    font-size: 24px;
    padding: 5px;
}

#sidebar_buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#sidebar_buttons > :first-child {
    margin-right: 0.25em;
}

#sidebar_buttons > :last-child {
    margin-left: 0.25em;
}

.break {
    flex-basis: 100%;
    height: 0;
}

#box_properties {
    margin: 0px !important;
}

#box_properties > div {
    position: relative;
    height: auto;
    width: calc(100% - 2.5em);
    padding: 0.25em 0.5em;
    padding-left: 2em;
    
    background: #484885;
    transition: 0.125s background ease;

    cursor: pointer;
}

#box_properties > div:hover {
    background: #5555a0;
    transition: 0.125s background ease;
}

#box_properties > div:active, #box_properties > div.active:active {
    background: #5d5da9;
    transition: 0.125s background ease;
}

#box_properties > div::before, #box_properties > div::after {
    content: "";
    position: absolute;

    background: #ffffff;
    width: 16px;
    height: 4px;
    
    top: calc(0.75em - 2px);
    left: 0.5em;
    
    transition: 0.125s height ease;
}

#box_properties > div::after {
    transform: rotateZ(90deg);
}

#box_properties > div.active::after {
    height: 0;
}

#box_properties > div.active {
    background: #5555a0;
}

#box_properties > div:not(.active) > div {
    display: none;
}

#box_properties > div > div {
    background: #484885;
    cursor: default;

    margin-left: -2em;
    margin-right: -0.5em;
    margin-bottom: -0.25em;
    padding: 1em 1em;
}

#box_properties > div > div span.label {
    display: inline-block;
    width: 65px;
}

#box_properties > div > div span:not(.label) {
    margin-right: 1.5em;
}

#box_properties > div:last-child {
    font-style: italic;
}

#box_properties > div div.x_button {
    display: block;
    cursor: pointer;
    background: none;
    padding: 0;

    margin-right: 8px;
    margin-top: -1px;
}

.small_box {
    width: 45px;
}