@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500&family=Karla:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oooh+Baby&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mea+Culpa&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Script&display=swap');

.oooh-baby-regular {
  font-family: "Oooh Baby", cursive;
  font-weight: 400;
  font-style: normal;
}

.mea-culpa-regular {
  font-family: "Mea Culpa", cursive;
  font-style: normal;
}

.league-script-regular {
  font-family: "League Script", cursive;
  font-weight: 400;
  font-style: normal;
}

:root{
  --cream:#FBF6EC;
  --warm-beach:rgb(252, 242, 224);
  --blue:#A3B1B6;
  --blue-soft:#e2e8eb;
  --blue-deep:#253143;
  --rust:#9F5C3C;
  --yellow:#E7B84C;
  --ink:#332E28;
  --ink-soft:#655E54;
  --card-radius: 2px;
  --inbjudan: #E3CEA1;
}

body{
    margin: 0;
    height:100vh;
    width:100vw;
    background:var(--cream);
    display:flex;
    flex-direction:column;
    align-items:center;
}

.inbjudan-wrapper{
    position:relative;
    width: min(80vw, 900px);
    aspect-ratio: 1 / 1;
}

@keyframes pageFadeIn{
  from{
    opacity:0;
  }

  to{
    opacity:1;
  }
}

@keyframes fadeInUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeInFlowers{
    from{
        opacity:0;
        transform:translateY(20px) rotate(-15deg);
    }

    to{
        opacity:1;
        transform:translateY(0) rotate(-15deg);
    }
}

@keyframes fadeInInvitation{
    from{
        opacity:0;
        transform:translateY(20px) rotate(3deg);
    }

    to{
        opacity:1;
        transform:translateY(0) rotate(3deg);
    }
}

@keyframes fadeInWelcome{
    from{
        opacity:0;
        transform:translateY(20px) rotate(-1deg);
    }

    to{
        opacity:1;
        transform:translateY(0) rotate(-1deg);
    }
}

@keyframes fadeInBow{
    from{
        opacity:0;
        transform:translateY(20px) rotate(20deg);
    }

    to{
        opacity:1;
        transform:translateY(0) rotate(20deg);
    }
}

.bird{
    position:absolute;
    width:50%;
    right:-8%;
    top:15%;

    z-index:2;

    opacity:0;
    animation:fadeInUp 0.8s ease forwards;
    animation-delay:0s;
}

.kuvert{
    position:absolute;
    width:80%;
    left:5%;
    top:10%;

    opacity:0;
    animation:fadeInUp 0.8s ease forwards;
    animation-delay:0.1s;
}

.blommor{
    position:absolute;
    width:90%;
    left:-10%;
    top:70%;
    transform:rotate(-15deg);

    opacity:0;
    animation:fadeInFlowers 0.8s ease forwards;
    animation-delay:0.3s;
}

.inbjudan{
    position:absolute;
    width:60%;
    right:-8%;
    top:100%;
    z-index:1;
    transform:rotate(3deg);
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    border-radius:1%;

    opacity:0;
    animation:fadeInInvitation 0.8s ease forwards;
    animation-delay:0.5s;
}

.valkommen{
    position:absolute;
    width:60%;

    left:-2%;
    top:140%;

    transform:rotate(-1deg);

    z-index:0;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);

    opacity:0;
    animation:fadeInWelcome 0.8s ease forwards;
    animation-delay:0.7s;
}


.blomma{
    position:absolute;
    width:50%;
    right:-5%;
    top:169%;

    z-index:2;
    transform:rotate(-10deg);

    opacity:0;
    animation:fadeInUp 0.8s ease forwards;
    animation-delay:0.9s;
}

.bow{
    position:absolute;
    width:35%;
    left:-10%;
    top:220%;
    z-index:4;
    transform:rotate(20deg);

    opacity:0;
    animation:fadeInBow 0.8s ease forwards;
    animation-delay:0.8s;
}

.info-link{
    text-decoration:none;
    color:inherit;
}

.button{
    position:absolute;
    width:60%;
    right:-8%;
    top:200%;
    border-radius:50%;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:3;

    opacity:0;
    animation:fadeInUp 0.8s ease forwards;
    animation-delay:1.1s;
}

.info-link p{
    position:absolute;
    right:-12%;
    top:216%;

    color:var(--ink);
    font-size:1rem;
    text-align:center;

    width:70%;
    z-index:4;

    opacity:0;
    animation:fadeInUp 0.8s ease forwards;
    animation-delay:1.1s;
}



/* Big phone */
@media (min-width: 375px) {

    .inbjudan-wrapper{
    width:min(65vw, 1200px);
}

    .bird{
        width:65%;
        right:-15%;
        top:15%;
    }

    .kuvert{
        width:100%;
        left:-5%;
        top:10%;
    }

    .blommor{
        width:115%;
        left:-25%;
        top:75%;
    }

    .inbjudan{
        position:absolute;
        width:70%;
        right:-15%;
        top:120%;
    }

    .valkommen{
        width:75%;
        left:-10%;
        top:175%;
    }

    .blomma{
        width:50%;
        right:-10%;
        top:200%;
    }

    .bow{
        width:55%;
        left:-30%;
        top:265%;
    }

    .button{
        width:75%;
        right:-25%;
        top:230%;
    }


}

/* Big phone */
@media (min-width: 428px) {

    .inbjudan-wrapper{
        width:min(65vw, 1200px);
    }

    .bird{
        width:65%;
        right:-15%;
        top:15%;
    }

    .kuvert{
        width:100%;
        left:-5%;
        top:10%;
    }

    .blommor{
        width:115%;
        left:-25%;
        top:75%;
    }

    .inbjudan{
        position:absolute;
        width:70%;
        right:-15%;
        top:120%;
    }

    .valkommen{
        width:75%;
        left:-10%;
        top:175%;
    }

    .blomma{
        width:50%;
        right:-10%;
        top:200%;
    }

    .bow{
        width:55%;
        left:-30%;
        top:260%;
    }

    .button{
        width:75%;
        right:-25%;
        top:230%;
    }


}


/* Tablet */
@media (min-width: 768px) {

    .inbjudan-wrapper{
        width:min(65vw, 1200px);
    }

    .bird{
        width:35%;
        top:10%;
        right:5%;
    }

    .kuvert{
        width:60%;
        top:10%;
        left:25%;
    }

    .inbjudan{
        width:45%;
        top:75%;
        right:0%;
    }

    .valkommen{
        width:50%;
        top:90%;
        left:12%;
    }

    .blommor{
        width:65%;
        left:15%;
        top:40%;
    }

    .blomma{
        width:35%;
        top:130%;
        left:75%;
    }

    .button{
        width:40%;
        top:130%;
        left:50%;
    }

    .bow{
        width:35%;
        left:0%;
        top:150%;
    }


}

/* Big Tablet */
@media (min-width: 820px) {

    .inbjudan-wrapper{
        width:min(65vw, 1200px);
    }

    .bird{
        width:35%;
        top:10%;
        right:5%;
    }

    .kuvert{
        width:60%;
        top:10%;
        left:25%;
    }

    .inbjudan{
        width:45%;
        top:75%;
        right:0%;
    }

    .valkommen{
        width:60%;
        top:90%;
        left:12%;
    }

    .blommor{
        width:65%;
        left:15%;
        top:40%;
    }

    .blomma{
        width:35%;
        top:130%;
        left:75%;
    }

    .button{
        width:40%;
        top:130%;
        left:50%;
    }

    .bow{
        width:35%;
        left:0%;
        top:150%;
    }


}


/* Small desktop */
@media (min-width: 820px) {

    .inbjudan-wrapper{
        width:min(65vw, 1200px);
    }

    .bird{
        width:35%;
        top:10%;
        right:5%;
    }

    .kuvert{
        width:60%;
        top:10%;
        left:25%;
    }

    .inbjudan{
        width:45%;
        top:75%;
        right:0%;
    }

    .valkommen{
        width:45%;
        top:90%;
        left:12%;
    }

    .blommor{
        width:65%;
        left:15%;
        top:40%;
    }

    .blomma{
        width:35%;
        top:130%;
        left:75%;
    }

    .button{
        width:40%;
        top:130%;
        left:50%;
    }

    .bow{
        width:35%;
        left:0%;
        top:140%;
    }


}


/* Desktop */
@media (min-width: 1200px) {

    .inbjudan-wrapper{
        width:min(65vw, 1200px);
    }

    .bird{
        width:30%;
        top:8%;
        right:10%;
    }

    .kuvert{
        width:45%;
        top:5%;
        left:25%;
    }

    .inbjudan{
        width:35%;
        top:50%;
        right:10%;
    }

    .valkommen{
        width:35%;
        top:70%;
        left:20%;
    }

    .blommor{
        width:50%;
        left:17%;
        top:33%;
    }

    .blomma{
        width:25%;
        top:85%;
        left:70%;
    }

    .button{
        width:30%;
        top:95%;
        left:55%;
    }

    .bow{
        width:30%;
        left:8%;
        top:107%;
    }

}

/* Big desktop */
@media (min-width: 1400px) {

    .inbjudan-wrapper{
        width:min(65vw, 1200px);
    }

    .bird{
        width:30%;
        top:8%;
        right:10%;
    }

    .kuvert{
        width:45%;
        top:5%;
        left:25%;
    }

    .inbjudan{
        width:35%;
        top:50%;
        right:10%;
    }

    .valkommen{
        width:35%;
        top:70%;
        left:20%;
    }

    .blommor{
        width:50%;
        left:17%;
        top:33%;
    }

    .blomma{
        width:25%;
        top:85%;
        left:70%;
    }

    .button{
        width:30%;
        top:95%;
        left:55%;
    }

    .bow{
        width:30%;
        left:8%;
        top:110%;
    }
}