:root {
    --appleEase: cubic-bezier(.42, 0, .58, 1);
    --appleTransition: .2s var(--appleEase);
}

body, html {
    height: 100%;
    margin: 0;
    width: 100%;
    padding: 0px;
}

body {
    background: #333;
    background-image: url("./wallpaper.webp");
    background-size: cover;
    background-repeat: no-repeat;
}

#wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#app-main {
    width: 90%;
    height: 90%;
    max-width: 1366px;
    max-height: 768px;
    overflow: hidden;
    border-radius: 10px;
    background: rgb(100 100 100 / 20%);
    box-shadow: 0px 0px 0px 1px rgb(200 200 200 / 20%),
    0px 8px 15px 4px rgb(0 0 0 / 25%);
    backdrop-filter: blur(64px) saturate(180%);
    animation: windowIn var(--appleEase) .35s;
}

[hidden] {
    display: none;
}

.cider-splash {
    width: 200px;
    height: 200px;
    background-image: url("./Cider.png");
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 10px 10px rgb(255, 42, 85));
    animation: windowIn var(--appleEase) .35s;
}

#app-main>iframe {
    width: 100%;
    height: 100%;
    border:0px;
}

@keyframes windowIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}