.opener-navbar {
    z-index: 5;
}

.D310058A9C274EE6AE91B14CD925737A {
    background-color: #353959;
    height: 100vh;
    flex-direction: column;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    display: flex;
}

.D97D8D6AC5214FD9B9303BABA9AAF176 {
    margin-bottom: 60px;
    text-align: center;
    font-size: 120px;
    margin-left: auto;
    margin-right: auto;
    color: white;
    font-weight: 800;
    z-index: 2;
}

.AC3423BF44849DC90778B541C13EB3A p {
    margin-left: auto;
    padding-left: 20px;
    width: 763px;
    margin-right: auto;
    padding-right: 20px;
}

.AC3423BF44849DC90778B541C13EB3A p:first-of-type {
    padding-top: 40px;
}

p {
    margin-bottom: 0px;
}

.caption {
    display: inline-block;
    margin-top: 5px;
    color: var(--minizine-text-gray);
    font-size: 16px;
}

#opener-navbar .submit {
    background-color: white;
    color: var(--minizine-black);
}

.image-row {
    display: block;
    position: absolute;
    top: 15vh;
    z-index: 1;
    text-align: center;
    width: 100%;
}

.magic,
.wall {
    height: 20vw;
    display: inline-block;
}

.magic {
    transform: rotate(5deg) translateX(10px);
}

.wall {
    transform: rotate(-5deg) translateX(-20px);
}

.cover {
    /* height: 60vh !important; */
    width: 50vw;
    grid-area: cover;
    object-fit: contain;
}

.photo {
    width: 763px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.body-photo {
    width: 100%;
}

.pull-quote {
    font-size: 40px;
    font-weight: 400;
    width: 763px;
    margin-left: auto;
    margin-right: auto;
    color: var(--minizine-black);
    /* position: relative; */
    margin-top: 40px;
    /* border-top: 2px solid var(--minizine-black); */
    margin-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
}

.pull-quote-divider {
    height: 2px;
    width: calc(736px - 40px - 40px);
    background-color: var(--minizine-light-gray);
    margin-top: 20px;
    margin-bottom: 20px;
}

.subheading {
    display: block;
    font-size: calc(var(--body-font-size) + 10px);
    padding-bottom: 5px;
    padding-top: 10px;
}

@media (max-height: 780px) {
    .D310058A9C274EE6AE91B14CD925737A {
        height: 100vh;
        height: auto;
    }

     h1 {
        flex-grow: 1;
    }
}

@media (max-width:1200px) {
    .D97D8D6AC5214FD9B9303BABA9AAF176 {
        font-size: 80px;
    }

    .image-row {
        top: 20%;
        display: inline-flex;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
    }

    .magic,
    .wall {
        height: auto;
        width: 25vw;
        object-fit: contain;
    }

    .cover {
        width: 50vw;
    }

    .wall {
        transform: rotate(-5deg) translateX(-40px);
    }
}

@media (max-width:703px) {
    .navbar {
        flex-basis: 60vh;
    }

    .D310058A9C274EE6AE91B14CD925737A {
        justify-content: space-between;
    }

    .D97D8D6AC5214FD9B9303BABA9AAF176 {
        font-size: 60px;
        margin-bottom: 30px;
    }

    .AC3423BF44849DC90778B541C13EB3A {
        padding-left: 20px;
        padding-right: 20px;
    }

    .AC3423BF44849DC90778B541C13EB3A p, .pull-quote, .pull-quote-divider {
        width: auto;
    }

    .pull-quote {
        font-size: 30px;
    }

    .image-row {
        top: 35%;
    }

    .magic,
    .wall {
        position: absolute;
        width: 35vw;
    }

    .magic {
        top: -150px;
    }

    .wall {
        right: 0%;
        bottom: -70px;
    }

    .cover {
        width: 70%;
        margin-left: auto;
        margin-right: auto;

    }

    .photo {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
   
    }
}

@media (max-width:700px) {
   .image-row {
    top: 30%;
    }
}

@media (max-width: 500px) {
    .pull-quote {
        font-size: 30px;
    }
}