body {
  /* Colours */
    color: #f8fdff;
    background-color: #02252b;
    background-image: linear-gradient(#01161b, #02252b);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100%;

    /* Sizing */
    padding: 0;
    margin: 0;
    overflow: hidden;

    /* Font */
    font-family: "Fragment Mono", monospace;
    font-weight: 400;
    font-style: normal;
    user-select: none;
}

#appBar {
    width: 100vw;
    height: 5vh;
    outline: groove #f8fdff 2px;
    position: absolute;
    display: flex;
    align-items: center;
    gap: 1%;
    padding-left: 1vw;
    background-color: #02252b;
    filter: drop-shadow(0 0 10px #075664);
    z-index: 999999999;
}

#appBar .app {
    height: 80%;
    aspect-ratio: 1/1;
    outline: groove #f8fdff 1px;
    border-radius: 20%;
    background-color: #01161b;
    cursor: pointer;
}

.closed {
    filter: grayscale(100%);
    outline-width: 0.5px !important;
}

#overlay {
    width: 100vw;
    height: 100vh;
    position: absolute;
    opacity: 0%;
    z-index: 999999999;
    cursor: grabbing;
}

.hidden {
    visibility: hidden;
}

.hide {
    animation: hidden 0.1s linear forwards;
}

.show {
    animation: shown 0.1s linear forwards;
}

.window {
    width: 20vw;
    aspect-ratio: 1/1;
    left: 50vw;
    top: 50vh;
    background-color: #385e65;
    outline: groove #f8fdff 2px;
    border-radius: 3%;
    position: absolute;
    z-index: 0;
    overflow: hidden;
}

.window svg {
    bottom: 2%;
    right: 2%;
    position: absolute;
    cursor: pointer;
    stroke: #f8fdff;
}

@media (max-width: 600px) {
  .window {
    width: 35vw;
  }
}

.header {
    --radius: calc((20 / 100) * 3vw);
    background-color: #234247;
    width: 100%;
    height: 10%;
    outline: inherit;
    border-radius: var(--radius) var(--radius) 0 0;

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

.header:active {
    cursor: grabbing;
    filter: brightness(75%);
}

.header img {
    height: 70%;
    aspect-ratio: 1/1;
    margin-right: 0.8em;
    display: inline-block;
    border-radius: calc(var(--radius) / 2);
}

iframe {
    width: 100%;
    height: 90%;
}

@keyframes hidden {
    0% {
        opacity: 100%;
    }

    100% {
        visibility: hidden;
        opacity: 0%;
    }
}

@keyframes shown {
    0% {
        opacity: 0%;
        visibility: visible;
    }

    100% {
        opacity: 100%;
    }
}