/* 
	Weight axis: 100 – 700
	Width axis: 85 – 100
*/
/* @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Text:wght@100..900&display=swap */

@font-face {
  font-family: 'Heading Now'; 
  src: url('https://fonts.vdhazel.com/headingnow/Heading-Now-Variable-Regular-trial.woff2') format('woff2'); 
  font-weight: normal; 
  font-style: normal; 
}

* {
	box-sizing: border-box;
}

body {
	font-family: "Heading Now", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 100vh;
	background-color: #000;
  color: #fff;
}


        .animated-text {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3rem;
          font-size: 10vw;
	line-height: 10vw;
        }

.letter {
            display: inline-block;
            --wght: 100;
            --wdth: 85;
            --opacity: 0.25;
            --letter-spacing: 0;
            --font-size: 10vw;
            font-variation-settings: "wght" var(--wght), "wdth" var(--wdth);
            opacity: var(--opacity);
            letter-spacing: var(--letter-spacing);
            font-size: var(--font-size);
            transition: 
                font-variation-settings 1s ease-in-out,
                opacity 1s ease-in-out,
                letter-spacing 2s ease-in-out,
                font-size 1s ease-in-out;
        }