body {
    margin: 0;
    overflow: hidden;
    user-select: none;
}

h1 {
    font: var(--title-font);
    font-size: 2rem;
    line-height: 2.2rem;
}

hr {
    border: 1px dashed #000;
}

.desktop-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-col);
}

.desktop-container > * {
    font: var(--base-font);
}

.desktop-icon {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    position: absolute;
    padding: 0.5rem;
    border: 1px dashed rgba(255, 255, 255, 0);
    cursor: pointer;
}

.desktop-icon:hover {
    border-color: rgba(255, 255, 255, 0.5);
}

.desktop-icon-intro {
    cursor: auto;
}

.desktop-icon-intro:hover {
    border-color: rgba(255, 255, 255, 0);
}

.desktop-icon-name {
    width: calc(20vh - 1rem);
    margin-top: 0.5rem;
    color: #fff;
    text-align: center;
}

.flicker-in {
    animation: 0.25s flicker-in;
}

.flicker-out {
    animation: 0.25s reverse forwards flicker-out;
}

@keyframes flicker-in {
    0% {
        opacity: 1;
    }

    24.9% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    49.9% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    74.9% {
        opacity: 1;
    }

    75% {
        opacity: 0;
    }

    99.9% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flicker-out {
    0% {
        opacity: 0;
    }

    24.9% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    49.9% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    74.9% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    99.9% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.notepad-icon {
    content: url('../images/notepad-icon.svg');
    width: 3rem;
}

.html-icon {
    content: url('../images/html-icon.png');
    width: 3.25rem;
    margin-bottom: 0.25rem;
    image-rendering: pixelated;
}

.folder-icon {
    content: url('../images/folder-icon.svg');
    width: 4rem;
}

.context-menu {
    display: none;
    position: absolute;
    width: 10rem;
    background-color: var(--base-grey);
    border: 2px solid #000;
    border-color: var(--bevel-col);
    box-shadow: 2px 2px 0 #000;
    z-index: 1000;
}

.context-menu-item {
    padding: 0.25rem 1rem;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #808080;
    cursor: pointer;
}

.context-menu-item::first-letter {
    text-decoration: underline;
}

.context-menu-item:first-child {
    border-top: none;
}

.context-menu-item:last-child {
    border-bottom: none;
}

.context-menu-item:hover {
    color: #fff;
    background-color: var(--selection-col);
}

.context-menu-item-disabled:hover {
    color: #dfdfdf;
    background-color: #808080;
}

.context-menu-item-disabled {
    color: rgba(0, 0, 0, 0.5);
    cursor: auto;
}

.desktop-window, .desktop-alert {
    position: absolute;
    padding: 2px;
    background-color: var(--base-grey);
    border: 2px solid #000;
    border-color: var(--bevel-col);
    box-shadow: 2px 2px 0 #000;
    z-index: 100;
}

.desktop-alert-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 800;
}

.desktop-alert {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 900;
}

.desktop-window-focus {
    z-index: 200;
}

.titlebar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: stretch;
    align-items: center;
    padding: 0 0 0 0.25rem;
    background-color: var(--selection-col);
}

.titlebar-icon {
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 0.25rem 0 0.1rem;
}

.titlebar-icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
}

.window-title {
    flex-grow: 1;
    margin-left: 0.25rem;
    color: #fff;
    font: var(--title-font);
}

.titlebar-quit-icon {
    position: relative;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.2rem;
    box-sizing: border-box;
    background-color: var(--base-grey);
    border: 2px solid #000;
    border-color: var(--bevel-col);
    cursor: pointer;
}

.titlebar-quit-icon:active {
    border-color: var(--bevel-inset-col);
}

.titlebar-quit-icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
}

.menu-bar {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    padding: 0.25rem 0;
}

.menu-bar-item {
    padding: 0 0.25rem;
    margin: 0 0.25rem;
}

.menu-bar-item::first-letter {
    border-bottom: 1px solid #000;
}

.notepad-textarea-container {
    width: 50vw;
    height: 50vh;
    background-color: #fff;
    border: 2px solid #000;
    border-color: var(--bevel-inset-col);
    box-shadow: inset 2px 2px 0 #000;
    overflow: hidden;
}

.notepad-textarea {
    width: 50vw;
    height: 50vh;
    padding: 0.2rem 0.2rem 0.2rem 0.4rem;
    box-sizing: border-box;
    user-select: auto;
    overflow-y: scroll;
}

.notepad-textarea hr {
    width: calc(100% - 0.4rem);
    margin: 0;
}

.hor-fit {
    width: calc(100% - 0.2rem);
    height: auto;
}

.vert-fit {
    width: auto;
    height: 100%;
}

.col-2 {
    display: flex;
    flex-flow: row wrap;
}

.col-2 > * {
    width: 50%;
}

.embed-container {
    width: 50vw;
    height: calc(9 * 50vw / 16);
}

.file-explorer-body {
    width: 50vw;
    height: 50vh;
    background-color: #fff;
}

.file-explorer-icon {
    display: inline-flex;
    flex-flow: column nowrap;
    align-items: center;
    position: relative;
    padding: 0.5rem;
    border: 1px dashed rgba(255, 255, 255, 0);
    cursor: pointer;
}

.file-explorer-icon > .desktop-icon-name {
    color: #000;
    max-width: 4rem;
    word-break: break-all;
}

.button {
    text-align: center;
    border: 2px solid #000;
    border-color: var(--bevel-col);
    box-shadow: 2px 2px 0 #000;
    cursor: pointer;
}

.button:active {
    border-color: var(--bevel-inset-col);
}

.encryption-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: stretch;
    align-items: center;
    padding: 1rem 0;
}

.encryption-icon img {
    width: 3rem;
    margin: 0 2rem 0 1rem;
}

.encryption-input input {
    width: 100%;
    margin-top: 0.5rem;
    padding-left: 0.25rem;
    box-sizing: border-box;
    font: var(--base-font);
    border: 2px solid #000;
    border-color: var(--bevel-inset-col);
    box-shadow: inset 2px 2px 0 #000;
    outline: none;
}

.encryption-confirm .button {
    width: 5rem;
    margin: 0.5rem 2rem;
}

.file-properties-container {
    width: 30vw;
    padding: 1rem;
}

.file-property {
    display: flex;
    justify-content: space-between;
}

.property-name::after {
    content: ':';
}

.file-properties-container .button {
    margin-top: 1rem;
}

.cmd-container {
    width: 50vw;
    height: 50vh;
    padding: 0 2px;
    color: var(--base-grey);
    font: var(--title-font);
    background-color: #000;
    border: 2px solid #000;
    border-color: var(--bevel-inset-col);
    overflow: hidden;
}

.cmd-container-scroll {
    width: calc(100% + 20px);
    height: 50vh;
    word-break: break-all;
    overflow-y: scroll;
}

.cmd-container-scroll::after {
    content: '|';
    animation: infinite 1.25s cmd-cursor-anim;
}

@keyframes cmd-cursor-anim {
    0% {
        content: '|';
    }

    49.9% {
        content: '|';
    }

    50% {
        content: '';
    }

    99.9% {
        content: '';
    }

    100% {
        content: '|';
    }
}

#glitch-canvas {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 3000;
    pointer-events: none;
}

.ransomware-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: stretch;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    color: #fff;
    font: var(--serif-font);
    background-color: #000;
    z-index: 2000;
}

.ransomware-container > div {
    width: 50%;
}

.timer-container {
    width: 100%;
    padding: 0 10vw;
    font-family: 'IBM BIOS';
    text-align: left;
}

.timer-container p {
    margin-bottom: 0;
    font-size: 2rem;
    text-transform: uppercase;
}

.rw-timer {
    color: red;
    font-size: 10vw;
    line-height: 10vw;
}

.rw-info {
    padding: 5vw;
}

.rw-info .step {
    color: red;
    text-decoration: underline;
}

.rw-info .highlight {
    color: red;
    font-weight: 700;
}

.rw-form {
    display: flex;
    flex-flow: column nowrap;
    margin: 10vw;
}

.rw-form > input {
    margin-bottom: 2rem;
    padding: 1rem 0.5rem;
    font-size: 2rem;
    color: #fff;
    font-family: 'IBM BIOS';    
    background: none;
    border: 1px solid red;
    outline: none;
}

.rw-form > input::placeholder {
    color: #fff;
    font-family: 'IBM BIOS';
    font-size: 2rem;
    line-height: 2rem;
}

.rw-form > input[type="submit"] {
    background: red;
    cursor: pointer;
}

.rw-form > input[type="submit"]:hover {
    color: red;
    background: #fff;
}

.progress-icon {
    content: url('../images/exe-icon.svg');
    width: 3rem;
}

.progress-container {
    width: 30vw;
    padding: 1rem;
}

.progress-item {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.progress-item-value {
    font-weight: 700;
}

.progress-bar-container {
    position: relative;
    width: 100%;
    height: 2rem;
    margin: 1rem 0;
    background-color: #fff;
    border: 2px solid #000;
    border-color: var(--bevel-inset-col);
}

.progress-count {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font: var(--title-font);
    mix-blend-mode: difference;
    z-index: 10;
}

.progress-bar {
    width: 100%;
    height: 100%;
    transform-origin: left;
    transform: scaleX(0.5);
    background-color: var(--selection-col);
}

.progress-bar-input {
    display: flex;
    flex-flow: row nowrap;
    justify-content: stretch;
}

.progress-bar-input > .button {
    flex-grow: 1;
    margin: 0 0.5rem;
}

.progress-bar-input > .button:last-child {
    margin-right: 0;
}

.progress-bar-input > .button:first-child {
    margin-left: 0;
}

.hint-container {
    width: 30vw;
    padding: 1rem;
    text-align: center;
}

.hint-container > .button {
    margin-top: 1rem;
}

.alert-container {
    width: 30vw;
    padding: 1rem;
}

.alert-content {
    display: flex;
    flex-flow: row nowrap;
}

.alert-icon {
    width: 3rem;
    padding: 0 1.5rem;
}

.alert-message {
    flex-grow: 1;
    text-align: center;
}

.alert-options {
    display: flex;
    flex-flow: row nowrap;
    justify-content: stretch;
    margin-top: 1rem;
}

.alert-options > .button {
    flex-grow: 1;
    margin-right: 0.5rem;
}

.alert-options > .button:last-child {
    margin-right: 0;
}

.proxy-container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.proxy-column {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    margin-left: 2rem;
}

.proxy-item {
    width: 20vh;
    height: 15vh;
    margin-top: 2rem;
    background-color: rgba(255, 255, 255, 0);
}

.narration-overlay {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
    padding: 5vw;
    background-color: #000;
    pointer-events: none;
}

.narration-text {
    color: #fff;
    font: var(--serif-font);
    font-size: 5vw;
    line-height: 7vw;
}

.narration-text::after {
    content: '_';
    animation: 1.25s infinite narration-cursor-anim;
}

@keyframes narration-cursor-anim {
    0% {
        content: '_';
    }

    49.9% {
        content: '_';
    }

    50% {
        content: '';
    }

    100% {
        content: '';
    }
}

.narration-controls {
    color: #fff;
    opacity: 0;
}

.controls-anim {
    animation: 1s 2s forwards controls-anim;
}

@keyframes controls-anim {
    0% {
        opacity: 0.2;
    }
    24.9% {
        opacity: 0.2;
    }
    25% {
        opacity: 0.4;
    }
    49.9% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.6;
    }
    74.9% {
        opacity: 0.6;
    }
    75% {
        opacity: 0.8;
    }
    99.9% {
        opacity: 0.8;
    }
    100% {
        opacity: 1;
    }
}

.html-container {
    width: 80vw;
    height: 80vh;
    box-shadow: inset 2px 2px 0 #000;
}

.html-container iframe {
    width: 100%;
    height: 100%;
}