@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=Homemade+Apple&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');

.homemade-apple-regular {
  font-family: "Homemade Apple", 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;
}

html{scroll-behavior:smooth;}
body{
    height:100vh;
    margin: 0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Karla', sans-serif;
    -webkit-font-smoothing:antialiased;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.kuvert-link{
  display:block;
  width:95%;
  max-width:1200px;
  cursor:pointer;

  margin-bottom:2rem;

  -webkit-tap-highlight-color:transparent;
  outline:none;
}

.kuvert{
    width: 95%;
    max-width: 600px;
    margin: auto;
    display: flex;
}

/* mörkare och lite mindre */
.kuvert-link.is-opening .kuvert{
  transform:scale(0.96);
  filter:brightness(0.82);
}

/* växer och försvinner */
.kuvert-link.is-opening.is-expanding .kuvert{
  transform:scale(1.3);
  filter:brightness(0.9);
  opacity:0;
  transition:
    transform 0.7s ease-in,
    filter 0.7s ease,
    opacity 0.7s ease;
}

.oppna{
    opacity:1;
    transition:opacity 0.4s ease;

    font-size:2.5rem;
    font-family: "Mea Culpa", cursive;
    text-align:center;
    margin:0;
    padding:0;
    color:var(--ink-soft);
}

.oppna.is-fading{
    opacity:0;
}