body {
    margin: 0px;
    /*background-color: #cceeff; /*heretic color*/
    background-color: #008080;
    display: block;
    height: 100%;
    width: 100%;
    text-align: center;
    font-family: 'Courier New', monospace;
    overflow: hidden;
}

.container {
    background: silver;
    max-width: 1024px;
    text-align: left;
    margin: 20px auto;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;
    padding: 3px;
    position: relative;
    z-index: 1;
}

.header{
    background: #C0C0C0;
    overflow: hidden;
}

main {
    max-height: calc(100vh - 170px);
    overflow-y: auto;
}

.main pre {
    display: inline-block;
    text-align: left;
    /*color: #ffffff; /*heretic color*/
    /*background-color: #335599; /*heretic color*/
    /*border: 2px solid #444444; /*heretic color*/
	border-style: double;
	border-color: darkblue;
    width: 100%;
    padding: 8px;
}

.centered {
    text-align: center;
}

.textblock {
	text-align: left;
	max-width: 800px;
	transform: translate(-50%, 0%);
	left: 50%;
	position: relative;
}

a {
    /*color: #a07030; /*heretic color*/
	color: brown;
}

button {
    color: #000;
    background-color: silver;
    display: block;
    -moz-appearance: none;
    appearance: none;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 0.45em 0.75em;
    border-left: 2px solid #ededed;
    border-top: 2px solid #ededed;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
}

.header a {
    /*color: #fff84d; /*heretic color*/
    color: darkblue;
}

.project {
    /*border: 1px solid #444444; /*heretic color*/
	border-style: double;
	border-color: darkblue;
    margin-top: 4px;
    margin-bottom: 12px;
    padding: 0px 8px;
}

.projecttitle {
    height: 24px;
    line-height: 24px;
    font-size: 20px;
}

.projectbody {
    font-size: 14px;
}


hr {
    border: none;
    /*background-color: #444444; /*heretic color*/
	background-color: darkblue;
    height: 1px;
}

.projecttitle img {
    width: 20px;
    vertical-align: middle;
    margin-left: 4px;
}

.gifs img {
    width: 150px;
    max-height: 300px;
}

.note {
    font-style: italic;
    color: brown;
}

.org-center {
	text-align: center;
}

.shw {
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    background: #C0C0C0;
    padding: 4;
    margin: 0 8;
}

.header-shw {
    box-shadow: inset -1px -1px #fff, inset 1px 1px grey, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
    background: #C0C0C0;
}

.topmenu {
    border: none;
    height: 64px;
    width: 100%;
}

.status-bar {
    background: linear-gradient(90deg,navy,#1084d0);
}

.desktop {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    max-height: calc(100vh - 30px);
}

.desktop-icon {
    text-align: center;
    vertical-align: top;
    width: 72px;
    margin: 0;
    padding: 8px 1px;
    cursor: pointer;
}

.desktop-icon-container {
    position: relative;
    z-index: 0;
}

.desktop-icon img {
    margin: 8px;
}

.desktop-icon span {
    color: white;
    font-size: 12px;
    text-align: center;
}

.bottom-menu-elem {
    float: right;
    text-align: right;
    padding: 0 10px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    font-size: 12px;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.start-bar {
    padding: 2px;
    box-shadow: inset 1px 0 #fff;
    display: block;
    background-color: silver;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #f4f4f4;
    border-bottom: 1px solid #4e4e4e;
    position: fixed;
    z-index: 99999;
}

::-webkit-scrollbar {
    width: 16px
}

::-webkit-scrollbar:horizontal {
    height: 17px
}

::-webkit-scrollbar-corner {
    background: #dfdfdf
}

::-webkit-scrollbar-track {
    background-color: #dfdfdf; 
}

::-webkit-scrollbar-thumb {
    background-color: #dfdfdf;
    box-shadow: inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px grey,inset 2px 2px #dfdfdf
}

::-webkit-scrollbar-button:horizontal:end:increment,::-webkit-scrollbar-button:horizontal:start:decrement,::-webkit-scrollbar-button:vertical:end:increment,::-webkit-scrollbar-button:vertical:start:decrement {
    display: block
}

::-webkit-scrollbar-button:vertical:start {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 6H7v1H6v1H5v1H4v1h7V9h-1V8H9V7H8V6z' fill='%23000'/%3E%3C/svg%3E");
    height: 17px
}

::-webkit-scrollbar-button:vertical:end {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 6H4v1h1v1h1v1h1v1h1V9h1V8h1V7h1V6z' fill='%23000'/%3E%3C/svg%3E");
    height: 17px
}

::-webkit-scrollbar-button:horizontal:start {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9 4H8v1H7v1H6v1H5v1h1v1h1v1h1v1h1V4z' fill='%23000'/%3E%3C/svg%3E");
    width: 16px
}

::-webkit-scrollbar-button:horizontal:end {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 0H0v16h1V1h14V0z' fill='%23DFDFDF'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 1H1v14h1V2h12V1H2z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 17H0v-1h15V0h1v17z' fill='%23000'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15 1h-1v14H1v1h14V1z' fill='gray'/%3E%3Cpath fill='silver' d='M2 2h12v13H2z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7 4H6v7h1v-1h1V9h1V8h1V7H9V6H8V5H7V4z' fill='%23000'/%3E%3C/svg%3E");
    width: 16px
}

canvas.emscripten {
    border: 0px none;
    background-color: black;
    max-width: 800px;
    max-height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }