style.css

/************************************************************************ RESET */

/* button:not(:disabled):active { */
button:not(:disabled).active {
    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
    padding: 2px 11px 0 13px;
}

* {
    user-select: none;
}
 
:root {
    --windows-blue: #0f4895;
}

html {
    background-color: black; /* overridden in js */
}
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    cursor: none;
}
.perspective {
    perspective: 214vh;
    transition: transform .8s;
}

@keyframes flicker {
    50% {
        top: -3px;
        background: linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.0) 50%),linear-gradient(90deg,rgba(255,0,0,.1),rgba(0,255,0,.05),rgba(0,0,255,.1),rgba(0,0,0,.2));
    }
}

.crt::before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    content: " ";
    display: block;
    background: linear-gradient(rgba(18,16,16,0) 50%,rgba(0,0,0,.1) 50%),linear-gradient(90deg,rgba(255,0,0,.2),rgba(0,255,0,.05),rgba(0,0,255,.1),rgba(0,0,0,.2));
    z-index: 999999999999;
    background-size: 100% 4px,3px 100%;
    pointer-events: none;
    filter: contrast(50%);  /* it helps... lower this to 50% for a stronger effect */
    animation: flicker .04s step-end infinite;
}

img.crt-screen {
    height: 100vh;
    position: absolute;
    top: 0;
    left: calc(50% - 50vh);
    z-index: 2;
    pointer-events: none;
}
#crt-screen-on-button {
    width: 10vh;
    height: 11vh;
    position: absolute;
    top: 69vh;
    left: calc(50vw + 31vh);
    z-index: 99;
    /* background: rgba(255, 0, 0, 0.61); */
}
#crt-screen-led-indicator {
    width: 2.5vh;
    height: 2.5vh;
    position: absolute;
    top: 73.15vh;
    left: calc(50vw + 38vh);
    z-index: 99;
    pointer-events: none;
    background: radial-gradient(circle, rgba(255,163,133,1) 18%, rgba(255,127,54,0.4198479813136412) 20%, rgba(137,255,0,0) 69%);
    animation: standbyled 2s step-end infinite;
}

@keyframes standbyled {
    0% {

    }
    60% {
        background: radial-gradient(circle, rgba(91,91,91,1) 0%, rgba(43,43,43,1) 18%, rgba(255,127,54,0) 20%, rgba(137,255,0,0) 69%);
    }
}

.on #crt-screen-led-indicator {
    background: radial-gradient(circle, rgba(138,255,0,1) 18%, rgba(138,255,0,0.4872637116507198) 20%, rgba(137,255,0,0) 69%);
    animation: none;
}


#smash-hitbox {
    width: 36vh;
    height: 65vh;
    position: absolute;
    top: 20vh;
    left: calc(50vw - 67vh);
    z-index: 99;
    /* background: rgba(255, 0, 0, 0.61); */
}

@keyframes stickyanim {
    0% {
        transform: scale(2.5) translate(-10vh, 20vh);
    }
    100% {
        transform: skewY(358deg);
    }
}
.sticky-note {
    width: 14vh;
    height: 16vh;
    position: absolute;
    top: 71vh;
    left: calc(50vw + -25vh);
    background-image: url(img/sticky_note.svg);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 99;
    padding: 4vh 4.5vh 0 2.2vh;
    font-family: 'Shadows Into Light', cursive;
    font-size: 2vh;
    letter-spacing: -.2px;
    color: #0e3067;
    animation: stickyanim .2s ease-out;
    transition: transform .1s;
}

#vignette-and-scratches {
    pointer-events: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999999999991;
    background-image: url("img/vignette_and_scratches.png");
    background-size: cover;
}
#vignette-and-scratches::after {
    height: 50%;
    width: 100%;
    position: absolute;
    content: "";
    background: url(img/vignette_and_scratches.png), radial-gradient(ellipse at bottom, rgba(58,59,61,1) 0%, rgba(27,27,29,1) 100%);
    background-size: cover;
    transition: .1s;
}
#vignette-and-scratches::before {
    height: 50%;
    width: 100%;
    position: absolute;
    bottom: 0;
    content: "";
    background: url(img/vignette_and_scratches.png), radial-gradient(ellipse at top, rgba(58,59,61,1) 0%, rgba(27,27,29,1) 100%);
    background-size: cover;
    transition: .1s;
    background-position-y: bottom;
}


.on #vignette-and-scratches::after {
    height: 0%;
}
.on #vignette-and-scratches::before {
    height: 0%;
}

@keyframes darkfading {
    0%, 50% {
        opacity: .2;
    }
    80% {
        opacity: .4;   
    }
}
.on.screen-dark #vignette-and-scratches::after {
    height: 80%;
    opacity: .3;
}
.on.screen-dark #vignette-and-scratches::before {
    height: 80%;
    opacity: .3;
    animation: darkfading 3s linear infinite;
}

@keyframes blackimpact {
    0%, 50% {
        height: 40%;
    }
    51%, 100% {
        height: 20%;   
    }
}

.on .impact #vignette-and-scratches::before {
    animation: blackimpact .1s linear infinite;
    transition: 0s;
    opacity: .3;
}


.progress-bar {
    /* color: var(--windows-blue);
    font-size: 18px;
    letter-spacing: -2px; */
    width: 100%;
}

.not-responding-window {
    filter: grayscale(1) contrast(.4) brightness(1.3);
}

.not-responding-window * {
    pointer-events: none;
}

@keyframes viruswindowred {
    0%, 50% {
        background: #a7a6a5;
    }
    51%, 100% {
        background: #c28d82;
    }
}

.sys32-deleting-window {
    animation: viruswindowred infinite linear;
    animation-duration: 4s;
}

.sys32-deleting-window .title-bar {
    background: linear-gradient(
        90deg,rgb(119, 0, 0),#f86349);
}
.sys32-deleting-window .progress-bar {
    color: rgb(119, 0, 0);
}

@keyframes windowoos {
    0% {
        transform: translate(-70vh, 0) scale(0);
    }
    2% {
        transform: translate(-40vh, 0) scale(1.2, .8);
    }
    3.5% {
        transform: translate(5vh, 0) scale(.8, 1.3);
    }
    5% {
        transform: translate(10vh, 3) scale(1.2, .9) rotate3d(.05, .2, 0, 37deg);
    }
    7% {
        transform: translate(20vh, 10vh) rotate3d(.05, .2, 0, 60deg);
    }
    15%, 100% {
        transform: translate(63vh, 100vh) rotate3d(.05, .2, 0, 100deg);
    }
}

.window-out-of-screen {
    animation: windowoos 4s linear forwards;
    pointer-events: none;
    z-index: -1;
}

#start-menu {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 9999980;
    background: rgba(0,0,0,.2);
}

#start-menu .window {
    width: 140px;
    height: 250px;
    position: absolute;
    bottom: 31px;
    left: 2px;
    padding-left: 26px;
}

#start-menu .window::after {

    position: absolute;
    left: 3px;
    top: 2px;
    height: calc(100% - 12px);
    width: 14px;
    background-color: var(--windows-blue);
    padding: 4px;
    font-size: 12px;
    font-weight: bold;
    color: white;

    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: right;
    content: "Windows 97";
}


.program-link {
    padding: 7px;

}

.program-link:hover {
    background: var(--windows-blue);
    color: white;
}

.program-link img {
    pointer-events: none;

    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
    margin-left: 0px;

}

#interweb-explorer .window-body {
    height: calc(100% - 36px);
}

#interweb-explorer iframe {
    height: calc(100% - 52px);
    background-color: white;
    width: 100%;
}

/************************************************************************ SCREEN */

#screen, .glass {
    width: 66vh;
    height: 54vh;
    position: absolute;
    top: 12vh;
    left: calc(50% - 23vh);
    transform: rotate3d(0.1, 0.1, 0.006, 31deg);
    overflow: hidden;
}
.glass {
    z-index: 99999999999999;
    pointer-events: none;
}
#screen {
    background-color: #008080;
    image-rendering: pixelated;
    font-family: "Pixelated MS Sans Serif",Arial;
    cursor: default;
}

@keyframes filterimpact {
    0%, 50% {
        filter: blur(5px);
    }
    51%, 100% {
        filter: contrast(3);
    }
}
.impact .crt {
    animation: filterimpact .1s linear infinite;
}
.on.screen-dark .crt {
    filter: contrast(4.5) blur(1px);
}

.window {
    position: absolute;
}

#minesweeper.window {
    width: 208px;
}

/************************************************************************ CLIPPY */

.clippy {
    position: absolute;
    cursor: grabbing;
    z-index: 99999999;
}
.holding-clippy .clippy {
    pointer-events: none;
}

.clippy .clippy-inner {
    position: relative;
    height: 11vh;
    width: 7vh;
}

.clippy .clippy-inner > * {
    background-repeat: no-repeat;
    background-size: contain;
}

.clippy .clippy-body {
    position: absolute;
    background-image: url(./img/clippy/clippy.png);
    height: 11vh;
    width: 7vh;
}

@keyframes clippy-brows-anim {
    0%, 80% { transform: translateY(0); }
    82% { transform: translateY(-14px); }
    84% { transform: translateY(0); }
    86% { transform: translateY(-14px); }
    88%, 100% { transform: translateY(0); }
}
.clippy .clippy-brows {
    animation: clippy-brows-anim 3s infinite;
    margin-top: 2vh;
    position: absolute;
    background-image: url("./img/clippy/clippy-brows.png");
    height: 11vh;
    width: 5.5vh;
}
@keyframes clippy-eyes-anim {
    0%, 80% { transform: scaleY(1); }
    80.5% { transform: scaleY(0); }
    81% { transform: scaleY(1); }
    81.5% { transform: scaleY(0); }
    82%, 100% { transform: scaleY(1); }
}
.clippy .clippy-eyes {
    animation: clippy-eyes-anim 10s infinite;
    transform-origin: 0% 35%;
    margin-top: 2vh;
    position: absolute;
    background-image: url("./img/clippy/clippy-eyes.png");
    height: 4vh;
    width: 5.5vh;
}

@keyframes clippy-release-to-clip-anim {
    0% { transform: scale(.8, 1.1); }
    50% { transform: scale(1.1, .8); }
    100% { transform: scale(.8, 1.1); }
}
.clippy.release-to-clip {
    animation: clippy-release-to-clip-anim .5s infinite ease;
    filter: drop-shadow(0 0 3px rgba(140, 255, 150, .8));
}

/************************************************************************ TASKBAR */
.taskbar {
    position: absolute;
    bottom: 0;
    background-color: #c2c2c2;
    width: 100%;
    border-top: 2px solid #fff;
    border-bottom: 2px #c2c2c2;
    height: calc(23px + 4px + 2px); /* + 4 is for the +2 margin on buttons the +2 px is */
}

.taskbar .homebutton {
    background-image: url("img/start-button.png");
    background-repeat: no-repeat;
    background-size: 44px;
    background-position: 13px 4px;
    padding: 5px;
    margin-left: 2px;
    margin-top: 2px;
    float: left;
}

.taskbar #openprograms * {
    float: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.taskbar #openprograms * button {
    margin-top: 1px;
}


/************************************************************************ HAND */


#hand {
    position: fixed;
    z-index: 9999999;
    height: 120vh;
    pointer-events: none;
    transition: transform 0.3s ease-in-out 0s;
}

#hand.click {
    transition: transform 0.025s ease-in-out 0s;
    transform: rotate3d(1, 0, 0, 15deg);
}

#hand.gone {
    transition: transform 1.0s ease-in-out 0s;
    transform: translate(1000px, 1000px);
}

@keyframes fistanim {
    from { transform: rotate(0deg) translateX(1vh) rotate(0deg) rotate(20deg); }
    50% { transform: rotate(180deg) translateX(2vh) rotate(-180deg) rotate(20deg); }
    to   { transform: rotate(360deg) translateX(1vh) rotate(-360deg) rotate(20deg); }
}
#hand.fist {
    animation: fistanim 1s linear infinite;
}

@keyframes smash {
    /* 0% {
        transform: rotate(20deg);
    } */
    0% {
        transform: rotate(30deg) translateY(-20vh);
    }
    100% {
        transform: rotate(20deg);
    }
}
#hand.smash {
    animation: smash .2s;
    transform: rotate(20deg);
}




@keyframes shake {
    0%   { transform: translate(1px, 1px) rotate(0deg); }
    10%  { transform: translate(-1px, -2px) rotate(-1deg); }
    20%  { transform: translate(20px, 0px) rotate(1deg); }
    30%  { transform: translate(-3px, 2px) rotate(0deg); }
    40%  { transform: translate(1px, -1px) rotate(1deg); }
    50%  { transform: translate(-1px, 2px) rotate(-1deg); }
    60%  { transform: translate(-3px, 1px) rotate(0deg); }
    80%  { transform: translate(3px, 1px) rotate(-1deg); }
    100%  { transform: translate(1px, 2px) rotate(0deg); }
}

.impact {
    animation: shake .4s;
    transform-origin: 90vh 50vw;
}

.pc-dead .perspective {
    transform: translate(300vh, 100vh) rotate(9deg);
}

.broken-glass {
    height: 20vh;
    position: absolute;
    z-index: 9999900000;
    pointer-events: none;
}


.smoke {
    position: absolute;
    top: 52vh;
    left: calc(50% - 53vh);
    pointer-events: none;
    z-index: -1;
    opacity: 1;
    transition: opacity 1s;
}
.pc-dead .smoke {
    opacity: 0;
}
.smoke li {
    position: absolute;
    list-style: none;
    width: 10vh;
    height: 10vh;
    background: radial-gradient(circle, rgba(91,91,91,1) 0%, rgba(255,127,54,0) 70%);
}
.smoke li:nth-child(even) {
    animation: smokePartEven 2.8s linear infinite;
}
.smoke li:nth-child(odd) {
    animation: smokePartOdd 2.8s linear infinite;
}
@keyframes smokePartEven {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(20vh, -80vh) scale(6);
        opacity: 0;
    }
}
@keyframes smokePartOdd {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-20vh, -80vh) scale(6);
        opacity: 0;
    }
}

.holding-clippy .window iframe {
    pointer-events: none;
}


@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.game-result {
    color: white;
    padding: 20px 40px;
    pointer-events: none;
}

.game-result h1 {
    font-weight: bold;
    margin: 38px 0;
    animation: appear .1s linear forwards;
    opacity: 0;
}

.game-result p {
    font-family: 'Shadows Into Light';
    font-size: 24px;
    animation: appear .1s linear forwards;
    opacity: 0;
    animation-delay: 2.5s;
}

.game-result ul {
    font-size: 30px;
    font-family: 'Shadows Into Light';
    padding: 0;
    list-style: none;
    animation: appear .1s linear forwards;
    opacity: 0;
    animation-delay: 2s;
}

.game-result h1:nth-child(even)
{
    transform: translateX(50px) rotate(-5deg);
    transform-origin: left;
    animation-delay: 1s;
}
.game-result h1:nth-child(odd)
{
    transform: rotate(5deg);
    transform-origin: left;
}