html{font-size:62.5%}body{font-size:1.6rem;margin:0;position:relative;overflow:hidden;z-index:1;min-height:100vh;height:100vh}body .elm1{width:60rem;height:60rem;top:0;right:0;transform:translate(-30%,40%);background-color:#9ed2c6;z-index:-1;mix-blend-mode:lighten;-webkit-animation-duration:20s;animation-duration:20s;position:absolute;border-radius:100%;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:cubic-bezier(.1,0,.9,1);animation-timing-function:cubic-bezier(.1,0,.9,1);animation-name:gradientShapeAnimation2}body .elm2{background:#54BAB9;width:60rem;height:60rem;position:absolute;bottom:0;left:0;transform:translate(-30%,40%);z-index:-1;mix-blend-mode:lighten;-webkit-animation-duration:20s;animation-duration:20s;border-radius:100%;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:cubic-bezier(.1,0,.9,1);animation-timing-function:cubic-bezier(.1,0,.9,1);animation-name:gradientShapeAnimation1}body .overlay{position:absolute;top:0;left:0;width:100%;height:100%;filter:blur(250px);z-index:-1;height:100vh;width:100vw}a{text-decoration:none;color:#fff}h1{font-family:var(--font-family-primary);font-size:5rem}h2{font-family:var(--font-family-secondary);font-size:3rem;margin:0}h3{font-family:var(--font-family-secondary);font-size:2rem;margin:0}h4{font-family:var(--font-family-secondary);font-size:1.8rem;margin:0}h5{font-family:var(--font-family-secondary);font-size:1.6rem;margin:0}h6{font-family:var(--font-family-secondary);font-size:1.4rem;margin:0}p{font-family:var(--font-family-secondary);font-size:1.6rem;margin:0}main{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:center;align-items:center}main section{height:100%;display:flex;justify-content:center;align-items:center}form{color:#fff;max-width:100%;width:38rem;padding:2rem;background-color:#082b48;margin:auto}form label{display:block;margin-bottom:1.2rem;margin-top:2.8rem}input[type=submit]{margin-top:2rem}@keyframes gradientShapeAnimation2{0%{-webkit-transform:translate(20%,-40%) rotate(-20deg);transform:translate(20%,-40%) rotate(-20deg)}20%{-webkit-transform:translate(0%,0%) skew(-15deg,-15deg) rotate(80deg);transform:translate(0) skew(-15deg,-15deg) rotate(80deg)}40%{-webkit-transform:translate(-40%,50%) rotate(180deg);transform:translate(-40%,50%) rotate(180deg)}60%{-webkit-transform:translate(-20%,-20%) skew(15deg,15deg) rotate(80deg);transform:translate(-20%,-20%) skew(15deg,15deg) rotate(80deg)}80%{-webkit-transform:translate(10%,-30%) rotate(180deg);transform:translate(10%,-30%) rotate(180deg)}to{-webkit-transform:translate(20%,-40%) rotate(340deg);transform:translate(20%,-40%) rotate(340deg)}}@-webkit-keyframes gradientShapeAnimation1{0%{-webkit-transform:translate(-30%,40%) rotate(-20deg);transform:translate(-30%,40%) rotate(-20deg)}25%{-webkit-transform:translate(0%,20%) skew(-15deg,-15deg) rotate(80deg);transform:translateY(20%) skew(-15deg,-15deg) rotate(80deg)}50%{-webkit-transform:translate(30%,-10%) rotate(180deg);transform:translate(30%,-10%) rotate(180deg)}75%{-webkit-transform:translate(-30%,40%) skew(15deg,15deg) rotate(240deg);transform:translate(-30%,40%) skew(15deg,15deg) rotate(240deg)}to{-webkit-transform:translate(-30%,40%) rotate(-20deg);transform:translate(-30%,40%) rotate(-20deg)}}@keyframes gradientShapeAnimation1{0%{-webkit-transform:translate(-30%,40%) rotate(-20deg);transform:translate(-30%,40%) rotate(-20deg)}25%{-webkit-transform:translate(0%,20%) skew(-15deg,-15deg) rotate(80deg);transform:translateY(20%) skew(-15deg,-15deg) rotate(80deg)}50%{-webkit-transform:translate(30%,-10%) rotate(180deg);transform:translate(30%,-10%) rotate(180deg)}75%{-webkit-transform:translate(-30%,40%) skew(15deg,15deg) rotate(240deg);transform:translate(-30%,40%) skew(15deg,15deg) rotate(240deg)}to{-webkit-transform:translate(-30%,40%) rotate(-20deg);transform:translate(-30%,40%) rotate(-20deg)}}@-webkit-keyframes gradientShapeAnimation2{0%{-webkit-transform:translate(20%,-40%) rotate(-20deg);transform:translate(20%,-40%) rotate(-20deg)}20%{-webkit-transform:translate(0%,0%) skew(-15deg,-15deg) rotate(80deg);transform:translate(0) skew(-15deg,-15deg) rotate(80deg)}40%{-webkit-transform:translate(-40%,50%) rotate(180deg);transform:translate(-40%,50%) rotate(180deg)}60%{-webkit-transform:translate(-20%,-20%) skew(15deg,15deg) rotate(80deg);transform:translate(-20%,-20%) skew(15deg,15deg) rotate(80deg)}80%{-webkit-transform:translate(10%,-30%) rotate(180deg);transform:translate(10%,-30%) rotate(180deg)}to{-webkit-transform:translate(20%,-40%) rotate(340deg);transform:translate(20%,-40%) rotate(340deg)}}