html {
    width: 100%;
    height: 100%;
}

html,
body {
    margin: 0px;
    padding: 0px;
    /* overscroll-behavior: contain; */
    scroll-behavior: smooth;
}

/* EXAMPLE CSS FOR URL HIDING ON MOBILE*/
.bg {
    top: 0px;
    position: fixed;
    height: 100vh;
    /* background: url('../../assets/images/backgrounds/darkwood.jpg') no-repeat center center; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100vw;
}

.ql-formats .material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
}

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48
}

#uploaded-img {
    width: 100%;
}

#music-player {
    width: 100%;
}


#navbar-edit {
    display: none;
    filter: drop-shadow(0px 1px 6px #00000033);
}

.navbar-burger {
    margin-left: unset;
}

.ql-toolbar {
    text-align: left !important;
}

.noselect {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.screen {
    position: fixed;
    top: 0px;

    width: 100vw;
    height: 100vh;

    display: flex;
    pointer-events: none;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    opacity: 1;
    padding: 15rem 10rem;
}

/* anything within a screen element has pointer events */
.screen * {
    pointer-events: auto;
}

.navbar button {
    border-radius: 0;
}

#card-layer {
    display: none;
    opacity: 1;
    padding: 5vw;
    display: flex;
    transition: opacity 0.1s, transform 0.1s ease-out;;
    pointer-events: none;
    align-content: center;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex-direction: column;
    z-index: 10;
    transform-origin: top;
}

/* #card-layer * {
    pointer-events: auto;
} */

.w-100 {
    width: 100%;
}

#foreground-layer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0px;
    align-items: stretch;
}

strong {
    color: unset;
}

#ui-layer {
    display: none;
    padding: 0rem;
    justify-content: flex-start;
    align-items: stretch;
    margin-bottom: 0px;
}

#mute-layer {
    /* display: none; */
    padding: 0rem;
    justify-content: flex-start;
    align-items: flex-end;
    right: 0.5rem;
    top: 0.5rem;
}

#finishing-buttons-right {
    margin-left: auto;
    display: flex;
}

.ql-toolbar.ql-snow {
    border: unset;
}

#editor,
#back-editor,
.sub-card {
    font-family: var(--default-font);
    line-height: 1.2;
}

.format label {
    font-size: unset;
    font-weight: unset;
    color: unset;
    text-align: left;
}

.format .field {
    width: 100%;
}

#invite {
    opacity: 0;
    width: 50%;
    /* min-height: 80%; */
    /* min-height: 120vh; */
    background-color: var(--card-color);
    /* filter: drop-shadow(0.5rem 0.5rem 0.75rem #00000023); */
    padding: 1vw;
    line-height: 1.2;
    /* overflow: hidden; */
    aspect-ratio: 5 / 7;
    /* background-image: url('../../assets/images/cardparts/top/pine.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: color-burn; */
    display: flex;
    align-items: center;
}

/* 
#invite::before{
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background-image: url('../../assets/images/cardparts/top/pine.png');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    background-blend-mode: color-burn;
} */

#rsvp {
    aspect-ratio: 5 / 3.5;
}

#rsvp h1,
#rsvp h2,
#rsvp h3,
#rsvp h4,
#rsvp h5,
#rsvp h6 {
    cursor:default;
}

#first-rsvp {
opacity: 50%;
}

.card-wrapper {
    width: 90%;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    flex-grow: 1;
}

.sub-card {
    /* opacity: 0; */
    width: 50%;
    background-color: var(--card-color);
    /* filter: drop-shadow(0.5rem 0.5rem 0.75rem #00000023); */
    padding: 1vw;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: 5 / 3.5;
}

#first-rsvp {
    margin: 3vw;
}

.ql-animate-rock {
    display: block;
    animation: wobb 0.7s ease-in infinite;
}

.ql-action-flip {
    cursor: pointer;
}

.rotate-90 {
    rotate: 90deg;
    margin-top: 0.1rem;
}

@keyframes wobb {
    0% {
        transform: rotate(0deg)
    }

    25% {
        transform: rotate(10deg)
    }

    50% {
        transform: rotate(0deg)
    }

    75% {
        transform: rotate(-10deg)
    }

    100% {
        transform: rotate(0deg)
    }

}

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

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

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

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

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

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

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

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

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

.ql-video {
    width: 100%;
    aspect-ratio: 16 / 9;
}

#event-options {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

}

.faded {
    opacity: 0.25;
}

#extraInput {
    transition: max-height 1s ease-in-out;
    /* transform: scale(1,0); */
    /* transform-origin: top center; */
    overflow: hidden;
    max-height: 0;
    width: 100%;
}

input#mute {
    display: none;
}

#front-card-html {
    white-space: unset;
}

.final {
    white-space: unset;
}

.mute {
    background: center/cover url('../../assets/images/sound.png') no-repeat;
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
    margin-top: 1rem;
    cursor: pointer;
    -webkit-filter: drop-shadow(0px 0px 3px rgba(34, 34, 34, 0.473));
    filter: brightness(0) invert(1) drop-shadow(0px 0px 3px rgba(110, 110, 110, 0.404))
}

#mute:checked+.mute {
    background: center/cover url('../../assets/images/mute.png') no-repeat;

}

#back-button-container {
    display: none;
}


.animateFadeInUp {
    opacity: 0.1;
    animation: fadeInUp 0.3s linear 0.0s 1 normal forwards;
}


@keyframes fadeInUp {
    from {
        transform: translate3d(0, 40px, 0);
        opacity: 0;
    }

    to {
        transform: translate3d(0, 0, 0);
        opacity: 1;
    }
}



.screen footer {
    bottom: 0;
    left: 0;
    position: absolute;
}

#attribution-container {
    font-size: 0.75rem;
}

.attr {
    background-color: #85858569;
    color: white;
    padding: 0px 2px;
}

.attr a {
    color: white;
    text-decoration: underline;
}

/*from tablet down*/
@media only screen and (max-width: 600px) {

    .screen {
        padding: 0rem;
    }

    #attribution-container {
        font-size: 0.6rem;
    }

    /* .modal-card {
        width: 92%;
    } */

    .mute {
        width: 2rem;
        height: 2rem;
        margin-right: 0.5rem;
        margin-top: 0.5rem;
    }

    #invite,
    .sub-card {
        width: 90%;
        padding: 0.25rem 0.25rem;
    }


    /* 
    .save-bar {
        background-color: white;
        filter: drop-shadow(0.5rem -0.5rem 0.75rem #00000023);
        align-items: baseline;
        height: 7rem;
        padding-right: 0.5em;    
    } */

    .ql-toolbar {
        padding: 0px !important;
        text-align: left !important;
    }

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

    .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: 6.5vw !important;
    }

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

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

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

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

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

    #finish-buttons {
        margin-left: auto;
        /* margin-right: 0.3rem; */
    }

    #wysiwyg-editor {
        padding-left: 0.2rem;
    }

    .navbar-menu {
        flex-grow: unset;
        flex-shrink: 0;
    }

}