dialog {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;

    background-color: var(--dialog-bg);
    border: none;

    &[open] {
        animation: fadeIn 0.5s forwards;
    }

    & .container {
        width: 100%;
        height: 100%;
        display: grid;
        place-items: center;
    }

    & .container span {
        position: absolute;
        top: 5vh;
        font-size: 2em;
        padding: 0.3em;
        color: #0358db;
        background-color: white;
        border-radius: 0.5em;
        border: 3px solid var(--dark-blue);
    }

    & .container::after {
        content: 'x';
        cursor: pointer;

        position: absolute;
        top: 0.5em;
        right: 0.5em;
        padding: 0px 12px 20px 12px;

        font-size: 4em;
        font-weight: bolder;
        line-height: 0.6em;
        color: white;

        border: 1px solid white;
        border-radius: 100%;
        box-shadow: 0 0 7px 7px var(--box-shadow);
    }

    & img {
        outline: 4px solid var(--dark-blue);
        border-radius: 2em;
        box-shadow: 0 0 14px 14px var(--box-shadow);
        max-height: 80vh;
        max-width: 80vw;
    }

}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}