:root {
    --photo-background-color: rgb(236, 236, 236);
}

.image-container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    width: 300px;
    height: 400px;
    right: auto;
    top: auto;
    background-color: var(--photo-background-color);
    transform: translate(0, 0) rotateY(0deg);
}

@keyframes flipAnimation {
    0% {
        transform: rotateY(0deg);

    }
    50% {
        transform: rotateY(90deg);
    }
    100% {
        transform: rotateY(180deg);
    }
}

@keyframes flipAnimationReverse {
    0% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(0deg);
    }
}

.me-photo {
    position: relative;
    bottom: 20px;
    width: 250px;
    height: 300px;
    background: var(--photo-background-color);
    box-shadow: none;

}

@keyframes showPhoto {
    0% {
        background: var(--photo-background-color);
        box-shadow: none;
        opacity: 0;
    }

    49% {
        background: var(--photo-background-color);
        box-shadow: none;
        opacity: 0;
    }

    50% {
        box-shadow:
            inset 0px 0px 100px 200px rgb(0, 0, 0),
            inset 0px 0px 5px 5px rgb(0, 0, 0, 0.5);
        background: url("./../images/me.jpg") center/cover;
        opacity: 1;
    }

    100% {
        box-shadow:
            inset 0px 0px 100px 200px rgba(0, 0, 0, 0),
            inset 0px 0px 5px 5px rgb(0, 0, 0, 0.5);
        background: url("./../images/me.jpg") center/cover;
        opacity: 1;
    }
}
@keyframes hidePhoto {
    0% {
        background: var(--photo-background-color);
        box-shadow: none;
        opacity: 0;
    }

    49% {
        background: var(--photo-background-color);
        box-shadow: none;
        opacity: 0;
    }

    50% {
        box-shadow:
            inset 0px 0px 100px 200px rgb(0, 0, 0),
            inset 0px 0px 5px 5px rgb(0, 0, 0, 0.5);
        background: url("./../images/me.jpg") center/cover;
        opacity: 1;
    }

    100% {
        box-shadow:
            inset 0px 0px 100px 200px rgba(0, 0, 0, 0),
            inset 0px 0px 5px 5px rgb(0, 0, 0, 0.5);
        background: url("./../images/me.jpg") center/cover;
        opacity: 1;
    }
}




/* Make a black cover that changes to transparent 
with time to look like photo from the camera thingy */
.photo-cover {
    opacity: 0;
}

/* A shadow that follows the x-axis of the photo */
.photo-shadow {
    width: auto;
}