:root {
    --color-purple: #b215f5;
    --color-blue: #008080;
    --color-blue-light: #71cfe5;
    --color-gray-dark: #3f3f3f;
    --color-gray-medium: #808080;
    --color-gray-light: #c0c0c0;
    --color-gray-lighter: #dfdfdf;
    --color-gray-lightest: #f5f5f5;
    --color-white: #ffffff;
    --color-black: #000000;
    --color-overlay-background: rgba(0, 0, 0, 0.5);
    --font-family-headings: 'Roboto Mono';
    --font-family-text: 'Roboto Mono';
    --font-family-strong: 'Roboto Mono';
    --font-family-icons: 'Material Icons Outlined';
    --shadow-default: rgba(0, 0, 0, 0.25) 3px 3px 0px 0px;
    --scrollbar-background-color: var(--color-gray-lightest);
    --scrollbar-thumb-color: var(--color-black);
}

*, *:before, *:after {
    box-sizing: border-box;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background-color: var(--scrollbar-background-color);
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb-color);
    border-radius: 0;
    border: 2px solid var(--scrollbar-background-color);
}

html {
    font-size: 14px;
}

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--color-gray-lighter);
    font-family: var(--font-family-text);
    position: relative;
}

nav {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 2rem;
    align-items: center;
    padding: 2rem;
    user-select: none;
}

a {
    color: var(--color-purple); /*#151df5 - #9915f5 - #b215f5*/
}

nav a.current {
    color: var(--color-black);
    text-decoration: none;
    pointer-events: none;
}

nav a.current-active {
    color: var(--color-black);
}

small {
    font-size: 0.875rem;
    background-color: var(--color-gray-light);
    color: var(--color-white);
}

.block {
    display: block;
    position: absolute;
    cursor: move;
    border: 2px solid var(--color-black);
    /*transition: box-shadow 0.2s;*/
    user-select: none;
    touch-action: none;
    z-index: 0;
    line-height: 1.5;
    min-width: 300px;
}

.block:hover, .block.selected {
    box-shadow: var(--shadow-default); /*#00000040 4px 4px 4px 0px*/
}

.block img {
    display: block;
    max-width: 100%;
    height: auto;
}

.block-youtube, .block-vimeo {
    background-color: #000;
}

.block-video-inner {
    aspect-ratio: 4/3;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-video-iframe {
    width: 100%;
    height: 80%;
}

.block-video-large-handle {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.block.dragging .block-video-large-handle {
    display: block;
}

.block .credits {
    position: absolute;
    bottom: 0;
    right: 0;
    text-align: right;
    display: none;
    font-size: 0.75rem;
    color: var(--color-black);
    background-color: var(--color-white);
    padding: 0.125rem 0.25rem 0 0.25rem;
}

.block, .block .credits {
    text-decoration: none;
}

.block:hover .credits, .block.selected .credits {
    display: block;
}

@media (hover: none) { /*credits always visible on touch screens*/
    .block .credits {
        display: block;
    }
}

.block [data-resize] {
    position: absolute;
    width: 2rem;
    height: 2rem;
    display: none;
    /*background-color: var(--color-blue-light);*/
    z-index: 1;
}

.block:hover [data-resize] {
    display: block;
}

@media (hover: none) {
    .block [data-resize] {
        display: block;
    }
}

.block [data-resize="bottom-right"] {
    bottom: 0;
    right: 0;
    cursor: se-resize;
}

.block [data-resize="top-right"] {
    top: 0;
    right: 0;
    cursor: ne-resize;
}

.block [data-resize="top-left"] {
    top: 0;
    left: 0;
    cursor: nw-resize;
}

.block [data-resize="bottom-left"] {
    bottom: 0;
    left: 0;
    cursor: sw-resize;
}

.block [data-select] {
    position: absolute;
    width: 2rem;
    height: 2rem;
    display: none;
    z-index: 0;
    --select-distance: -1rem;
}

.block [data-select="bottom-right"] {
    bottom: var(--select-distance);
    right: var(--select-distance);
    border-bottom: 2px solid var(--color-black);
    border-right: 2px solid var(--color-black);
}

.block [data-select="top-right"] {
    top: var(--select-distance);
    right: var(--select-distance);
    border-top: 2px solid var(--color-black);
    border-right: 2px solid var(--color-black);
}

.block [data-select="top-left"] {
    top: var(--select-distance);
    left: var(--select-distance);
    border-top: 2px solid var(--color-black);
    border-left: 2px solid var(--color-black);
}

.block [data-select="bottom-left"] {
    bottom: var(--select-distance);
    left: var(--select-distance);
    border-bottom: 2px solid var(--color-black);
    border-left: 2px solid var(--color-black);
}

.block.selected [data-select] {
    display: block;
}

.block-html {
    background-color: #ffffff;
    height: 40rem;
}

.block-html-inner {
    padding: 2rem;
    word-wrap: break-word;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

h1, h2, h3 {
    margin: 1.75rem 0;
}

h1:first-child, h2:first-child, h3:first-child {
    margin-top: 0;
}

/*hide extra line breaks*/

.block-html-inner :is(h1, h2, h3) + br {
    display: none;
}

.block-html-inner :is(h1, h2, h3) + br + br {
    display: none;
}

.block-html-inner :is(h1, h2, h3) + br + br + br {
    display: none;
}


@media (max-width: 700px) {
    html, body {
        height: auto;
        overflow: auto;
    }
    body {
        padding: 5.5rem /*nav height*/ 1rem 1rem 1rem;
        display: flex;
        flex-direction: column-reverse;
        gap: 1rem;
    }
    .block {
        position: relative;
        width: 100% !important;
        top: 0 !important;
        left: 0 !important;
        cursor: unset;
        user-select: unset;
        touch-action: unset;
        z-index: unset;
        min-width: unset;
    }
    .block-youtube, .block-vimeo {
        order: -1; /*videos appear last*/
    }
    a.block {
        cursor: pointer;
    }
    .block .credits {
        position: static;
        display: block;
    }
    .block [data-resize] {
        display: none !important;
    }
    .block [data-select] {
        display: none !important;
    }
    .block-html {
        height: auto;
    }
    .block-html-inner {
        max-height: none;
        overflow-x: unset;
        overflow-y: unset;
    }
}