@import url("./main.css");

body {
    position: relative;
    display: grid;
    place-items: center;

    > iframe {
        user-select: none;

        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        border: none;

        transition: all 0.5s ease;

        &.loading {
            filter: blur(10px);
            pointer-events: none;
        }
    }

    > .centered {
        z-index: 99;

        width: 400px;

        background-color: var(--kream);
        color: var(--bluck);

        padding: 16px;

        border-radius: 8px;
        gap: 8px;

        display: flex;
        flex-direction: column;

        > .info {
            display: flex;
            gap: 8px;

            > .icon {
                height: 32px;
                aspect-ratio: 1;

                object-fit: cover;
                object-position: 0;
            }
        }
    
        > .logs {
            background-color: var(--bluck);
            color: var(--kream);

            font-family: monospace;
            font-size: 12px;

            padding: 6px;
            border-radius: 4px;

            word-break: break-all;
        }
    }
}