:root {
    --background-color: #7194d1;
    --link-color: #3d67af;
    --div-color: #cbced3;
    --box-shadow-color: rgb(0, 0, 0, 0.25);
    --button-color: #f1f1f1;
    --mid-dark-color: #999a9e;
    --button-disabled-color: #484c50;
    --button-confirm-color: #157b15;
    --button-cancel-color: #d82121;
    font-family: 'Courier New', Courier, monospace;
}
.select_none {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Standard syntax */
}
body {
    background-color: var(--background-color);
    text-align: center;
}
a {
    color: var(--link-color);
}
#workspace {
    display: flex;
    justify-content: center;
    margin:auto;
}
#workspace > div {
    background-color: var(--div-color);
    box-shadow: 5px 10px var(--box-shadow-color);
    border-radius: var(--border-radius);
}
#welcome {
    background-color: var(--button-color);
    box-shadow: 5px 10px var(--box-shadow-color);
    border-radius: var(--border-radius);
    margin:auto;
    text-align: left;
}
#controls_position {
    position: relative;
    width: 0;
    height: 0;
}
.controls_container {
    position: absolute;
}
.controls {
    background-color: var(--box-shadow-color);
    border-radius: var(--border-radius);
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: auto; 
    width: fit-content;
}
.controls > div > button, .controls > button {
    box-shadow: 0.20px 5px var(--box-shadow-color);
    cursor: pointer;
}
#canvas_area {
    display: flex;
    flex-direction: column;
    height:100%;
}
#canvas_area > div > button {
    margin: 0;
}
#canvas_container {
    border-radius: var(--border-radius);
    background-color: var(--button-color);
    margin: auto;
}
#canvas_container > canvas {
    border-radius: var(--border-radius);
}
button, input {
    background-color: var(--button-color);
    border:none;
    text-align: center;
    vertical-align: middle;
    border-radius: var(--border-radius);
}
button:disabled {
    background-color: var(--button-disabled-color);
}
.color {
    border-radius: 50%;
    width: 3em;
    height: 3em;
}
.extrude:not(:disabled) {
    transition: box-shadow 0.1s;
    transition: transform 0.1s;
    cursor: pointer;
    box-shadow: 1px 2px var(--box-shadow-color);
}
.extrude:hover:not(:disabled) {
    transform: translateY(-5px);
    box-shadow: 1px 5px var(--box-shadow-color);
}
#elements {
    display:flex;
    flex-grow:1;
    overflow: hidden;
}
.element > div {
    display:grid;
}
.element > .options > .image {
    grid-area: image;
}
.element > button, .options > button, .side > button {
    border-radius: 0;
}
.element > .side {
    display:flex;
}
.element > .side > button {
    flex-grow: 1;
}

.icon {
    width: 3em;
    height: 3em;
}
.image > img {
    width: 7em;
    height: 7em;
}
.tiny_icon {
    width: 2em;
    height: 2em;
}
#color_preview {
    width: 7em;
    height: 3em;
    margin: auto;
    border-radius: var(--border-radius);
}
#bottom_controls {
    flex-grow:1;
    display: flex;
}
#bottom_controls > button {
    flex-grow:1;
}
input[type="range"] {
    -webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
  
    transition: box-shadow 0.1s;
    transition: transform 0.1s;
    box-shadow: 1px 2px var(--box-shadow-color);
}
input[type="range"]::-moz-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb:hover {
    transform: translateY(-5px);
    box-shadow: 1px 5px var(--box-shadow-color);
}

#popup {
    position:fixed;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
}
#maker_url {
    width: 100%;
}
#popup > div {
    max-height: 100%;
    overflow: hidden;
    background-color: var(--div-color);
    border-radius: var(--border-radius);
    box-shadow: 10px 20px var(--box-shadow-color);
    margin:auto;
}
#selectable_elements {
    max-height: 80vh;
    overflow-y: auto;
}
#selectable_elements > canvas {
    border-radius: var(--border-radius);
}
.prev {
    content: var(--prev-image);
}
.next {
    content: var(--next-image);
}
div > ::-webkit-scrollbar {
    width: calc(var(--border-radius)*1.5);
    height: calc(var(--border-radius)*1.5);
}
div > ::-webkit-scrollbar-thumb {
    border-radius: var(--border-radius);
    background: var(--mid-dark-color);
}

@media (min-aspect-ratio: 5/3) {
    #workspace {
        max-width: 70vw;
    }
}

@media (min-aspect-ratio: 2/1) {
    #workspace {
        max-width: 60vw;
    }
}

@media (min-aspect-ratio: 1) {
    :root {
        --border-radius: 1vh;
        --prev-image: url("assets/up.png");
        --next-image: url("assets/down.png");
    }
    h1 {
        margin-top: 0;
        margin-bottom: 1vh;
    }
    h2 {
        font-size: 2em;
        margin-top: 0.5vh;
        margin-bottom: 0.5vh;
    }
    button, input {
        margin: 0.4vh;
        padding: 0.2vh;
    }
    input[type="range"] {
        width: 50vh;
        height: 3vh;
    }
    input[type="range"]::-webkit-slider-thumb {
        border: 0.5vh solid var(--button-color);
        width: 3vh;
        height: 3vh;
    }
    input[type="range"]::-moz-slider-thumb {
        border: 0.5vh solid var(--button-color);
        width: 3vh;
        height: 3vh;
    }
    .controls {
        padding: 1vh;
    }
    textarea {
        width: 60vw;
        resize: none;
    }
    #workspace {
        height: 83vh;
    }
    #workspace > div {
        margin: 2vh;
        padding: 1vh;
    }
    #canvas {
        max-width: 80vh;
    }
    #canvas_area > div > button {
        margin-top: 1vh;
    }
    #canvas_area > div > button:not(:first-child) {
        margin-left: 1vh;
    }
    #canvas_container, #canvas_container > canvas {
        height: 70vh;
    }
    .controls_container {
        height: 70vh;
    }
    .selected {
        border:0.5vh solid var(--button-confirm-color);
    }
    #elements {
        flex-direction: column;
        overflow-y: auto;
    }
    #pack_confirmation_img {
        height: 50vh;
    }
    #selectable_elements > canvas {
        width:25vh;
        margin:2vh;
    }
    #popup > div, #welcome { 
        max-width: 60vw;
        padding: 5vh;
    }
    .element {
        /* margin-bottom: 0.5vh; */
        display:flex;
        flex-direction: row;
    }
    .element > .options {
        flex-grow: 1;
        grid-template-areas: 
        'image image image . .'
        'image image image . .';
    }
    .options > button, .element > button, .add_element {
        margin-bottom: 0;
        margin-top: 0.8vh;
    }
    .element > .side {
        flex-direction: column;
    }
    .side > :first-child {
        margin-top: 0.8vh;
    }
    .side > :last-child {
        margin-bottom: 0;
    }
    .element.flex > .options {
        display:flex;
    }
    .element.flex > .options > button {
        flex-grow: 1;
    }
    .element > :first-child {
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
    }
    .options:first-child > :first-child {
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
    }
    .singular > .options > :last-child,
    .dual > .options > :nth-child(2), 
    .tri > .options > :nth-child(2),  
    .quad > .options > :nth-child(3), 
    .sept > .options > :nth-child(3), 
    .multi > .options > :nth-child(3) {
        border-top-right-radius: var(--border-radius);
    }
    .options > :last-child {
        border-bottom-right-radius: var(--border-radius);
    }
    .side > :first-child {
        border-top-left-radius: var(--border-radius);
    }
    .side > :last-child {
        border-bottom-left-radius: var(--border-radius);
    }
    .element.singular > .options {
        grid-template-areas: 'image';
    }
    .element.dual > .options {
        grid-template-areas: 'image .';
    }
    .element.tri > .options {
        grid-template-areas: 
        'image .'
        'image .';
    }
    .element.sept > .options {
        grid-template-areas: 
        'image image . . .'
        'image image . . .';
    }
    .element.multi > .options {
        grid-template-areas: 
        'image image . . .'
        'image image . . .'
        'image image . . .';
    }
    .inset_element {
        padding-left: 1.8vh;
        margin-left: 1.7vh;
        margin-bottom: 1vh;
    }
    .add_element {
        width: calc(100% - 1vh);
        padding: 0;
    }
}
@media (max-aspect-ratio: 1) {
    :root {
        --border-radius: 1vw;
        line-height: 1;
        --prev-image: url("assets/left.png");
        --next-image: url("assets/right.png");
    }
    @media(min-aspect-ratio: 0.6) {
        #canvas_container, #canvas_container > canvas, #pack_confirmation_img, .controls_container {
            width: 50vw;
        }
        button, input {
            margin: 0.4vh;
            padding: 0.25vh;
        }
        .inset_element {
            padding-bottom: 2.8vh;
            margin-bottom: 1vw;
            margin-right: 1vw;
        }
        input[type="range"] {
            width: 50vw;
            height: 2em;
        }
        input[type="range"]::-webkit-slider-thumb {
            border: 0.5vh solid var(--button-color);
            width: 2em;
            height: 2em;
        }
        input[type="range"]::-moz-slider-thumb {
            border: 0.5vh solid var(--button-color);
            width: 2em;
            height: 2em;
        }
    }
    @media(max-aspect-ratio: 0.6) {
        .icon {
            width: 10vw;
            height: 10vw;
        }
        .image > img {
            width: 15vw;
            height: 15vw;
        }
        .tiny_icon {
            width: 4vw;
            height: 4vw;
        }
        input[type="range"] {
            width: 50vw;
            height: 10vw;
        }
        input[type="range"]::-webkit-slider-thumb {
            border: 0.5vh solid var(--button-color);
            width: 10vw;
            height: 10vw;
        }
        input[type="range"]::-moz-slider-thumb {
            border: 0.5vh solid var(--button-color);
            width: 10vw;
            height: 10vw;
        }
        .controls_container, #canvas_container, #canvas_container > canvas {
            max-width: 88vw;
            max-height: 50vh;
        }
        .controls_container {
            width: 88vw;
        }
        #pack_confirmation_img {
            width: 88vw;
        }
        button, input {
            margin: 0.8vw;
            padding: 0.5vw;
        }
        .inset_element {
            padding-bottom: 1vw;
            margin-bottom: 1vw;
            margin-right: 1vw;
        }
    }
    h1 {
        margin-top: 0;
        margin-bottom: 1vw;
    }
    textarea {
        width: 90vw;
        resize: none;
    }
    a {
        font-size: 2vw;
    }
    .controls {
        padding: 1vw;
    }
    #workspace {
        flex-direction: column;
    }
    #workspace > div {
        margin-left: 2vw;
        margin-right: 2vw;
        margin-top: 1vw;
        margin-bottom: 1vw;
        padding: 1vw;
    }
    #elements {
        overflow-x: auto;
        height:30vh;
    }
    #selectable_elements > canvas {
        width:25vw;
        margin:2vw;
    }
    #popup > div, #welcome { 
        padding: 5vw;
    }
    .selected {
        border:0.5vw solid var(--button-confirm-color);
    }
    .element {
        /* margin-right: 1vw; */
        display:flex;
        flex-direction: column-reverse;
    }
    .element > .options {
        flex-grow: 1;
        grid-template-areas: 
        'image image image image'
        '. . . .';
    }
    .element.flex > .options {
        display:flex;
        flex-direction: column;
    }
    .element.singular > .options {
        grid-template-areas: 'image';
    }
    .element.dual > .options {
        grid-template-areas: 
        'image'
        '.';
    }
    .element.tri > .options {
        grid-template-areas: 
        'image image'
        '. .';
    }
    .element > :first-child {
        border-bottom-left-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
    .side:first-child > :first-child {
        border-bottom-left-radius: var(--border-radius);
    }
    .side:first-child > :last-child {
        border-bottom-right-radius: var(--border-radius);
    }
    .options > :first-child {
        border-top-left-radius: var(--border-radius);
        border-top-right-radius: var(--border-radius);
    }
    .singular > .options:first-child > :last-child,
    .dual > .options:first-child > :nth-child(2), 
    .tri > .options:first-child > :nth-child(2), 
    .quad > .options:first-child > :nth-child(3), 
    .sept > .options:first-child > :nth-child(3), 
    .multi > .options:first-child > :nth-child(3) {
        border-bottom-left-radius: var(--border-radius);
    }
    .options:first-child > :last-child {
        border-bottom-right-radius: var(--border-radius);
    }
    /* .element.sept > .options, .element.multi > .options {
        grid-template-areas: 
        'image image image'
        '. . .';
    } */
    .element > .side {
        display:flex;
        flex-direction: row;
    }
    .element > .side > button {
        flex-grow: 1;
    }
    .element_children {
        display:flex;
    }
    #canvas_area > div > button {
        margin-top: 1vw;
    }
    #canvas_area > div > button:not(:first-child) {
        margin-left: 1vw;
    }
}