body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
}

:root {
    --font-size: 5px;
}

.toggle {
    position: absolute;
    filter: opacity(0);
    width: 25em;
    height: 35em;
    font-size: var(--font-size);
    cursor: pointer;
    z-index: 3;
}

.window {
    position: relative;
    box-sizing: border-box;
    width: 25em;
    height: 35em;
    font-size: var(--font-size);
    background-color: #d9d9d9;
    border-radius: 5em;
    box-shadow: 
        inset 0 0 8em rgba(0, 0, 0, 0.2),
        0 0 0 0.4em #808080,
        0 0 0 4em whitesmoke,
        0 0 0 4.4em #808080,
        0 2em 4em 4em rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.window .curtain {
    position: absolute;
    width: inherit;
    height: inherit;
    background-color: whitesmoke;
    top: -5%;
    border-radius: 5em;
    box-shadow:
        0 0 0 0.4em #808080,
        0 0 3em rgba(0, 0, 0, 0.4);
    transition: 0.5s ease-in-out;
    z-index: 2;
}

.toggle:checked ~ .window .curtain {
    top: -90%;
}

.window .curtain::before {
    content: '';
    position: absolute;
    width: 40%;
    height: 0.8em;
    background-color: #808080;
    left: 30%;
    bottom: 1.6em;
    border-radius: 0.4em;
}

.window .curtain::after {
    content: '';
    position: absolute;
    width: 1.6em;
    height: 0.8em;
    bottom: 1.6em;
    background-image: radial-gradient(orange, orangered);
    left: calc((100% - 1.6em) / 2);
    border-radius: 0.4em;
}

.toggle:checked ~ .window .curtain::after {
    background-image: radial-gradient(lightgreen, limegreen);
}

.window .clouds {
    position: relative;
    width: 20em;
    height: 30em;
    background-color: deepskyblue;
    left: calc((100% - 20em) / 2);
    top: calc((100% - 30em) / 2);
    border-radius: 7em;
    box-shadow: 0 0 0 0.4em #808080;
    overflow: hidden;
}

.clouds span {
    position: absolute;
    width: 10em;
    height: 4em;
    background-color: white;
    top: 20%;
    border-radius: 4em;
    animation: move 4s linear infinite;
}

@keyframes move {
    from {left: -150%;}
    to {left: 150%;}
}

.clouds span::before,
.clouds span::after {
    content: '';
    position: absolute;
    width: 4em;
    height: 4em;
    background-color: white;
    border-radius: 50%;
}

.clouds span::before {top: -2em; left: 2em;}
.clouds span::after {top: -1em; right: 1em;}

.clouds span:nth-child(2) {top: 40%; animation-delay: -1s;}
.clouds span:nth-child(3) {top: 60%; animation-delay: -0.5s;}
.clouds span:nth-child(4) {top: 20%; animation-delay: -1.5s;}
.clouds span:nth-child(5) {top: 70%; animation-delay: -3s;}

.clouds span:nth-child(4) {transform: scale(2);}
.clouds span:nth-child(5) {transform: scale(1.5);}