@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: 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;
}

/* #region folders */
.static {
    position: absolute;
    background-size: 100%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: -1;
}

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

.folderName {
    position: relative;
    top: 60px;
    right: 25px;
    color: white;
    text-align: center;
    margin: 0;
    width: 100px;
    cursor: pointer;
}
/* #endregion */

/* #region apps */
.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/icon_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/icon_collage.png);
}
.sierpinski {
    left: 235px;
    top: 335px;
    background-image: url(images/icon_sierpinsk.png);
}
.sprout {
    left: 235px;
    top: 435px;
    background-image: url(images/icon_sprout.png);
}
.settings {
    left: 335px;
    top: 435px;
    background-image: url(images/icon_settings.png);
}
.guymode {
    left: 535px;
    top: 135px;
    background-image: url(images/webtoys/guymode.png);
}
/* #endregion */

/* #region window */
.window {
    background: white;
}
.title-bar {
    display: flex;
    flex-direction: row;
    align-items: center;

    height: 2.5vh;

    background-color: red;
}
.title-bar-image {
    
}
.title-bar-image img {
    height: 4vh;
    width: 4vh;
    animation: windowIcon 2s infinite linear;
}
@keyframes windowIcon {
    0%, 100% {
        transform: translateX(-0.5vw) rotate(-15deg);
    }
    50% {
        transform: translateX(-0.5vw) rotate(15deg);
    }
}
.title-bar-text {
    font-size: 1.5vh;
    flex-grow: 1;
}
.title-bar-controls {

}
.title-bar-controls button {
    height: 2.5vh;
    width: 2.5vh;
}

.window-body {
    width: 100%;
    height: 87.5vh;

    background: white;

    box-sizing: border-box;
    border-left: 6px red solid;
    border-right: 6px red solid;
    border-bottom: 10px red solid;
}
.window-body iframe {
    width: 100%;
    height: 100%;

    border: none;
}
/* #endregion */

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

    background-color: rgb(0, 0, 0);

    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 .subtitle {
    z-index: -1;
}
#startupOverlay .title span {
    font-family: 'appleGaramondLight';
    font-size: 10vh;
    color: #FFF;
}
#startupOverlay vee {
    font-family: 'appleGaramondLight';
    font-size: 12vh;
    color: #ff8500;
}
#startupOverlay ooh {
    font-family: 'appleGaramondLight';
    font-size: 12vh;
    color: #009bff;
}
#startupOverlay ess {
    font-family: 'appleGaramondLight';
    font-size: 12vh;
    color: #ff0043;
}

#startupOverlay .buttonContainer {
    display: flex;
    align-items: center;
    flex-direction: column;

    color: white;
    font-size: 1.5vh;

    z-index: -1;
}
#startupOverlay .buttonContainer button {
    pointer-events: all;
    cursor: pointer;

    margin-bottom: 1vh;

    background: #000;
    border: solid #ff8500 1px;
    box-shadow: none;
    color: #ff8500;

    width: 35%;
}
/* #endregion */

/* #region poppy */
#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; }
}
/* #endregion */

red {
    color: red;
}

#settings {
    width: 15vw;
}