/*============================================
Fonts
============================================*/
@import url('https://fonts.googleapis.com/css2?family=Caveat&family=Kdam+Thmor+Pro&display=swap');
@import url('./Y4K.ttf');

/*============================================
Variables
============================================*/
:root {
    /* --background-color: #000000;
    --darkShade-color: #1c1c1d;
    --window-color: #4c4c52;
    --toolbar-color: #88888f;
    --toolbar-color: #d584e6;
    --highlight-color: #9f9fa7;
    --button-color: #a9a9b3;
    --buttonHover-color: #c2c2cc; */

    --background-color: #000000;
    --darkShade-color: #7a64f7;
    --shade-color: #452494;
    --window-color: #6b276b;
    --window-color-transparent: #6b276b44;
    --toolbar-color: #d584e6;
    --highlight-color: #eec6fa;
    --button-color: #46cfcf;
    --buttonHover-color: #a7e8ec;
    --inactive-color: #746777;
    --shadow-color: #4c35a166;

    --ui-extraSmall: 4px;
    --ui-small: 10px;
    --ui-medium: 20px;
    --ui-large: 36px;
    --ui-huge: 40px;
    --font-size: 16px;
    --font-size-large: 24px;

    --padding: 20px;

    --radius-size: 8px;

    image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	image-rendering: crisp-edges;

    display: inline-block;
    position: absolute;
    /* width: 1000px;
    height: 750px; */
    width: 948px;
    height: 533px;
    /* 948x533 */
}

#click-to-play {
    display: inline-block;
    position: absolute;

    width: 100%;
    height: 100%;

    font-family: sans-serif;
    line-height: 50vh;
    font-size: 64px;
    font-weight: bolder;

    background-color: #000000;
    text-align: center;
}

/*============================================
Elements
============================================*/
body {
    display: inline-block;
    position: absolute;
    margin: 0px;

    width: 100%;
    height: 100%;

    overflow: hidden;

    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: Terminal, Helvetica, sans-serif; */
    /* font-family: 'Caveat', cursive; */
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--font-size);

    color: white;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: none;
    user-select: none;

    background-color: var(--background-color);

    cursor: url(./icon-basic.png) 2 2, pointer;
}

/*============================================
Desktop
============================================*/
#desktop {
    display: inline-block;
    position: absolute;

    top: 0px;
    left: 0px;

    background-size: 100% 100%;
    background-image: url('./images/bg.png');

    width: 100%;
    height: calc(100% - calc(var(--ui-large) + var(--ui-extraSmall)));

    overflow: hidden;
    z-index: 0;
}

/*============================================
Window area
============================================*/
#window-area {
    display: inline-block;
    position: absolute;

    top: 0px;
    left: 0px;

    width: 100%;
    height: calc(100% - calc(var(--ui-large) + var(--ui-extraSmall)));
    max-width: 100%;
    max-height: calc(100% - calc(var(--ui-large) + var(--ui-extraSmall)));

    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

/*============================================
System tray
============================================*/
#system-tray {
    display: inline-block;
    position: absolute;
    
    width: 100%;
    height: var(--ui-large);

    bottom: 0px;
    left: 0px;

    background-color: var(--toolbar-color);
    border-top: var(--ui-extraSmall) solid var(--highlight-color);

    color: var(--background-color);

    overflow: hidden;
    z-index: 10;
}

.system-time {
    display: inline-block;
    position: absolute;

    right: 0px;

    width: calc(var(--ui-huge) * 2);
    height: calc(100% - calc(var(--ui-extraSmall) * 2));

    line-height: calc(var(--ui-large) - calc(var(--ui-extraSmall) * 2));
    text-align: center;

    color: var(--background-color);

    /* background-color: var(--button-color); */
    border: var(--ui-extraSmall) solid var(--shade-color);
    border-bottom: var(--ui-extraSmall) solid var(--highlight-color);
    border-top: var(--ui-extraSmall) solid var(--darkShade-color);
}

/*============================================
Fullscreen Area
============================================*/
.fullscreen-area {
    display: inline-block;
    position: absolute;

    width: 100%;
    height: 100%;

    top: 0px;
    left: 0px;

    overflow: hidden;
    pointer-events: none;
    z-index: 15;
}

.fullscreen-app {
    display: inline-block;
    position: absolute;

    width: 100%;
    height: 100%;

    top: 0px;
    left: 0px;

    background-color: #000000;

    overflow: hidden;
    pointer-events: all;
    z-index: 15;
}

/*============================================
==============================================
==============================================
==============================================
Elements
==============================================
==============================================
==============================================
============================================*/

/*============================================
Scroll
============================================*/
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scr {
    width: 10px;
}
  
::-webkit-scrollbar-track {
    background: var(--shade-color);

    cursor: default;
}

::-webkit-scrollbar-thumb {
    background: var(--button-color);
    cursor: pointer;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--buttonHover-color);
    
}

/*============================================
Button
============================================*/
button {
    all: unset;

    display: inline-block;
    position: relative;

    min-width: var(--ui-medium);
    min-height: var(--ui-medium);
    margin: var(--ui-extraSmall);
    padding: 0px calc(var(--ui-extraSmall) / 2);

    line-height: var(--ui-medium);
    text-align: center;
    align-content: center;
    color: var(--background-color);
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--font-size);

    background-color: var(--button-color);
    border: var(--ui-extraSmall) solid var(--shade-color);
    border-top: var(--ui-extraSmall) solid var(--highlight-color);
    border-bottom: var(--ui-extraSmall) solid var(--darkShade-color);

    border-radius: var(--radius-size);

    /* cursor: pointer; */
}

button:hover {
    background-color: var(--buttonHover-color);
}

button:active {
    background-color: var(--button-color);
    border: var(--ui-extraSmall) solid var(--shade-color);
    border-top: var(--ui-extraSmall) solid var(--darkShade-color);
    border-bottom: var(--ui-extraSmall) solid var(--highlight-color);
}

.invisible-button {
    display: inline-block;
    position: absolute;

    width: 32px;
    height: 32px;

    background-color: #00000000;
}

/*============================================
File
============================================*/
.file {
    display: inline-block;
    position: absolute;

    width: 64px;
    min-height: 64px;

    background-position: center;
    background-repeat: no-repeat;
    background-size: 64px 64px;

    text-align: center;
    z-index: 0;
}

.file-name {
    display: inline-block;
    position: relative;

    min-width: 16px;
    width: 96px;
    height: auto;

    top: calc(64px + var(--ui-small));
    left: -16px;
    margin: auto;

    text-align: center;
    overflow-wrap: anywhere;

    background-color: #00000044;
    z-index: 1;
}

.file.selected::after {
    display: inline-block;
    position: absolute;
    content: "";

    width: 100%;
    height: 100%;

    top: 0px;
    left: 0px;

    background-color: blue;
    opacity: 0.5;
    z-index: 2;
}

/*============================================
Window
============================================*/
.window {
    display: inline-block;
    position: absolute;
    
    min-width: calc(var(--ui-huge) * 2);
    min-height: calc(var(--ui-huge) * 2);
    padding: var(--ui-extraSmall);
    padding-top: calc(var(--ui-large) + var(--ui-extraSmall));

    background-color: var(--window-color);
    border: var(--ui-extraSmall) solid var(--shade-color);
    border-top: var(--ui-extraSmall) solid var(--highlight-color);
    border-bottom: var(--ui-extraSmall) solid var(--darkShade-color);

    box-shadow: 10px 10px 0px var(--shadow-color);
    border-radius: var(--radius-size);

    /* overflow: hidden; */
    pointer-events: all;
    z-index: 1;
}

.transparent {
    background-color: var(--window-color-transparent);
    backdrop-filter: blur(5px);
}

.window-content {
    display: inline-block;
    position: absolute;

    top: var(--ui-large);
    left: 0px;

    width: calc(100% - calc(var(--ui-extraSmall) * 2));
    height: calc(100% - var(--ui-large) - calc(var(--ui-extraSmall) * 2));
    padding: var(--ui-extraSmall);

    overflow: auto;
}

.toolbar {
    display: inline-block;
    position: absolute;

    width: calc(100% - var(--ui-small));
    height: var(--ui-large);
    padding-left: var(--ui-small);

    top: 0px;
    left: 0px;

    text-align: left;
    color: var(--shade-color);
    line-height: var(--ui-huge);

    background-color: var(--toolbar-color);

    font-family: 'Y4K', 'Courier New', Courier, monospace;
    font-size: var(--font-size-large);

    white-space: nowrap;
    /* line-break: none; */
    overflow: hidden;

    /* cursor: grab; */
}

.toolbar button {
    position: absolute;

    right: 0px;
}

.resizable {
    resize: both;
    overflow: auto;
}

.prompt {
    text-align: center;
    height: auto;
}

.prompt h1 {
    margin: var(--ui-small);
}

.prompt button {
    min-width: 64px;
}

.button-selected {
    border: 2px solid #ff0000 !important;
}