@font-face{
    font-family:"Pixelated MS Sans Serif";
    font-style:normal;
    font-weight:400;
    src:url(https://unpkg.com/98.css@0.1.21/dist/ms_sans_serif.woff) format("woff");
    src:url(https://unpkg.com/98.css@0.1.21/dist/ms_sans_serif.woff2) format("woff2");
}
@font-face{
    font-family:"Pixelated MS Sans Serif";
    font-style:normal;
    font-weight:700;
    src:url(https://unpkg.com/98.css@0.1.21/dist/ms_sans_serif_bold.woff) format("woff");
    src:url(https://unpkg.com/98.css@0.1.21/dist/ms_sans_serif_bold.woff2) format("woff2");
}
@font-face {
    font-family: 'appleGaramond';
    src: url(fonts/AppleGaramond.ttf) format('TrueType');
}
@font-face {
    font-family: 'appleGaramondLight';
    src: url(fonts/AppleGaramond-Light.ttf) format('TrueType');
}

html {
    padding: 0;
    margin: 0;
}

* {
    font-family: "Pixelated MS Sans Serif",Arial;
}

body {
    font-size: 1vh;
    background-color: hsl(181, 89%, 28%);
    overflow: hidden;
}

summary {
    cursor: pointer;
}

/* remove arrow thingy */
summary:first-of-type {
    list-style-type: none;
}
summary::-webkit-details-marker {
    display:none;
}

.highlighted a {
    color: white;
}

/* === DESKTOP FOLDERS === */

.static {
    position: absolute;
    background-size: 100%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    z-index: -1;
}

.openable {
    position: absolute;
}
.openable .container {
    position: relative;
    z-index: 1;
}
.openable summary {
    background-size: 100%;
    width: 35px;
    height: 35px;
    z-index: -1;
}
.openable[open] summary {
    background-size: 100%;
    width: 35px;
    height: 35px;
}
.openable[open] .folderName {
    font-weight: bold;
}

.folderName {
    position: relative;
    top: 40px;
    right: 17.5px;
    color: white;
    text-align: center;
    margin: 0;
    width: 70px;
    cursor: pointer;
}

/* === STATICS === */

.bin {
    left: 35px;
    top: 35px;
    background-image: url(images/webtoys/bin.png);
}
.myComputer {
    left: 35px;
    top: 135px;
    background-image: url(images/webtoys/myComputer.png);
}
.recurse {
    left: 135px;
    top: 135px;
    background-image: url(images/webtoys/icon_recurse.png);
}
.divbrush {
    left: 135px;
    top: 235px;
    background-image: url(images/webtoys/divbrush.png);
}
.poppy {
    left: 235px;
    top: 35px;
    background-image: url(images/webtoys/poppy.png);
}
.about {
    left: 35px;
    bottom: 135px;
    background-image: url(images/webtoys/about.png);
}
.popupcollage {
    left: 135px;
    top: 335px;
    background-image: url(images/webtoys/collager.png);
}

/* === OPENABLES === */

/* media player */  
.winMedia {
    left: 135px;
    top: 35px;
}
.winMedia summary {
    background-image: url(images/webtoys/winMedia.png);
}
.winMedia .container {
    top: 5vh;
    left: 50vw;
}

/* fractal */
#cat_fractal {
    left: 35px;
    top: 235px;
}
#cat_fractal summary {
    background-image: url(images/webtoys/dir_closed.png);
}
#cat_fractal[open] summary {
    background-image: url(images/webtoys/dir_open.png);
}
#cat_fractal .container {
    top: -15vh;
    left: 5vw;
}
#cat_fractal .window {
    width: 36vw;
}

/* popup */
#cat_popup {
    left: 35px;
    top: 335px;
}
#cat_popup summary {
    background-image: url(images/webtoys/dir_closed.png);
}
#cat_popup[open] summary {
    background-image: url(images/webtoys/dir_open.png);
}
#cat_popup .container {
    top: 3vh;
    left: 35vw;
}

/* art toys */
#cat_art {
    left: 35px;
    top: 435px;
}
#cat_art summary {
    background-image: url(images/webtoys/dir_closed.png);
}
#cat_art[open] summary {
    background-image: url(images/webtoys/dir_open.png);
}
#cat_art .container {
    top: 10vh;
    left: 15vw;
}

/* === FILE EXPLORERS === */

.title-bar {
    cursor: pointer;
}

/* === START BAR === */
.startBar {
    padding: 2px;
    margin: 0;
    box-shadow: inset 1px 0 #fff;
    box-sizing: border-box;
    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;
}
.startButton {
    background-image: url(images/webtoys/startButton.png);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 45px;
    height: 14px;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.startButtonWrapper {
    float: left;
    margin-left: 2px;
    margin-bottom: 2px;
    vertical-align: middle;
    padding: 2px 6px 3px;
    background-color: silver;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
    box-shadow: inset 1px 1px #dfdfdf,1px 0 #000,0 1px #000,1px 1px #000;
    min-width: 45px;
    margin-right: 6px;
    color: #000;
}
.startBar_time {
    float: right;
    text-align: right;
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    border-top: 1px solid gray;
    border-left: 1px solid gray;
    animation: time 1s linear infinite;
}
.startBar_time:after {
    content: "";
    animation: time 1s linear infinite;
}
@keyframes time {
    0% {content: "6:30 PM";}
    0% {content: "6 30 PM";}
    100% {content: "6:30 PM";}
}
div {
    animation: rotDivs 0s linear infinite;
}
@keyframes rotDivs {
    0% {rotate: 0deg;}
    50% {rotate: 360deg;}
    100% {rotate: 720deg;}
}

/* === START MENU === */
.startMenu {
    position: absolute;
    height: 40vh;
    top: -40.5vh;
    left: 5px;
    width: 10.5vw;
    z-index: 10;
}
.startMenu-vert {
    float: left;
    height: 98%;
    width: 11%;
    background-color: #0000A8;
    color: white;
    font-family:Arial, Helvetica, sans-serif;
    writing-mode: sideways-lr;
    text-orientation: mixed;
    font-size: 170%;
    padding-bottom: 2%;
    margin: 0;
}
.startMenu-list {
    float: right;
    height: 100%;
    width: 88%;
}
.startMenu-list table {
    width: 100%;
    background: none;
}
.startMenu-list td {
    padding: 3px 0 3px 5px;
    vertical-align: middle;
}
.startMenu-list img {
    width: 100%;
}
.startMenu .divider {
    background: #000;
    border-bottom: 1px solid grey;
    border-right: 1px solid grey;
    box-shadow: 1px 0 0 #fff,1px 1px 0 #fff,0 1px 0 #fff,-1px 0 0 #a9a9a9,-1px -1px 0 #a9a9a9,0 -1px 0 #a9a9a9,-1px 1px 0 #fff,1px -1px #a9a9a9;
    box-sizing: border-box;
    height: 1px;
    margin-left: 5%;
    width: 90%;
}
.documents-list {
    color: black;
    vertical-align: middle;
}
.documents-list img {
    width: 15px;
}
.documents-list input {
    border: none;
    background: none;
    cursor: pointer;
}
.documents-list tr.highlighted input {
    color: white;
}
.details_docs:first-of-type .summary_docs::after,
:is(::-webkit-details-marker) {
    content: "🞂";
    float: right;
    padding-right: 10px;
    font-family: monospace;
}

#startupOverlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    pointer-events: none;

    background-color: silver;

    transition: 0;
}
#startupOverlay #scanlines {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    animation: scanlines .2s linear infinite;

    box-shadow: inset black 0 0 3vw;
}
@keyframes scanlines {
    0% {
        background: repeating-linear-gradient(rgba(36, 36, 36, 0.2) 0, rgba(36, 36, 36, 0.2) 2px, transparent 4px, transparent 8px);
    }
    50% {
        background: repeating-linear-gradient(rgba(36, 36, 36, 0.15) 0, rgba(36, 36, 36, 0.15) 2px, transparent 4px, transparent 8px);
    }
    100% {
        background: repeating-linear-gradient(rgba(36, 36, 36, 0.2) 2px, rgba(36, 36, 36, 0.2) 4px, transparent 6px, transparent 10px);
    }
}
#startupOverlay .title {
    z-index: -1;
}
#startupOverlay span {
    font-family: 'appleGaramondLight';
    font-size: 10vh;
}
#startupOverlay accent {
    font-family: 'appleGaramondLight';
    font-size: 12vh;
    color: red;
}
#startupOverlay .buttonContainer {
    position: absolute;
    width: 3vw;
    left: 48.5vw;
    top: 58vh;
    pointer-events: all;
    z-index: -1;
}

#poppy {
    position: absolute;
    bottom: 10vh;
    right: 5vw;

    z-index: 99999;

    transition: 1s;
}
#poppy div {
    position: absolute;
    top: 5%;
    left: -150%;

    transition: 1s;
}
#poppy input {
    cursor: pointer;
    border: none;
    background: none;
    text-decoration: underline;
}
#poppy p {
    float: left;
    background: #fff2a5;
    padding: 1vw;
    min-width: 10vw;
    max-width: 15vw;
}
#poppy img {
    width: 222px;
    height: 333px;

    animation: poppyAnim 2s linear infinite;
}
@keyframes poppyAnim {
    0% { rotate: 15deg; }
    50% { rotate: -15deg; }
    100% { rotate: 15deg; }
}

red {
    color: red;
}

#settings {
    width: 15vw;
}