.content {
    height: 100vh;
    overflow: hidden;
    position: absolute;
    display: grid;
    grid-template-columns: [flag-cl-start balloon-l-start] 1fr [flag-cl-end balloon-l-end flag-l-start frame-start] 1fr [flag-l-end flag-r-start] 1fr [flag-r-end flag-cr-start balloon-r-start frame-end] 1fr [flag-cr-end balloon-r-end];
    grid-template-rows: 30vh 70vh
}

.content>* {
    width: 100%
}

@media only screen and (max-width: 800px) {
    .content {
        grid-template-columns: [flag-l-start balloon-l-start frame-start] 1fr [balloon-l-end flag-l-end flag-r-start balloon-r-start] 1fr [flag-r-end balloon-r-end frame-end]
    }
}

.frame {
    grid-row: 2/3;
    grid-column: frame-start/frame-end;
    display: none;
    opacity: 0;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    text-align: center
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0
}

html {
    font-size: 62.5%;
    box-sizing: border-box
}

@media(min-width: 1200px) {
    html {
        font-size: 70%
    }
}

body {
    color: #fff;
    font-family: "Courgette", cursive
}

.balloon {
    grid-row: 1/-1;
    width: 130%
}

.balloon--left {
    grid-column: balloon-l-start/balloon-l-end;
    -webkit-animation: balloon-move 4s linear 0s infinite;
    animation: balloon-move 4s linear 0s infinite
}

@media(max-width: 800px) {
    .balloon--left {
        margin-left: -25%
    }
}

@media(max-width: 500px) {
    .balloon--left {
        margin-left: -40%
    }
}

.balloon--right {
    grid-column: balloon-r-start/balloon-r-end;
    margin-left: -20%;
    animation: balloon-move 4s linear 0s infinite reverse
}

@media(max-width: 800px) {
    .balloon--right {
        margin-left: 25%
    }
}

@media(max-width: 800px) {
    .balloon {
        width: 100%
    }
}

@media(max-width: 500px) {
    .balloon {
        width: 120%
    }
}

.flag {
    grid-row: 1/2;
    z-index: 0
}

.flag--c-left {
    grid-column: flag-cl-start/flag-cl-end
}

@media(max-width: 800px) {
    .flag--c-left {
        display: none
    }
}

.flag--c-right {
    grid-column: flag-cr-start/flag-cr-end
}

@media(max-width: 800px) {
    .flag--c-right {
        display: none
    }
}

.flag--left {
    grid-column: flag-l-start/flag-l-end
}

.flag--right {
    grid-column: flag-r-start/flag-r-end
}

@media(max-width: 800px) {
    .flag {
        transform: scale(1.2);
        margin-top: 20%
    }
}

.img-back {
    position: relative;
    background-color: #ffa8dc;
    height: 20rem;
    width: 20rem;
    border-radius: 50%
}

@media(max-width: 800px) {
    .img-back {
        height: 35rem;
        width: 35rem
    }
}

@media(max-width: 500px) {
    .img-back {
        height: 20rem;
        width: 20rem
    }
}

.bd-pic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 83.33333333%;
    width: 83.33333333%;
    overflow: hidden;
    border-color: #fff;
    border-style: dotted;
    border-radius: 50%;
    background-image: url(../resources/img/Asset.png);
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover
}

.cap {
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translate(0, 0);
    height: 33.33333333%
}

.confetti {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 150%;
    width: 150%
}

.cake {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 70%;
    width: 70%
}

.HBD-text {
    width: 90%
}

.HBD {
    font-size: 2.4rem;
    padding: 0
}

@media(max-width: 800px) {
    .HBD {
        font-size: 3.4rem
    }
}

@media(max-width: 500px) {
    .HBD {
        font-size: 3rem
    }
}

.nickname {
    font-size: 3.2rem;
    padding: 0
}

@media(max-width: 800px) {
    .nickname {
        font-size: 4.2rem
    }
}

@media(max-width: 500px) {
    .nickname {
        font-size: 3.8rem
    }
}

.scroll {
    position: relative;
    overflow-y: hidden;
    height: 70%;
    width: 80%;
    font-size: 2.4rem
}

@media(max-width: 800px) {
    .scroll {
        height: 60%
    }
}

@media(max-width: 500px) {
    .scroll {
        height: 80%;
        font-size: 2.2rem
    }
}

.scroll p {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, 0)
}

.btn {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(0, -50%);
    display: none;
    overflow: hidden;
    height: 15rem;
    width: 15rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    -webkit-animation: heart-beat 2s linear 0s infinite alternate;
    animation: heart-beat 2s linear 0s infinite alternate
}

.btn-ref {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    color: #fff;
    display: none;
    font-size: 1.8rem
}

.switch {
    background-image: url("../resources/img/bulb.svg")
}

.gift {
    background-image: url("../resources/img/gift.svg")
}

.door-in,
.door-out {
    background-image: url("../resources/img/door.svg")
}

.darkroom,
.flash,
.giftroom,
.empty-room,
.hallway {
    text-align: center;
    position: absolute;
    height: 100vh;
    width: 100vw
}

.darkroom {
    background-color: #000
}

.flash {
    background-color: #fff
}

.giftroom,
.empty-room {
    background-color: #141852
}

.hallway {
    background-image: radial-gradient(transparent, #000), url(../resources/img/Hallway.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden
}

.empty-room,
.giftroom,
.content {
    background-image: radial-gradient(transparent, rgba(0, 0, 0, 0.65)), url(../resources/img/bedroom.svg);
    background-position: 70%;
    background-repeat: no-repeat;
    background-size: cover
}

.bb-text,
.gift-text,
.hall-text,
.room-text {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    text-align: center;
    width: 80vw;
    opacity: 0;
    font-size: 3.2rem
}

.velas {
    background: #fff;
    border-radius: .625rem;
    position: absolute;
    top: 70%;
    left: 50%;
    width: 1.5%;
    height: 12%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

.velas:after,
.velas:before {
    background: rgba(255, 0, 0, 0.4);
    content: "";
    position: absolute;
    width: 100%;
    height: 5%
}

.velas:after {
    top: 25%;
    left: 0
}

.velas:before {
    top: 45%;
    left: 0
}

.fuego {
    border-radius: 100%;
    position: absolute;
    top: -50%;
    left: 60%;
    margin-left: -2.6px;
    width: 100%;
    height: 40%
}

.fuego:nth-child(1) {
    -webkit-animation: fuego 2s 6.5s infinite;
    animation: fuego 2s 6.5s infinite
}

.fuego:nth-child(2) {
    -webkit-animation: fuego 1.5s 6.5s infinite;
    animation: fuego 1.5s 6.5s infinite
}

.fuego:nth-child(3) {
    -webkit-animation: fuego 1s 6.5s infinite;
    animation: fuego 1s 6.5s infinite
}

.fuego:nth-child(4) {
    -webkit-animation: fuego .5s 6.5s infinite;
    animation: fuego .5s 6.5s infinite
}

.fuego:nth-child(5) {
    -webkit-animation: fuego .2s 6.5s infinite;
    animation: fuego .2s 6.5s infinite
}

@-webkit-keyframes fuego {

    0%,
    100% {
        background: rgba(254, 248, 97, 0.5);
        box-shadow: 0 0 250% 62.5% rgba(248, 233, 209, 0.2);
        transform: scale(1)
    }

    50% {
        background: rgba(255, 50, 0, 0.1);
        box-shadow: 0 0 250% 125% rgba(248, 233, 209, 0.2);
        transform: scale(0)
    }
}

@keyframes fuego {

    0%,
    100% {
        background: rgba(254, 248, 97, 0.5);
        box-shadow: 0 0 250% 62.5% rgba(248, 233, 209, 0.2);
        transform: scale(1)
    }

    50% {
        background: rgba(255, 50, 0, 0.1);
        box-shadow: 0 0 250% 125% rgba(248, 233, 209, 0.2);
        transform: scale(0)
    }
}

@-webkit-keyframes in {
    to {
        transform: translateY(0)
    }
}

@keyframes in {
    to {
        transform: translateY(0)
    }
}

@-webkit-keyframes fade {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes fade {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes read {
    0% {
        opacity: 0
    }

    25% {
        opacity: 1
    }

    75% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@keyframes read {
    0% {
        opacity: 0
    }

    25% {
        opacity: 1
    }

    75% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

@-webkit-keyframes heart-beat {
    0% {
        transform: translate(-50%, -50%) scale(1, 1)
    }

    50% {
        transform: translate(-50%, -50%) scale(1.25, 1.25)
    }

    100% {
        transform: translate(-50%, -50%) scale(1, 1)
    }
}

@keyframes heart-beat {
    0% {
        transform: translate(-50%, -50%) scale(1, 1)
    }

    50% {
        transform: translate(-50%, -50%) scale(1.25, 1.25)
    }

    100% {
        transform: translate(-50%, -50%) scale(1, 1)
    }
}

@-webkit-keyframes balloon-move {
    0% {
        transform: translateY(0) rotate(0)
    }

    25% {
        transform: translateY(5%) rotate(3deg)
    }

    50% {
        transform: translateY(0) rotate(0)
    }

    75% {
        transform: translateY(-5%) rotate(-3deg)
    }

    100% {
        transform: translateY(0) rotate(0)
    }
}

@keyframes balloon-move {
    0% {
        transform: translateY(0) rotate(0)
    }

    25% {
        transform: translateY(5%) rotate(3deg)
    }

    50% {
        transform: translateY(0) rotate(0)
    }

    75% {
        transform: translateY(-5%) rotate(-3deg)
    }

    100% {
        transform: translateY(0) rotate(0)
    }
}

@-webkit-keyframes move-up {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-100%)
    }
}

@keyframes move-up {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-100%)
    }
}

.hidden {
    display: none
}

.fade-in {
    -webkit-animation: fade 2s ease-in 0s;
    animation: fade 2s ease-in 0s
}

.appear {
    animation: fade 2s linear 0s 1 reverse
}

.read {
    -webkit-animation: read 4s linear 0s;
    animation: read 4s linear 0s
}

.move-up {
    -webkit-animation: move-up 80s linear 3s;
    animation: move-up 80s linear 3s
}

/*# sourceMappingURL=style.css.map */