@font-face {
    font-family: "Pantasia";
    font-weight: 100 900;
    font-style: oblique 0deg 20deg;
    font-display: swap;
    src: url("../font/pantasia-regular-webfont.woff2") format("truetype");
  }
  
  :root {
      --font-size: 1.2rem;
  }



body {
    letter-spacing: -0.6px;
    box-sizing: border-box;
    font-family: "Pantasia";
    margin: 0;
    padding: 1.5rem;
    height: 100vh;
    font-size: var(--font-size);
    line-height: 1.1;
}

.will-appear {
    display: inline-block;
    transform: translate3d(0,30px,0);
    opacity: 0;
    transition: transform 1s ease, opacity 1s ease;
}

.did-appear {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.studio {
    display: inline-block;
}

.comma {
    display: none;
}

.text {
    display: block;
}

h1 {
    display: inline;
}

h1, p {
    font-size: var(--font-size);
    margin: 0;
}

a {
    display: inline-block;
    text-decoration: none;
    color: black;
    transition: letter-spacing 2s ease;
}

.address {
    display: block;
}


@media screen and (min-width: 1024px) {

    
    :root {
        --font-size: 1.5rem;
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .grid {
        width: 100%;
        display: flex;
        justify-content: space-between;
        transform: translate3d(0px, -1rem, 0px);
    }

    .comma {
        display: inline;
    }

    .text {
        display: inline;
    }

    @keyframes rotation {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(350deg);
        }
    }
    
    a:hover {
        letter-spacing: 1.5px;
    }
    
}