:root {
    --navheight: 0;
}

.project.wrapper {
    position:relative;
    width:100%;
    padding-top: var(--margin);
}

/* VIDEO */
.project-video {
    position: relative;
    width: 100vw;  /* fallback for Safari 14 and older browsers */
    width: 100dvw;
    height: 100vh; /* fallback for Safari 14 and older browsers */
    height: 100dvh;
    overflow:hidden;
    background: black;
}

.video-UI, .preview {
    transition: opacity 0.1s ease-in-out;
}

.video-loading, .video-loading-text, .mobile-audio-message {
    transition: opacity 0.5s ease-in-out;
}

.iframe-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 35;

    cursor: pointer;
}

.video-UI {
    position: absolute;
    width:100%;
    height:100%;
    z-index:30;
    color:white;
    padding: var(--margin);

    pointer-events:none;

    display:flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;

    word-break: keep-all;        /* Prevents breaking within words */
    overflow-wrap: break-word;   /* Still allows long words to break when needed */
    hyphens: auto;

    cursor: pointer;
}

.play-btn {
    font-size:10em;
    line-height:1em;
}

.project-video .contact {
    position: absolute;
    width:100%;
    padding: var(--margin);
    left: 0;
    bottom: 0;
    z-index: 10;
}

.preview {
    position:absolute;
    width: 100vw;  /* fallback for Safari 14 and older browsers */
    width: 100dvw;
    height: 100vh; /* fallback for Safari 14 and older browsers */
    height: 100dvh;
    background-size:cover;
    background-position: center;
    z-index:25;
}

.video-loading, .mobile-audio-message {
    pointer-events: none;
}

.video-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;

    display: flex;
    justify-content: center;
    align-items: center;

    background: black;
    color: white;
    font-size: 2em;
}

.mobile-audio-message {
    position: absolute;
    top: 0;
    left: 0;
    padding: var(--margin);

    z-index: 10;

    color: white;
    font-size: 1em;
}

/* PROJECT */
.project-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--margin));
}

.gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--margin));
    width: 100%;
}

/* TEXT */
.info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--margin) * 2);
}

.info > .column {
    gap: var(--margin);
}

.more-appearances-btn {
    cursor: pointer;
    text-decoration: underline;
}

/* override vimeo iframe settings in styles.css */
.PDF {
    width: 100%;
    height: auto;
    aspect-ratio: 8.5/11; /*Estimate for pdfs*/

    min-width: 0;
    min-height: 0;
}

/* MEDIA QUERIES */
/* Targeting ipad */
@media (min-width: 801px) and (max-width: 1366px) {
    .play-btn {
        font-size:9em;
    }

    /* This needs to override style.css */
    .video-UI h1 {
        font-size:7em;
    }
}

@media (max-width: 1000px) {
    .info {
        grid-template-columns: 1fr;
        gap: var(--margin);
    }
}

/* Targeting mobile */
@media (max-width: 800px) {
    .video-UI {
        padding: calc(var(--margin)/2); /*Give the title a bit more space, or else words like "Potter's" in "Potter's Will" are forced to break*/
    }

    .play-btn {
        font-size:6.5em;
    }

    /* This needs to override style.css */
    .video-UI h1 {
        font-size:4.5em;
    }
}