@import url("https://use.typekit.net/cox0tnh.css");

@import "./src/css/root.css";
@import "./src/css/main.css";

.frame {
    padding: var(--space-s);
    position: relative;
    width: 100%;
    height: 100%;
    border: var(--border);
    box-shadow: 0 0 var(--space-l) #000;

    &:before {
        content: "";
        position: absolute;
        inset: var(--space-s);
        display: block;
        border: var(--border);
        border-color: rgba(from var(--second-color) r g b / 0.2);

        box-shadow: inset 0 0 var(--space-s) #000;
    }

    & section {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        max-height: 100%;
        position: absolute;
        inset: calc(2 * var(--space-s));
        text-align: center;
        align-items: center;
        padding: var(--space-s);

        &:before {
            z-index: 0;
            content: "";
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-image: url("./src/images/moon.png");
            mask-image: radial-gradient(circle at 50% 50%, rgba(0,0,0,1) 10%, rgba(0,0,0,0.4) 20%);
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            
            --blur-radius: 1px;
            --blur-spread: 1px;
            --blur-color: rgb(67, 72, 80);

            filter: brightness(120%)
                    contrast(100%)
                    drop-shadow(var(--blur-radius) var(--blur-radius) var(--blur-spread) var(--blur-color))
                    drop-shadow(calc(var(--blur-radius) * (0 - 1)) calc(var(--blur-radius) * (0 - 1)) var(--blur-spread) var(--blur-color))
                    drop-shadow(1px 1px 0px rgb(0, 0, 0))
                    drop-shadow(-1px -1px 0px black)
                    saturate(150%)
                    opacity(90%);
        }

        & > * {
            min-height: 0;
            min-width: 0;
        }

        & img {
            width: auto;
            height: 50%;
        }

        & .empty {
            flex-grow: 1;   
        }

        & span {
            z-index: 10;
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-s);
            width: 100%;
            align-items: center;
            justify-content: center;
        }
    }
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .frame {
        padding: 0;

        &:before {
            border: 0;
            inset: 0;
        }

        & section {
            inset: 0;
        }
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (max-width: 768px) {
    body {
        padding: initial;
    }

    .frame {
        border: 0;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 992px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1200px) {}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {}