.card-3d {
    box-shadow: none;
    backface-visibility: visible;
    background: transparent;
    font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    /* transform-style: preserve-3d; */ /* breaks inputs*/
    padding: 0;
    /* height: auto; */
    /* margin: 0 2rem 4rem 0; */
    /* width: 18rem; */
    /* height: 25rem; */
    float: left;
    transition: transform 0.2s ease-out;
    border: none;
    /* letter-spacing: 1px; */
    width: 35%;
    pointer-events: all;
}

.flip,
.unflip {
    /* background: rgba(0, 0, 0, 0.1); */
    background: linear-gradient(315deg, #80808011 50%, transparent 0);
    position: absolute;
    bottom: 0rem;
    right: 0rem;
    padding: 0.5rem 0.75rem;
    text-align: right;
    line-height: 1rem;
    cursor: pointer;
    transition: transform 0.1s ease-out;
    width: 12%;
    aspect-ratio: 1 / 1;
    border-top-left-radius: 100%;
    transform-origin: center center;
    z-index: 100;
}

/* .flip::after,
.unflip::after {
    content: " ";
    position: absolute;
    width: 30%;
    height: 30%;
    bottom: 15%;
    right: 15%;
    padding-bottom: 10%;
    transform-origin: center center;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 3vmin;
    opacity: 0.5;
    background-image: url('../../assets/images/flip.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: contain;
} */

.flip .material-symbols-sharp, 
.unflip .material-symbols-sharp {
    right: 10%;
    bottom: 10%;
    position: absolute;
    rotate: 90deg;
    font-variation-settings:
    'FILL' 0,
    'wght' 1000,
    'GRAD' 200,
    'opsz' 48;
    font-size: 1.5vw;
}

.unflip {
    /* background: linear-gradient(320deg, #0000000c 50%, transparent 0); */
    /* color: white; */
    z-index: 100;
}


.flip:hover,
.unflip:hover {
    /* background: rgba(0, 0, 0, 0.3); */
    background: linear-gradient(315deg, #80808028 50%, transparent 0);
}


.inner-card-backface {
    transform: rotateX(0) rotateY(180deg) scale(1) translateZ(0px);
    background-color: var(--card-color);
    position: absolute;
    top: 0;
    color: black;
    /* padding: 2rem; */
    box-sizing: border-box;
    transition: transform 0.15s ease-out, opacity 0.1s;
    will-change: transform, filter;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    /* transition-duration: 0s; */
    /* transition-delay: -1s; */
    opacity: 0;
    overflow: hidden;
    pointer-events: none!important;
    display: flex;

    /* for card content */
    padding: 1vw;
    pointer-events: none;
}

.flipped .inner-card {
    visibility: hidden;
    pointer-events: none!important;
}

/* .flipped .unflip {
    z-index: 100;
    pointer-events: all!important;
    width: 40%;
} */

.flipped .inner-card-backface {
    opacity: 1;
    /* pointer-events: all!important; */
}
.inner-card-backface .back-invite {    
    pointer-events: none!important;
}
/* 
.card-3d {
    pointer-events: visible;
}
.card-3d * {
    pointer-events: all;
} */

.card-3d.flipped {
    pointer-events: none; /* card blocks safari when flipped */
    transform: rotateY(180deg);
}
/* allows clicking on content */
.card-3d.flipped * {
    pointer-events: all;
}

.card-3d .flip-inner-card {
    transform: rotateY(180deg);
    position: absolute;
    top: 0;
    padding: 2rem 1.5rem;
    box-sizing: border-box;
    left: 0;
    /* width: 100%; */
    /* height: 100%; */
}

.flip-inner-card h3 {
    font-size: 1.25rem;
    margin-top: 0;
}

.flip-inner-card p {
    color: rgba(255, 255, 255, 0.6);
    /* font-weight: 400; */
    /* line-height: 1.5rem; */
}

.card-3d .inner-card {
    /* font-size: 2rem; */
    /* color: white; */
    /* padding: 1rem 2rem; */
    /* line-height: 3rem; */
    will-change: transform, filter;
    float: none;
    /* background: white; */
    background-size: calc(100% + 6px) auto;
    background-position: -3px -3px;
    margin: 0;
    transition: transform 0.15s ease-out;
    /* height: auto; */
    box-sizing: border-box;
    /* overflow: hidden; */
    display: block;
    margin: 0px auto;
    transform: rotateX(0deg) rotateY(0deg) scale(1);
    /* top: 0; */
    /* height: 100%; */
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.3));
    font-weight: 500;
    perspective-origin: 0 0;
    letter-spacing: 0;
    backface-visibility: hidden;
}

.ql-editor>* {
    transform: translateZ(0px);
}

#editor>* {
    transform: translateZ(0px);
}

.card-3d .glare {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.1s ease-out;
    opacity: 0.6;
    pointer-events: none;
    height: 100%;
    z-index: 9999;
    mix-blend-mode: hard-light;
    background: radial-gradient(circle at 50% 50%, rgb(199 198 243), transparent);
    pointer-events: none !important;
}


.card-3d .glare {
    opacity: 0;
}

.card-3d.animated .glare {
    opacity: 0.3;
}

.card-3d.animated.user .glare {
    opacity: 0.15;
}

.card-3d .name {
    color: white;
    font-size: 1.5rem;
}


#invite {
    width: unset;
}

.paper {
    filter: none;
}

#back-invite {
    display: flex;
    align-items: center;
    flex-grow: 1;
}

#back-editor {
    flex-grow: 1;
}






#card-layer {
    padding-top: 2vw;
}

.extra-top-margin {
    padding-top: 10rem !important;
}

#invite h1,
#env-card h1,
.format h1,
.ql-size-huge {
    font-size: 5vw !important;
}

.format h2,
#invite h2 {
    font-size: 4.2vw !important;
}

.format h3,
#invite h3,
#env-card h3,
.ql-size-large {
    font-size: 3.1vw !important;
}

.format h4,
#invite h4,
#env-card h4 {
    font-size: 2vw !important;
}

.format h5,
#invite h5,
#env-card h5 {
    font-size: 1.6vw !important;
}

.format h6,
#invite h6,
#env-card h6,
.ql-size-small {
    font-size: 1.0vw !important;
}

.format p,
.rsvp-button,
#invite p {
    font-size: 1.2vw !important;
}

.sub-card input[type=text] {
    font-size: 1.2vw !important;
}

.sub-card textarea {
    font-size: 1.2vw !important;
    line-height: 1.0;
}


.card-3d:not(:last-child) {
    margin-bottom: 6vw;
}

.sub-card {
    width: 100%;
}




.rsvp-button {
    transform: translate3d(0px, 0px, 20px);
    transform-origin: center;
    transform-style: preserve-3d;
}


.ql-container {
    min-height: 100%;
    height: unset;
}


@media only screen and (max-width: 600px) {

    .card-3d .glare {
        opacity: 0.15;
    }

    .card-3d:not(:last-child) {
        margin-bottom: 4rem;
    }

    .card-3d .glare {
        transition: opacity 1s;
    }

    .card-3d .inner-card {
        transition: transform 0.15s ease-out, filter 0.15s ease-out;
    }

    .flip,
    .unflip {
        width: 20%;
    }

    .flip::after,
    .unflip::after {
        width: 40%;
        height: 40%;
        bottom: 10%;
        right: 10%;
    }

    #invite {
        line-height: 1.15;
    }


    .format h1,
    #invite h1,
    .ql-size-huge {
        font-size: 15vw !important;
    }

    .format h2,
    #invite h2 {
        font-size: 12vw !important;
    }

    .format h3,
    #invite h3,
    #env-card h3,
    .ql-size-large {
        font-size: 9vw !important;
    }

    .format h4,
    #invite h4,
    #env-card h4 {
        font-size: 5.9vw !important;
    }

    .format h5,
    #invite h5,
    #env-card h5 {
        font-size: 4.5vw !important;
    }

    .format h6,
    #invite h6,
    #env-card h6,
    .ql-size-small {
        font-size: 3vw !important;
    }

    .format p,
    .rsvp-button,
    #invite p {
        font-size: 3.5vw !important;
    }

    .sub-card input[type=text] {
        font-size: 4vw !important;
    }

    .sub-card textarea {
        font-size: 4vw !important;
        line-height: 1.0;
    }



    #card-layer {
        padding: 7rem 0rem;
    }


    .screen {
        padding: 0rem;
    }


    .card-3d {
        width: 90%;
    }

    .flip .material-symbols-sharp, 
    .unflip .material-symbols-sharp {
        right: 10%;
        bottom: 10%;
        font-variation-settings:
        'FILL' 0,
        'wght' 1000,
        'GRAD' 200,
        'opsz' 48;
        font-size: 6vw;
        pointer-events: all!important;
    }

}