/*color palet*/
:root {
    --color1: black;
    --color2: snow;
    --color3: cyan;
}


@media (width < 1000px) {
    #center-wrapper {
        flex-direction: column;
    }

    #companion-img {
        z-index: -1;
        margin: 1em;
        transform: scale(2);
    }

    .in-void-content-wrapper {
        order: -1;
    }
}


body {
    background-color: var(--color1);
    color: var(--color2);
    height: 100vh;
    margin: 0px;
    display: grid;
    place-items: center;

    & a {
        color: var(--color3);
    }
}

#center-wrapper {
    display: flex;
    place-items: center;

    &>* {
        margin: 3em;
    }
}

.content-wrapper {
    border: 1px solid;
    padding: 1em;
    /* in case the light bulb get behind, ex mobile mode */
    background-color: rgb(from var(--color1) r g b / 90%);
}

.in-void-content-wrapper {
    display: grid;
    grid-auto-flow: row;
    margin: 2em;
    place-items: center;
}

#btn:active {
    transform: scale(0.9);
}

#catgirl {
    height: 38vh;
    image-rendering: crisp-edges;
    opacity: 0.75;
    position: fixed;
    z-index: -1;
    top: 3vh;
    right: 0px;

    @starting-style {
        animation: 1.8s ease-in-out 0.1s 1 normal running side-spawn;
    }
}

@keyframes side-spawn {
    from {
        /*
        exist because the image takes time to load
        idk correct width but height will always be bigger than width so i use height*/
        opacity: 0;
        translate: 38vh;
    }
}

#ampoule {
    height: 34vh;
    position: fixed;
    z-index: -1;
    bottom: 0px;
    --light-color: rgb(from snow r g b / 30%);
    background: radial-gradient(circle 16vh at 47% 40%, var(--light-color), transparent);
    animation: 5s linear 0s infinite alternate running light-flicker;
}

@keyframes light-flicker {

    /*base*/
    from {
        --light-color: rgb(from snow r g b / 25%);
    }

    /*going smooth to 20%*/
    15% {
        --light-color: rgb(from snow r g b / 22%)
    }

    18% {
        --light-color: rgb(from snow r g b / 21%)
    }

    20% {
        --light-color: rgb(from snow r g b / 20%)
    }

    /*going smooth to 40%*/
    35% {
        --light-color: rgb(from snow r g b / 18%)
    }

    38% {
        --light-color: rgb(from snow r g b / 17%)
    }

    40% {
        --light-color: rgb(from snow r g b / 16%)
    }

    /*going smooth to 60%*/
    55% {
        --light-color: rgb(from snow r g b / 18%)
    }

    58% {
        --light-color: rgb(from snow r g b / 19%)
    }

    60% {
        --light-color: rgb(from snow r g b / 20%)
    }

    /*going smooth to end%*/
    95% {
        --light-color: rgb(from snow r g b / 12%)
    }

    98% {
        --light-color: rgb(from snow r g b / 11%)
    }

    to {
        --light-color: rgb(from snow r g b / 10%);
    }
}