:root {
    --foreground: oklch(100% 0 0);
    --background: oklch(0% 0 0);

    --window-frame-width: 1.5em;
    --window-frame-color: oklch(68.533% 0.07059 81.83);

    --window-outer-frame-width: 1.5em;
    --window-outer-frame-angle: 45deg;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    width: 100dvw;
    height: 100dvh;
    position: relative;
    background: oklch(56.921% 0.10488 43.254);
    overflow: hidden;
}

/* === WINDOW === */
.window {
    position: relative;
    background-color: oklch(54.017% 0.13647 261.191);
    background-image: url(lofi_city.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    top: 1.5em;
    left: 40%;
    transform: translateX(-50%);
    width: clamp(300px, 50vw, 600px);
    aspect-ratio: 686 / 386;
}

.window-frame-t {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--window-frame-width);
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--window-frame-width)) 100%, var(--window-frame-width) 100%);
    background: var(--window-frame-color);
    background-image: linear-gradient(to bottom, transparent, oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.3)), radial-gradient(circle at 50% 100%, transparent 80%, oklch(0% 0 0 / 0.3));
}

.window-frame-t-out {
    position: absolute;
    top: calc(var(--window-outer-frame-width) * sin(var(--window-outer-frame-angle)));
    left: calc(cos(var(--window-outer-frame-angle)) * var(--window-outer-frame-width) / 2);
    width: 100%;
    height: calc(-1 * var(--window-outer-frame-width) * sin(var(--window-outer-frame-angle)));
    background: oklch(55.142% 0.047 100.295);
    transform: skewX(calc(90deg - var(--window-outer-frame-angle)));
}

.window-frame-l {
    position: absolute;
    top: 0px;
    left: 0px;
    width: var(--window-frame-width);
    height: 100%;
    clip-path: polygon(0 0, 100% var(--window-frame-width), 100% calc(100% - var(--window-frame-width)), 0 100%);
    background: var(--window-frame-color);
    background-image: linear-gradient(to right, transparent, oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.3)), radial-gradient(circle at 50% 100%, transparent 80%, oklch(0% 0 0 / 0.3));
}

.window-frame-l-out {
    position: absolute;
    top: calc(sin(var(--window-outer-frame-angle)) * var(--window-outer-frame-width) / 2);
    left: calc(var(--window-outer-frame-width) * cos(var(--window-outer-frame-angle)));
    height: 100%;
    width: calc(-1 * var(--window-outer-frame-width) * cos(var(--window-outer-frame-angle)));
    background: oklch(55.142% 0.047 100.295);
    transform: skewY(calc(var(--window-outer-frame-angle)));
}

.window-frame-r {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--window-frame-width);
    height: 100%;
    clip-path: polygon(0 var(--window-frame-width), 100% 0, 100% 100%, 0 calc(100% - var(--window-frame-width)));
    background: var(--window-frame-color);
    background-image: linear-gradient(to left, transparent, oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.3)), radial-gradient(circle at 50% 100%, transparent 80%, oklch(0% 0 0 / 0.3));
}

.window-frame-r-out {
    position: absolute;
    top: calc(sin(var(--window-outer-frame-angle)) * var(--window-outer-frame-width) / 2);
    right: calc(-1 * var(--window-outer-frame-width) * cos(var(--window-outer-frame-angle)));
    height: 100%;
    width: calc(var(--window-outer-frame-width) * cos(var(--window-outer-frame-angle)));
    background: oklch(55.142% 0.047 100.295);
    transform: skewY(var(--window-outer-frame-angle));
}

.window-frame-b {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: var(--window-frame-width);
    clip-path: polygon(var(--window-frame-width) 0, calc(100% - var(--window-frame-width)) 0, 100% 100%, 0 100%);
    background: var(--window-frame-color);
    background-image: linear-gradient(to top, transparent, oklch(0% 0 0 / 0.1), oklch(0% 0 0 / 0.3)), radial-gradient(circle at 50% 100%, transparent 80%, oklch(0% 0 0 / 0.3));
}

.window-frame-b-out {
    position: absolute;
    bottom: calc(-1 * var(--window-outer-frame-width) * sin(var(--window-outer-frame-angle)));
    left: calc(cos(var(--window-outer-frame-angle)) * var(--window-outer-frame-width) / 2);
    width: 100%;
    height: calc(var(--window-outer-frame-width) * sin(var(--window-outer-frame-angle)));
    background: oklch(55.142% 0.047 100.295);
    transform: skewX(calc(90deg - var(--window-outer-frame-angle)));
}

/* === TABLE === */
.table {
    position: relative;
    bottom: -7vw;
    left: -35vw;
    width: 60vw;
    height: 50vh;
    background: oklch(69.973% 0.0816 77.165);
    border-radius: 1em;

    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(-60deg);

    box-shadow:
        1px 1px 0 oklch(75.2% 0.12586 80.16),
        4px 4px 0 oklch(75.2% 0.12586 80.16),
        8px 8px 0 oklch(75.2% 0.12586 80.16);
}

.table .laptop {
    position: absolute;
    right: 15%;
    top: 25%;
    width: 90px;
    height: 120px;

    transform-style: preserve-3d;

    transform: rotateZ(15deg);
}

.table .laptop .laptop-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: white;
    border-radius: 4px;
    border: 2px solid #333;

    transform-origin: top;

    transform: rotateX(-100deg);
}

.table .laptop .laptop-bottom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e6e6e6;
    border-radius: 4px;

    box-shadow: 2px 2px 0 1px #a0a0a0;
    border: 1px solid #999;
}