/* I hope you like giant walls of haphazardly organized styles */

body {
    /* background-color: black;
    color: white; */
    background-color: #008080;
    color: #F8F8F2;
    /* font-family: 'DM Mono', monospace; */
    /* text-align: center; */
    margin: 0;
    padding: 0;
}

/* unvisited link */
a:link {
    color: #66D9EF;
}

/* visited link */
a:visited {
    color: #AE81FF;
}

.row {
    display: flex;
    flex-direction: row;
}

.column {
    flex: 50%;
}

.space {
    margin-top: 75px;
}

@media(max-width: 768px) {
    .row {
        flex-direction: column;
    }

    .column {
        flex: 100%;
    }
}

.rainbow {
    animation: colorRotate 1s linear 0s infinite;
}

@keyframes colorRotate {
    from {
        color: #6666ff;
    }

    10% {
        color: #0099ff;
    }

    50% {
        color: #00ff00;
    }

    75% {
        color: #ff3399;
    }

    100% {
        color: #6666ff;
    }
}

@keyframes border-flash {
    0% {
        box-shadow: 0 0 0 5px #bbbb00;
        outline: dashed 5px #ffffff;
        height: 100px;
    }

    50% {
        box-shadow: 0 0 0 5px #ffffff;
        outline: dashed 5px #bbbb00;
        height: 100px;
    }

    100% {
        box-shadow: 0 0 0 5px #ffffff;
        outline: dashed 5px #bbbb00;
        height: 100px;
    }
}

#desktop {
    margin: 0;
    padding: 0;
}

#desktop-icons {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
    /* subtract footer */
    height: calc(100vh - 28px)
}

/* .desktop-icon {
    width: 75px;
    height: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: 'W95FA', monospace;
    font-size: small;
} */

.desktop-icon {
    width: 75px;
    height: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    box-sizing: border-box;
    font-family: 'W95FA', monospace;
}

.desktop-icon img {
    /* width: 32px; */
    /* height: 32px; */
    margin-top: 2px;

}

.desktop-icon-text {
    padding-top: 6px;
    font-size: 12px;
    display: block;
    display: -webkit-box;
    max-width: 90%;
    line-height: 1;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#secret {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    left: 0;
    right: 0;
    padding: 10px;
    animation: border-flash 1s steps(1, end) infinite;
    text-align: center;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 28px;
    background-color: #c3c3c3;
    z-index: 10000;
    cursor: default;

    background: linear-gradient(to bottom,
            /* #c3c3c3  */
            #c3c3c3 0px,
            #ffffff 1px,
            #c3c3c3 2px)
}

#startbutton {
    position: fixed;
    left: 2px;
    bottom: 2px;
    width: 54px;
    height: 22px;
    display: block;
    margin: auto;
    z-index: -10;
}

#startbutton img {
    margin: auto;
    display: block;
    position: fixed;
    width: 51px;
    height: auto;
}

.button {
    border-image-source: url("/media/button-border.png");
    border-image-slice: 3 fill; /* not rendering on mobile, need 2? */
    border-image-width: 2px;
}

.button-selected {
    border-image-source: url("/media/button-pressed.png");
    border-image-slice: 3 fill;
    border-image-width: 2px;
}

#startmenu {
    position: fixed;
    left: 2px;
    bottom: 24px;
    width: 164px;
    height: 239px;
    display: block;
    margin: auto;

    border-image-source: url("/media/button-border.png");
    border-image-slice: 3 fill;
    border-image-width: 2px;

    z-index: 10000;
    display: none;
    cursor: default;
}

#startmenu-windows-text {
    position: absolute;
    left: 3px;
    bottom: 3px;
    width: 21px;
    height: 233px;

    background-color: #808080;
    writing-mode: sideways-lr;
    text-orientation: upright;
    -webkit-text-orientation: upright;
    font-family: 'W95FA', monospace;
    font-weight: bold;
    font-size: larger;

    text-align: left;
    vertical-align: middle;
    line-height: 0.9;
}

@font-face {
    font-family: 'W95FA';
    src: url('fonts/Win/W95FARegular.woff2') format('woff2'),
        url('fonts/Win/W95FARegular.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'IBM';
    src: url('fonts/Win/WebPlus_IBM_BIOS.woff') format('woff');
    font-display: swap;
}

/* #windows img {
    image-rendering: pixelated;
} */


#windows {
    position: relative;
    height: 100%;
}

#clock {
    position: fixed;
    right: 2px;
    bottom: 2px;
    width: 68px;
    /* 44 + 12 + 12 edges */
    height: 22px;
    display: block;
    margin: auto;
    z-index: -10;

    border-image-source: url("/media/clock-border.png");
    border-image-slice: 2 fill;
    border-image-width: 1px;
}

#clock p {
    color: black;
    font-family: 'W95FA', monospace;
    font-size: small;
    text-align: center;
    line-height: 22px;
    margin: auto;
}

#startmenu-dumb-horizontal-line {
    background: linear-gradient(to bottom,
            /* #c3c3c3  */
            #808080 0px,
            #ffffff 1px,
            #ffffff 1px,
            #c3c3c3 2px);
    position: absolute;
    height: 2px;
    width: 137px;
    left: 24px;
    bottom: 40px;
}

#startmenu-shutdown-button {
    position: absolute;
    width: 137px;
    left: 24px;
    bottom: 3px;
    height: 37px;

    align-items: center;
    display: flex;
}

#startmenu-shutdown-button .icon {
    height: 24px;
    width: auto;
    padding-left: 10px;
    padding-right: 8px;
}

#startmenu-shutdown-button p {
    color: black;
    font-family: 'W95FA', monospace;
    font-size: small;
}

#shutdown-dialog {
    position: fixed;
    width: 339px; /* something got messed up and this changed from 347 to 339 */
    height: 222px;

    top: 50%;
    left: 50%;
    margin-top: -111px;
    /* Negative half of height. */
    margin-left: -173.5px;
    /* Negative half of width. */

    display: none;
}

#shutdown-dialog-titlebar {
    position: absolute;

    width: 341px;
    height: 18px;

    top: 3px;
    left: 3px;

    background-color: #000080;
}

#shutdown-dialog-titlebar p {
    position: absolute;
    left: 3px;
    top: -11px;

    color: white;
    font-family: 'W95FA', monospace;
    font-size: small;
    font-weight: bold;
}

#shutdown-dialog-titlebar img {
    position: absolute;
    right: 2px;
    top: 2px;
}

#shutdown-dialog #shutdown-image {
    position: absolute;
    left: 16px;
    top: 40px;
    image-rendering: pixelated;
}

#window-buttons {
    display: flex;
    position: absolute;

    bottom: 16px;
    right: 14px;
    gap: 6px;
}

.window-button {
    color: black;
    font-family: 'W95FA', monospace;
    font-size: small;

    border-image-source: url("/media/window/secondary-button.png");
    border-image-slice: 3 fill;
    border-image-width: 2px;

    width: 78px;
    height: 23px;

    display: flex;
    justify-content: center;
    align-items: center;
}

#yes-button {
    border-image-source: url("/media/window/primary-button.png");
    border-image-slice: 4 fill;
    border-image-width: 3px;
}

/* broken */
.selector {
    content: '';
    /* width: 100%; */
    /* height: 100%; */
    width: 70px;
    height: 15px;
    position: absolute;
    border: dotted 1px black;
}

#shutdown-options-parent {
    color: black;
    font-family: 'W95FA', monospace;
    font-size: small;

    position: absolute;
    left: 60px;
    top: 34px;
    display: flex;
    align-items: center;
    height: 27px;
}

#shutdown-options {
    position: absolute;
    top: 27px;
    width: 250px;
}

.radio-text-combo {
    display: flex;
    align-items: center;
    height: 22px;
}

.radio-text-combo p {
    float: right;
    margin-left: 5px;
}

.radio-text-combo img {
    float: left;
    width: 12px;
    height: 12px;
}

#shutdown-flow {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;
    background-image: url("media/Clouds_\(Windows_95\).png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 10500;

    /* align-items: center; */
    justify-content: center;
    flex-direction: column;
}

#shutdown-flow h2 {
    /* position: absolute; */
    /* left: 50%; */
    /* top: 30%; */
    /* -webkit-transform: translate(-50%, -30%); */
    /* transform: translate(-50%, -30%); */

    color: #dc6f25;
    font-size: 50px;
}

#restart-flow {
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;
    background-color: black;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 11000;

    justify-content: center;
    flex-direction: column;
    display: none;
}

@keyframes cursor-blink {
    0% {
        opacity: 0%;
    }
}

#blinking-cursor {
    content: "";
    width: 15px;
    height: 3px;
    background-color: white;
    animation: cursor-blink 0.25s steps(2) infinite;
    margin: 50px;
}

#restart-flow-text-area {
    color: grey;
    font-family: 'IBM', monospace;
    font-size: 15px;
    text-align: left;

    margin: 50px;
}

/* 
#restart-flow-text-area p {
    display: none;
} */

#restart-flow-footer {
    color: grey;
    font-family: 'IBM', monospace;
    font-size: 15px;
    text-align: left;
    margin: 50px;
    position: absolute;
    bottom: 0px;
    display: none;
}

#restart-flow img {
    margin: 50px;
    position: absolute;
    right: 0px;
    top: 0px;
    display: none;
}

@property --num {
    syntax: "<integer>";
    initial-value: 640;
    inherits: false;
}

#restart-flow-text-area #ram-inc {
    counter-reset: num var(--num);
    animation: animate 1.5s forwards linear;
}

#restart-flow-text-area #ram-inc::after {
    content: "Memory Test :\00a0\00a0" counter(num)"K OK"
}

@keyframes animate {
    from {
        --num: 640;
    }

    to {
        --num: 32768;
    }
}

#boot-to-desktop {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;

    width: 100%;
    height: 100%;
    background-image: url("media/Clouds_\(Windows_95\).png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 2;

    justify-content: center;
    flex-direction: column;
}

.loading-bar {
    display: flex;
    /* gap: 2px; */
    background-color: #4f7fb8;
    /* padding: 4px; */
    /* border: 2px solid white; */
    width: 100%;
    max-width: 100%;
    position: absolute;
    bottom:0px;
}

.segment {
    flex-grow: 1;
    width: 20px;
    height: 20px;
    background-color: #4f7fb8;
    animation: load 1.5s infinite alternate;
    opacity: 0.3;
}

@keyframes load {
    0% { background-color: #4f7fb8; opacity: 1; }
    100% { background-color: #afb8c0; opacity: 1; }
}

.segment:nth-child(1) { animation-delay: 0s; }
.segment:nth-child(2) { animation-delay: 0.1s; }
.segment:nth-child(3) { animation-delay: 0.2s; }
.segment:nth-child(4) { animation-delay: 0.3s; }
.segment:nth-child(5) { animation-delay: 0.4s; }
.segment:nth-child(6) { animation-delay: 0.5s; }
.segment:nth-child(7) { animation-delay: 0.6s; }
.segment:nth-child(8) { animation-delay: 0.7s; }
.segment:nth-child(9) { animation-delay: 0.8s; }
.segment:nth-child(10) { animation-delay: 0.9s; }
.segment:nth-child(11) { animation-delay: 1s; }
.segment:nth-child(12) { animation-delay: 1.1s; }
.segment:nth-child(13) { animation-delay: 1.2s; }
.segment:nth-child(14) { animation-delay: 1.3s; }
.segment:nth-child(15) { animation-delay: 1.4s; }
.segment:nth-child(16) { animation-delay: 1.5s; }
.segment:nth-child(17) { animation-delay: 1.6s; }
.segment:nth-child(18) { animation-delay: 1.7s; }
.segment:nth-child(19) { animation-delay: 1.8s; }
.segment:nth-child(20) { animation-delay: 1.9s; }



/* testing */

#startmenu-entries-list {
    position: absolute;
    left: 24px;
    bottom: 42px;
    width: 137px;
    /* maybe 138? */
    height: 194px;
}


.startmenu-entry {
    height: 32px;
    width: 137px;
    align-items: center;

    display: flex;
    position: relative;
}

.startmenu-entry p {
    color: black;
    font-family: 'W95FA', monospace;
    font-size: small;
}

.startmenu-entry .icon {
    height: 24px;
    width: auto;
    padding-left: 10px;
    padding-right: 8px;
    /* image-rendering:pixelated; */
}

.startmenu-entry .arrow {
    position: absolute;
    right: 6px;
    image-rendering: pixelated;
}


.startmenu-entry-child-box {
    position: absolute;
    left: calc(100% - 2px); /* this only works because of the relative parent */
    top: -3px;
    display: flex;
    flex-direction: column;

    border-image-source: url("/media/button-border.png");
    border-image-slice: 3 fill;
    border-image-width: 2px;
    z-index: 25;
    padding: 3px;
}

.startmenu-entry-child {
    width: 162px;
    height: 22px;
    align-items: center;
    display: flex;
    position: relative; /* critical for aligning the child-box */
}


.startmenu-entry-child .icon {
    height: 16px;
    width: auto;
    padding-left: 7px;
    padding-right: 6px;
}

.startmenu-entry-child p {
    color: black;
    font-family: 'W95FA', monospace;
    font-size: small;
}

.startmenu-entry-child .arrow {
    position: absolute;
    right: 6px;
    image-rendering: pixelated;
}

mark.white-text {
    color: white;
    background: none;
}

#taskbar-items {
    position: relative;
    top: 4px;
    left: 60px;
    /* height: 22px; */
    max-width: calc(100% - 135px);
    display: flex;
    flex-direction: row;
    gap: 3px;
    overflow-x: scroll;
}

.taskbar-item {
    width: 180px;
    height: 22px;
    display: flex;

    align-items: center;

    border-image-source: url("/media/button-border.png");
    border-image-slice: 3 fill;
    border-image-width: 2px;
    gap: 3px;
    min-width: 24px;
}

.taskbar-item img {
    width: 16px;
    height: 16px;
    margin-left: 4px;
}

.taskbar-item p {
    color: black;
    font-family: 'W95FA', monospace;
    font-size: small;
    font-weight: normal;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.taskbar-item-open {
    width: 180px;
    height: 22px;
    display: flex;

    align-items: center;

    border-image-source: url("/media/button-pressed.png");
    /* the checkerboard should really be offset down by 1, which should be possible
    by using a combination of slice like 4 3 3 3. however, it looks pretty
    bad on some browsers (notably on mac), so we might just have to take the L
    on this one. */
    border-image-slice: 3;
    border-image-width: 2px;
    gap: 3px;
    min-width: 24px;

    /* this is all still a little wonky */
    background-image: url("/media/checkerboard.png");
    /* background-repeat: repeat-x; */
    background-position: left bottom;
    background-size: 2%; /* eyeballing it here */
    /* image-rendering: pixelated; */

    /* alt */
    /* background: repeating-conic-gradient(#808080 0% 25%, transparent 0% 50%) 
    50% / 3px 3px */
}

.taskbar-item-open img {
    width: 16px;
    height: 16px;
    margin-left: 4px;
}

.taskbar-item-open p {
    color: black;
    font-family: 'W95FA', monospace;
    font-size: small;
    font-weight: bolder;
    overflow:hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.draggable-window {
    border-image-source: url("/media/window/window.png");
    border-image-slice: 4 fill;
    border-image-width: 3px;
    background-color: #808080;

    padding: 4px;
}

.draggable-window p {
    color: black;
    font-family: 'W95FA', monospace;
    font-size: small;
}

#menu-bar {
    display: flex;
    height: 20px;
    align-items:center;
}

#menu-bar .menu-bar-entry {
    display: flex;
    height: 18px;
    align-items: center;
}

#menu-bar .menu-bar-entry p {
    padding: 6px;
}

#file-explorer {
    position: fixed;
    width: 480px;
    height: 320px;

    top: 50px;
    left: 50px;

    /* margin: 50%; */
    /* margin-top: -111px; */
    /* Negative half of height. */
    /* margin-left: -173.5px; */
    /* Negative half of width. */

    /* display: none; */
    display: none;
    flex-direction: column;
    z-index: 1;
}

#notepad {
    position: fixed;
    width: 320px;
    height: 240px;
    top: 70px;
    left: 400px;

    display: none;
    flex-direction: column;
    z-index: 1;
}

#notepad textarea {
    resize: none;
    outline: none;

    font-family: 'W95FA', monospace;
    font-size: small;
    /* font-weight: bold; */
}

#notepad ::selection{
    background-color: #000080;
    color: white;
}

#titlebar {
    position: relative;
    height: 18px;

    background-color: #000080;
    display: flex;
    align-items: center;
}

#window-title {
    display: flex;
    align-items: center;
    padding-left: 2px;
    gap: 4px;
}

#window-title img {
    width:16px;
    height:16px;
}

#window-title p {
    color: white;
    font-family: 'W95FA', monospace;
    font-size: small;
    font-weight: bold;
}

#action-buttons {
    position: absolute;
    display: flex;
    gap: 2px;
    right: 2px;
}

#action-buttons #max-min {
    display: flex;
    gap: 0px;
}

#action-buttons img {
    width: 16px;
    height: 14px;
}

#grey-line {
    height: 1px;
    background-color: #808080;
}

#white-line {
    height: 1px;
    background-color: #ffffff;
}

#toolbar {
    height: 22px;
    display: flex;
    margin-top: 2px;
}


#split-content {
    display: flex;
    flex-direction:row;
    gap: 3px;

    flex-grow: 1;
}

#all-folders {
    display: flex;
    flex-direction: column;
    min-width: 120px;
    gap: 1px;
}

#contents {
    display: flex;
    flex-direction: column;
    min-width: 180px;
    min-height: 150px;
    flex-grow: 1;
}

.content {
    border-image-source: url("/media/window/content-box.png");
    border-image-slice: 3 fill;
    border-image-width: 3px;
    height: max-content;
    min-height: 100px;
    height: 100%;
    padding: 3px;

    display: flex;
    flex-direction: column;
    overflow: auto;
}

#contents .content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.content p {
    white-space: nowrap;
}

#file-explorer .folder-icon {
    width: 16px;
    height: 16px;
    align-items: center;
    display: flex;
    z-index: 1;
}

.folder-icon .folder-img {
    margin: auto;
    z-index: 1;
}

.folder-icon .drive-img {
    width: 16px;
    height: 15px;
    margin: auto;
    z-index: 1;
}

.folder-icon .computer-img {
    width: 15px;
    height: 15px;
    margin: auto;
    z-index: 1;
}

#file-explorer #all-folders .content {
    padding-left: 6px;
}

.vertical-line {
    position: absolute;
    content: "";
    top: -8px;
    left: calc(19px + 4.5px);
    height:100%; /* 16px is per row */
    width: 1px;
    border-left: 1px dotted grey;
    z-index: 0;
}
/* 
.folder-contents::after {
    position: absolute;
    content: "";
    bottom: 8px;
    left: calc(19px + 4.5px);
    height: 100%;
    width: 1px;
    border-left: 1px dotted grey;
    z-index: 0;
} */

.folder::after {
    position: absolute;
    content: "";
    bottom: 8px;
    left: 4.5px;
    width: 12px;
    border-bottom: 1px dotted grey;
    z-index: 0;
}

.icon-title-combo {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.icon-title-combo p {
    white-space: nowrap;
    overflow: hidden;
}

.content-depth-holder {
    position: relative;
    display: flex;
    flex-direction: row;
}

#text-display {
    margin-top: 2px;
    border-image-source: url("/media/clock-border.png");
    border-image-slice: 2 fill; /* might be 1 ? */
    border-image-width: 1px;
    height: 19px;
    align-items: center;
    justify-content: left;
    display: flex;
    width: 100%;
    position: relative;
}

#text-display p {
    padding: 4px;
}

#text-display img {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

#window-footer {
    display: flex;
    flex-direction: row;
}

.folder-contents {
    position: relative;
    display: none;
    padding-left: 19px;
}

.folder {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 16px;
    position: relative;
    padding-left: 16px;

    /* little smoke n mirrors action */
    /* background-color: blue; */
    z-index: 1;
    cursor: default;
}

.folder ::selection {
    background-color: transparent;
}

#file-explorer .file {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 16px;
    position: relative;

    /* little smoke n mirrors action */
    /* background-color: blue; */
    z-index: 1;
    cursor: default;
}

#file-explorer .file ::selection {
    background-color: transparent;
}

#file-explorer .file-icon {
    /* this seems to fix some padding issue */
    width: 16px;
    height: 16px;
    align-items: center;
    display: flex;
    z-index: 1;
}

#file-explorer .file-icon img {
    /* this seems to fix some padding issue */
    width: 16px;
    height: 16px;
}

.expand-icon {
    position: absolute;
    left: 0px;
    height: 9px;
    width: 9px;
    z-index: 1;
    cursor: default;
}