body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: white;
    min-height: 200vh;
    scrollbar-width: none;
}

:root {
    --ideal-card-width: 50vw;
    --ideal-card-height: calc(var(--ideal-card-width) / 1.5);
    --scroll: 0px;
    --card-width: min(var(--ideal-card-width), 400px);
    --card-height: min(var(--ideal-card-height), calc(400px / 1.5));
    --identify-blue: #0e2b6b99;
}

@keyframes putInPlace {
    from {
        transform: rotateY(0deg);
    }
    20% {
        transform: rotateY(90deg);
    }
    to {
        transform: rotateY(180deg);
        opacity: 0%;
        height: 100vh;
        width: 100vw;
        max-height: 100vh;
        max-width: 100vw;
        left: 0;
        top: 0;
        pointer-events: none;
    }
}
@keyframes showContent {
    80% {
        opacity: 0;
    }
    to {
        opacity: 1;
        pointer-events: auto;
    }
}

.card {
    border-radius: 1em;
    text-align: center;
    background-image: url("../images/identify_wide.png");
    background-size: cover;
    width: var(--card-width);
    height: var(--card-height);
    max-width: 400px;
    max-height: calc(400px / 1.5);
    box-shadow: var(--identify-blue) 1px 1px 100px 10px;
    left: calc(50vw - var(--card-width) / 2);
    top: calc(50vh - var(--card-height) / 2);
    position: fixed;
    /* transition: transform 0.2s ease-in-out; */
    animation: putInPlace 1s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    will-change: height, width, top, left, transform, opacity;
    scrollbar-width: none;
}

.content {
    width: 100vw;
    height: 110vh;
    position: absolute;
    top: 110vh;
    left: 0;
    opacity: 0;
    animation: showContent 1s linear;
    animation-play-state: paused;
    animation-delay: calc(var(--scroll) * -1s);
    animation-iteration-count: 1;
    animation-fill-mode: both;
    background-color: white;
    pointer-events: none;
}

.nextEvent {
    width: 100vw;
    position: fixed;
    top: 2em;
}
.nextEvent > .title {
    margin: 0 auto;
    text-align: center;
    text-shadow: var(--identify-blue) 0px 0px 20px;
}

.nextEvent > .description {
    margin: 0 auto;
    text-align: center;
}

/* iframe {
    height: 130vh;
} */