/* Interform */

  @font-face {
    font-family: 'InterUI';
    src: url('../fonts/Inter-UI-Regular.woff2') format('woff2'),
         url('../fonts/Inter-UI-Regular.woff') format('woff');
    font-style:normal;
    font-weight:400;
  }
  @font-face {
    font-family: 'InterUI';
    src: url('../fonts/Inter-UI-Bold.woff2') format('woff2'),
         url('../fonts/Inter-UI-Bold.woff') format('woff');
    font-style:bold;
    font-weight:700;
  }

  *, *:before, *:after{box-sizing:border-box;}

  html{font-family: 'InterUI', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;height: 100vh;background: linear-gradient(240.69deg, #00EBFA 0%, #DC3FDA 99.49%);}
  body{margin:0;height: 100vh;}

/* Content */
  .content{display: flex;flex-direction: column;justify-content: center;min-height: 100vh;width: 620px;margin-left: 20%;position: relative;z-index: 1;padding: 30px 0px;}
  a.logo{transform: translateY(20px);opacity: 0;transition: 0.5s ease-out all;}
  .loaded a.logo{transform: translateY(0px);opacity: 1;}
  a.logo img{width: 148px;height: 53px;}
  h1{font-weight: bold;line-height: 64px;font-size: 55px;color: white;margin: 0.6em 0 0.2em;transform: translateY(20px);opacity: 0;transition: 0.5s ease-out all;transition-delay: 0.2s;}
  .loaded h1{transform: translateY(0px);opacity: 1;}
  p{font-weight: normal;line-height: 38px;font-size: 20px;color: white;transform: translateY(20px);opacity: 0;transition: 0.5s ease-out all;transition-delay: 0.4s;}
  .loaded p{transform: translateY(0px);opacity: 1;}

  @media screen and (max-width:1024px){
    .content{width: 100%;padding: 30px 10%;margin: 0;min-height: 100vh;}
  }
  @media screen and (max-width:600px){
    h1{font-size: 2em;line-height: 1.2em;}
    p{font-size: 1em;line-height: 1.8em;}
    a.logo img{width: 139px;height: 36px;}
  }

/* Form */
  form{display: flex;align-items: baseline;margin-top: 30px;transform: translateY(20px);opacity: 0;transition: 0.5s ease-out all;transition-delay: 0.6s;}
  .loaded form{transform: translateY(0px);opacity: 1;}
  .input-wrap{position: relative;margin-right: 30px;}
  .input{border: 0;background: transparent;border-bottom: 2px solid white;font-size: 20px;color: white;padding: 23px 0px 11px;transition: 0.2s ease all;outline:none;}
  .input:focus{border-bottom:2px solid #69c6ff;}
  .input + label{color: white;font-weight: 400;position: absolute;bottom: 10px;transition: 0.2s ease all;left: 0;}
  .input:focus + label,label.input-has-value{font-size: 12px;font-weight: normal;transform: translateY(-32px);color: #ffffff;}
  input[type="submit"]{border: 2px solid white;background: transparent;color: white;font-size: 15px;font-weight: 700;border-radius: 3px;padding: 9px 26px;height: 46px;outline: none;}
  input[type="submit"]:focus{border: 2px solid #69c6ff;}

  @media screen and (max-width:600px){
    form{display: flex;flex-wrap: wrap;margin: 0;}
    .input-wrap{width:100%;margin: 0 0 30px;}
    .input{width:100%;}
  }

  

/* Background */

  .background{position: fixed;height: 100vh;width: 100%;top: 0;}
  .background #circle{position:absolute;left: 33%;transform: translateY(-35%);height: 190%;}
  .background #triangle{width: 12%;z-index: 1;position: absolute;animation-name: move-triangle;animation-duration: 50000ms;animation-iteration-count: infinite;animation-timing-function: linear;bottom: 8%;left: 5%;}
  @keyframes move-triangle{0%{transform: rotate(0deg) scale(0.4) translate(0%, 0px);}50%{transform: rotate(60deg) scale(1) translate(100%, 50%);}100%{transform: rotate(0deg) scale(0.4) translate(0%, 0px);}}
  .background #square{width: 40%;z-index: 1;position: absolute;top: 0px;right: 7%;animation-name: spin;animation-duration: 160000ms;animation-iteration-count: infinite;animation-timing-function: linear;transform-origin: 50% 0%;transform: translateY(-50%);}
  @keyframes spin{from{transform: rotate(0deg) translateY(-50%);}to{transform: rotate(360deg) translateY(-50%);}}
  .background #square_small{width: 60px;z-index: 1;position: absolute;top: 20%;left: 13%;animation-name: spin;animation-duration: 160000ms;animation-iteration-count: infinite;animation-timing-function: linear;}

  @media screen and (max-width:600px){
    .background #circle{left: -7%;top: -10%;transform: translateY(-25%);height: 150%;opacity: 0.9;animation-name: move-circle;animation-duration: 50000ms;animation-iteration-count: infinite;animation-timing-function: linear;}
    @keyframes move-circle{0%{transform: scale(0.8) translate(-10%, -50%);}50%{transform: scale(1) translate(0%, 0%);}100%{transform: scale(0.8) translate(-10%, -50%);}}
    .background #square{width: 70%;right: -30%;}
    .background #square_small{left: 6%;width: 20%;bottom: 10px;top: initial;}
    .background #triangle{width: 122%;}
  }