* {
    box-sizing: border-box;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
	font-family: FreePixel;
	font-size: 32;
}

@font-face {
	font-family: FreePixel;
	src: url("FreePixel.ttf");
}

iframe {
    border: none;
}

:root {
    font-family: system-ui;

    --light: white;
    --dark: black;

    background: #7b8186;
    background-image:url("assets/background.png");

    font-size: 16px;

    touch-action: none;
}

html, body {
    overflow: hidden;

    margin: 0; padding: 0;
    width: 100%; height: 100%;
}

#screen {
    position: absolute;
    width: 100%; height: 100%;

    opacity: 0%;
    transition: opacity 1s ease-in-out;

    background-color: var(--dark);
    pointer-events: none;
}

#title-board {
    position: absolute;
    width: 100%; height: 100%;

    opacity: 0%;

    background-color: var(--dark);
    pointer-events: none;

    z-index: 1000;
}

#colet_chat {
    position: absolute;
    width: 100%; height: 100%;

    opacity: 0%;

    background-color: var(--dark);
    pointer-events: none;

    z-index: 10000;
}

#endingframe {
    position: absolute;
    width: 100%; height: 100%;

    opacity: 0%;

    background-color: var(--dark);
    pointer-events: none;

    z-index: 90000;
}

#cracktro {
    position: absolute;
    width: 100%; height: 100%;

    opacity: 100%;

    background-color: var(--dark);
    

    z-index: 10000;
}

#title {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);

    color: var(--light);
    font-size: 64px;
    text-align: center;

    
    user-select: contain;
}

#debug.window {
    user-select: none;

    width: 640px;
}

#debug .window-title {
    width: calc(640px - 32px);
}

#debug .window-body {
    display: flex; flex-direction: row;
    padding: 1em;
    gap: .5em;
    overflow: hidden;
}

#debug button {
    font-size: inherit;
}

#debug select {
    flex: 1;

    font-family: inherit;
    font-size: inherit;
    background: transparent;
    color: inherit;
}

p.quote {
    font-style: italic;
}

.credits.window {
    height: unset;
}

.credits .window-close {
    display: none;
}

.credits .window-title {
    width: unset;
}

.credits .window-body {
    overflow: hidden;
}

button {
    border: outset #c2c0ae 3px;
    background: #979fa0;
    color: #000000;
    font-family: inherit;
    /* min-width:100px; */
	padding-left: 4px;
	padding-right: 4px;

    cursor: pointer;
    margin:3px;
}

select {
    border: outset #c2c0ae 3px;
    background: #979fa0;
    color: #000000;
    font-family: inherit;
    cursor: pointer;
    margin:3px;
}

button:active {
    filter:invert();
}

a {
    border: outset #c2c0ae 3px;
    background: #979fa0;
    color: #000000;
    font-family: inherit;
    min-width:100px;

    cursor: pointer;
    margin:3px;

    display: inline-block;
    padding: 0px 8px 0px 8px;
    text-decoration: unset;
	
	text-align: center;
}

a:active {
    filter:invert();
}

.window {
    position: absolute;
    margin: 0; padding: 0;
    display: flex; flex-direction: column;

    width: 320px; height: 320px;
    
    /* border: solid var(--light) 1px; */
    background: var(--light);

    z-index: 0;

    border: outset #c2c0ae 3px;
	
	overflow: clip;
}

[hidden] { visibility: hidden; }

.flash {
    filter: invert();
}

.window-title {
    display: block;

    width: calc(320px - 32px); height: 32px;
    padding: 0 8px;
    font-weight: bold;
    line-height: 32px;

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

    cursor: move;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.window-close {
    position: absolute;
    right: 1px; top: 1px;

    width: 24px; height: 24px; 
    min-width:0;
    font-weight: bolder;
}

.window-pushback {
    position: absolute;
    right: 28px; top: 1px;

    width: 24px; height: 24px; 
    min-width:0;
    font-weight: bolder;
	text-align: center;
}

.window-pushback-solo {
    position: absolute;
    right: 1px; top: 1px;

    width: 24px; height: 24px; 
    min-width:0;
    font-weight: bolder;
}

.window-body {
    flex: 1;

    overflow-y: scroll;

    background: #979fa0;
    color: var(--dark);
}

/* .img-tint {
    display: flex;
    background-color: var(--light);
    margin: 16px;
}

.img-tint img {
    mix-blend-mode: multiply;
} */

.window-body button img {
    width: 100%;
}

.window-body h1 {
    margin: 24px;
    font-size: unset;
    text-align: center;
}

.window-body p {
    margin: 8px;
    /* text-align: justify; */
}

.window-body ul {
    margin: 16px;
    margin-inline-start: 0;
}

.window-body a {
    /* background: var(--dark); */
    color: var(--dark);
}

.window-body a:hover {
    background: var(--light);
    color: var(--dark);
}

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

.glow {
    animation-name: glow;
    animation-direction: alternate;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes glow {
    0%   { filter: brightness(10%); }
    100% { filter: brightness(35%) }
}

.attention {
    animation-name: attention;
    animation-direction: alternate;
    animation-duration: .25s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


@keyframes attention {
    0%   { filter: brightness(90%); }
    100% { filter: brightness(110%); }
}

.feet {
    bottom:0px;
    position:absolute;
    /* width:100%; */
    /* display:flex; */
    /* flex-direction: row; */
}

/* .feet * {
    flex-grow: 1;
} */



.splash .window-title {
    display:none;
}

.splash .window-body .img-tint img {
    width: unset;
}

.splash .window-body{
    overflow-y: hidden;
}

.splash {
    width: unset;
    height:326px;
}

.iframe .window-body {
    overflow: hidden;
}

a div img { 
    width:unset !important; 
}

.touchstone_signature {
    text-align: right;
    display:block;
    font-weight: bold;
    filter:drop-shadow(0px 0px 0.5px #0008);
}

.touchstone_signature:before {
    content:"~";
}

.touchstone_post:after {
	content:" ";
	width:100%;
	height:1px;
	display:block;
	background-color:#ccbb99aa;
}

.touchstone_post:last-child:after {
	height:0px;
}

#touchstone_feed {
    background-color:black;
    color: #ccbb99;    
    border: inset #c2c0ae 3px;
	height: calc(100% - 29px);
    overflow-y: scroll;
}

#touchstone .window-body {
	overflow-y: visible;
    height:calc(100% - 32px);
}

#touchstone .window-body input {
	border: none;
    background-color:black;
    color: #ccbb99;    
	height:26px;
	width: 76%;
    border: inset #c2c0ae 2px;
	
}

#touchstone .window-body button {
	width: 21%;
}

#touchstone .window-title:before {
    content:url("assets/icons/touchstone.png");
    display:inline-block;
    width:16px;
    height:16px;
    position: relative;
    left:-2px;
    top:2px;
}

#touchstone_feed:empty:after {
    content:"no posts!";
    margin: 8px;
    display: block;
}

#touchstone .window-body #touchstone_about_button {
	position:relative;
	top: calc(0px - 100% - 31px);
	left: calc(100% - 86px);
	width: 24px;
	height: 24px;
}


#touchstone_DM_feed {
    background-color:black;
    color: #ccbb99;    
    border: inset #c2c0ae 3px;
	height: calc(100% - 29px);
    overflow-y: scroll;
}

#touchstone_DM .window-body {
	overflow-y: visible;
    height:calc(100% - 32px);
}

#touchstone_DM .window-body input {
	border: none;
    background-color:black;
    color: #ccbb99;    
	height:26px;
	width: 76%;
    border: inset #c2c0ae 2px;
	
}

#touchstone_DM .window-body input:disabled {
	background: #999;
}

#touchstone_DM .window-body button {
	width: 21%;
}

#touchstone_DM .window-title:before {
    content:url("assets/icons/touchstone.png");
    display:inline-block;
    width:16px;
    height:16px;
    position: relative;
    left:-2px;
    top:2px;
}

#touchstone_DM_feed:empty:after {
    content:"no posts!";
    margin: 8px;
    display: block;
}

#touchstone_DM .window-body #touchstone_DM_about_button {
	position:relative;
	top: calc(0px - 100% - 31px);
	left: calc(100% - 86px);
	width: 24px;
	height: 24px;
}



button:disabled {
	background: #555;
}

button:disabled:active {
	filter:none;
}

#dream_log .window-body p:after {
	content:" ";
	width:100%;
	height:1px;
	display:block;
	background-color:black;
    margin-top:8px;
}

.dream_log_post {
	word-break: break-word;
}

#dream_log .window-body p:last-child:after {
	height:0px;
}

#dream_manipulator .window-body {
	
	overflow-y: auto;
}

#dream_manipulator .window-body div {
	width:24%;
	display:inline-block;
	height:calc(100% - 34px);
	overflow-y: scroll;
	overflow-x: clip;
}

#cheat_switches button {
	width:90%;
}

#cheat_variables span {
	width:90%;
	display: block;
}

#cheat_variables span label {
	width:70%;
}

#cheat_variables span input {
	width:30%;
}

#cheat_common_events button {
	width:90%;
	display:block;
}

#cheat_battles button {
	width:90%;
	display:block;
}

#logging-off {
	width:100%;
	height:100%;
	text-align:center;
	position:absolute;
	
	display:flex;
	align-items:center;
	z-index: 9999;
	display: none;
}

#logging-off div {
	width:100%;
	text-align:center;
	background-color: black;
	height: 240px;
}

#logging-off div #logging-off-skull {
	width: 116px;
}

#logging-off div #logged-off-skull {
	height: 100px;
	vertical-align: center;
	display:none;  
	
	margin-top: 70px;
}

img.steam {
	position:absolute;
    left: calc(100% - 215px);
    top: calc(100%);
    width: 215px;
    height: 89px;
	animation-name: steam;
	animation-duration: 3s;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

@keyframes steam {
	0% { top: calc(100%); }
	10% { top: calc(100% - 89px); }
	
	
	90% { top: calc(100% - 89px); }
	100% { top: calc(100%); }
}

#applications .window-body {
	display: flex;
	flex-wrap: wrap;
}

#applications .window-body button {
	width:48%;
}

#applications .window-body button img{
	height:32px;
	width:32px;
}

#lock-mouse {
    width: 100%;
    height: 100%;
    background: #ffbb0001;
    z-index: 666420;
    position: absolute;
    pointer-events: none;
	cursor: none;
}

body, button, a, img, select, option {
	cursor: url("assets/cursor.png"), auto;
}

img.fake_cursor {
	position:absolute;
	visibility: hidden;
	z-index: 1000;
}

div.picture .window-body {
	overflow: hidden;
}

button.bootdiskButton {
	background: black;
	color: lime;
}

button.bootdiskButton:disabled {
	background: #444;
	color: green;
}

div#music_progress {
	border: 1px solid black;
	width: 90%;
	margin-left:5%;
	margin-right:5%;
	height: 8px;
}

div#music_progress_bar {
	background-color:black;
	width:0%;
	height:100%;
}

select#bootdisk_selector {
	background:black; color:lime; width:60%;
}

select#bootdisk_selector:disabled {
	background: #444;
	color: green;
}