<style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
       padding-top: 16px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjI1MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxwYXR0ZXJuIGlkPSJicmlja3MiIHg9IjAiIHk9IjAiIHdpZHRoPSI0MDAiIGhlaWdodD0iMjUwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHJlY3Qgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyNTAiIGZpbGw9IiMyYTFhMTIiLz4KICAgICAgCiAgICAgIDwhLS0gUm93IDEgLS0+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzZhM2UyYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMSkiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIxMDAiIHk9IjAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzdhNGUzYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iMTAwIiB5PSIwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9InVybCgjZ3JhaW4yKSIgb3BhY2l0eT0iMC4zIi8+CiAgICAgIDxyZWN0IHg9IjIwMCIgeT0iMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjNWEzZTJhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIyMDAiIHk9IjAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjMpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgPHJlY3QgeD0iMzAwIiB5PSIwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9IiM4YTVlM2EiIHN0cm9rZT0iIzJhMWExMiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICAgIDxyZWN0IHg9IjMwMCIgeT0iMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluNCkiIG9wYWNpdHk9IjAuMyIvPgogICAgICAKICAgICAgPCEtLSBSb3cgMiAtLT4KICAgICAgPHJlY3QgeD0iLTUwIiB5PSI1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjN2E0ZTNhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSItNTAiIHk9IjUwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9InVybCgjZ3JhaW4yKSIgb3BhY2l0eT0iMC4zIi8+CiAgICAgIDxyZWN0IHg9IjUwIiB5PSI1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjNmEzZTJhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSI1MCIgeT0iNTAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjEpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgPHJlY3QgeD0iMTUwIiB5PSI1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjOGE1ZTNhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIxNTAiIHk9IjUwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9InVybCgjZ3JhaW40KSIgb3BhY2l0eT0iMC4zIi8+CiAgICAgIDxyZWN0IHg9IjI1MCIgeT0iNTAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzVhM2UyYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iMjUwIiB5PSI1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMykiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIzNTAiIHk9IjUwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9IiM3YTRlM2EiIHN0cm9rZT0iIzJhMWExMiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICAgIDxyZWN0IHg9IjM1MCIgeT0iNTAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjIpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgCiAgICAgIDwhLS0gUm93IDMgLS0+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjEwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjOGE1ZTNhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjQpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgPHJlY3QgeD0iMTAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzVhM2UyYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iMTAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjMpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgPHJlY3QgeD0iMjAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzdhNGUzYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iMjAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjIpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgPHJlY3QgeD0iMzAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzZhM2UyYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iMzAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjEpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgCiAgICAgIDwhLS0gUm93IDQgLS0+CiAgICAgIDxyZWN0IHg9Ii01MCIgeT0iMTUwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9IiM2YTNlMmEiIHN0cm9rZT0iIzJhMWExMiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICAgIDxyZWN0IHg9Ii01MCIgeT0iMTUwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9InVybCgjZ3JhaW4xKSIgb3BhY2l0eT0iMC4zIi8+CiAgICAgIDxyZWN0IHg9IjUwIiB5PSIxNTAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzhhNWUzYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluNCkiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIxNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjN2E0ZTNhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIxNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMikiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIyNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjNWEzZTJhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIyNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMykiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIzNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjOGE1ZTNhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIzNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluNCkiIG9wYWNpdHk9IjAuMyIvPgogICAgICAKICAgICAgPCEtLSBSb3cgNSAtLT4KICAgICAgPHJlY3QgeD0iMCIgeT0iMjAwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9IiM3YTRlM2EiIHN0cm9rZT0iIzJhMWExMiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMikiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIxMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjNmEzZTJhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIxMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMSkiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIyMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjOGE1ZTNhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIyMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluNCkiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIzMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjNWEzZTJhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIzMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMykiIG9wYWNpdHk9IjAuMyIvPgogICAgPC9wYXR0ZXJuPgogICAgCiAgICA8IS0tIFRleHR1cmUgZ3JhaW4gcGF0dGVybnMgLS0+CiAgICA8ZmlsdGVyIGlkPSJub2lzZSI+CiAgICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjkiIG51bU9jdGF2ZXM9IjQiLz4KICAgIDwvZmlsdGVyPgogICAgCiAgICA8cGF0dGVybiBpZD0iZ3JhaW4xIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4zIi8+CiAgICA8L3BhdHRlcm4+CiAgICA8cGF0dGVybiBpZD0iZ3JhaW4yIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC40Ii8+CiAgICA8L3BhdHRlcm4+CiAgICA8cGF0dGVybiBpZD0iZ3JhaW4zIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4yIi8+CiAgICA8L3BhdHRlcm4+CiAgICA8cGF0dGVybiBpZD0iZ3JhaW40IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4zNSIvPgogICAgPC9wYXR0ZXJuPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2JyaWNrcykiLz4KPC9zdmc+');
      background-size: 400px 250px;
      background-repeat: repeat;
      color: #fff;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px;
      overflow-x: hidden;
      position: relative;
    }tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iMjUwIiB5PSI1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMykiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIzNTAiIHk9IjUwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9IiM3YTRlM2EiIHN0cm9rZT0iIzJhMWExMiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICAgIDxyZWN0IHg9IjM1MCIgeT0iNTAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjIpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgCiAgICAgIDwhLS0gUm93IDMgLS0+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjEwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjOGE1ZTNhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjQpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgPHJlY3QgeD0iMTAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzVhM2UyYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iMTAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjMpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgPHJlY3QgeD0iMjAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzdhNGUzYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iMjAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjIpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgPHJlY3QgeD0iMzAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzZhM2UyYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iMzAwIiB5PSIxMDAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0idXJsKCNncmFpbjEpIiBvcGFjaXR5PSIwLjMiLz4KICAgICAgCiAgICAgIDwhLS0gUm93IDQgLS0+CiAgICAgIDxyZWN0IHg9Ii01MCIgeT0iMTUwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9IiM2YTNlMmEiIHN0cm9rZT0iIzJhMWExMiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICAgIDxyZWN0IHg9Ii01MCIgeT0iMTUwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9InVybCgjZ3JhaW4xKSIgb3BhY2l0eT0iMC4zIi8+CiAgICAgIDxyZWN0IHg9IjUwIiB5PSIxNTAiIHdpZHRoPSI5NSIgaGVpZ2h0PSI0NSIgZmlsbD0iIzhhNWUzYSIgc3Ryb2tlPSIjMmExYTEyIiBzdHJva2Utd2lkdGg9IjIiLz4KICAgICAgPHJlY3QgeD0iNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluNCkiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIxNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjN2E0ZTNhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIxNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMikiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIyNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjNWEzZTJhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIyNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMykiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIzNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjOGE1ZTNhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIzNTAiIHk9IjE1MCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluNCkiIG9wYWNpdHk9IjAuMyIvPgogICAgICAKICAgICAgPCEtLSBSb3cgNSAtLT4KICAgICAgPHJlY3QgeD0iMCIgeT0iMjAwIiB3aWR0aD0iOTUiIGhlaWdodD0iNDUiIGZpbGw9IiM3YTRlM2EiIHN0cm9rZT0iIzJhMWExMiIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgICAgIDxyZWN0IHg9IjAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMikiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIxMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjNmEzZTJhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIxMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMSkiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIyMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjOGE1ZTNhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIyMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluNCkiIG9wYWNpdHk9IjAuMyIvPgogICAgICA8cmVjdCB4PSIzMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSIjNWEzZTJhIiBzdHJva2U9IiMyYTFhMTIiIHN0cm9rZS13aWR0aD0iMiIvPgogICAgICA8cmVjdCB4PSIzMDAiIHk9IjIwMCIgd2lkdGg9Ijk1IiBoZWlnaHQ9IjQ1IiBmaWxsPSJ1cmwoI2dyYWluMykiIG9wYWNpdHk9IjAuMyIvPgogICAgPC9wYXR0ZXJuPgogICAgCiAgICA8IS0tIFRleHR1cmUgZ3JhaW4gcGF0dGVybnMgLS0+CiAgICA8ZmlsdGVyIGlkPSJub2lzZSI+CiAgICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0iZnJhY3RhbE5vaXNlIiBiYXNlRnJlcXVlbmN5PSIwLjkiIG51bU9jdGF2ZXM9IjQiLz4KICAgIDwvZmlsdGVyPgogICAgCiAgICA8cGF0dGVybiBpZD0iZ3JhaW4xIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4zIi8+CiAgICA8L3BhdHRlcm4+CiAgICA8cGF0dGVybiBpZD0iZ3JhaW4yIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC40Ii8+CiAgICA8L3BhdHRlcm4+CiAgICA8cGF0dGVybiBpZD0iZ3JhaW4zIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4yIi8+CiAgICA8L3BhdHRlcm4+CiAgICA8cGF0dGVybiBpZD0iZ3JhaW40IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIj4KICAgICAgPHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI25vaXNlKSIgb3BhY2l0eT0iMC4zNSIvPgogICAgPC9wYXR0ZXJuPgogIDwvZGVmcz4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2JyaWNrcykiLz4KPC9zdmc+');
      background-size: 400px 250px;
      background-repeat: repeat;
      color: #fff;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40px 20px;
      overflow-x: hidden;
      position: relative;
    }

    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(circle at 50% 30%, rgba(255, 140, 0, 0.15) 0%, transparent 50%), 
                  radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 100%);
      pointer-events: none;
      z-index: 0;
    }

    body > * {
      position: relative;
      z-index: 1;
    }

    .description {
      text-align: center;
      max-width: 800px;
      margin-bottom: 30px;
      padding: 0 10px;
    }

    .description h1 {
      font-size: clamp(1.3rem, 4vw, 2rem);
      margin-bottom: 20px;
      line-height: 1.4;
      color: #ffeb3b;
      text-shadow: 
        3px 3px 0px rgba(0, 0, 0, 1),
        4px 4px 0px rgba(0, 0, 0, 0.8),
        5px 5px 0px rgba(0, 0, 0, 0.6),
        6px 6px 0px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(255, 200, 0, 0.8),
        0 0 35px rgba(255, 140, 0, 0.5);
      font-weight: bold;
    }

    .description p {
      font-size: clamp(1rem, 3vw, 1.2rem);
      color: #ffffff;
      text-shadow: 
        2px 2px 0px rgba(0, 0, 0, 1),
        3px 3px 0px rgba(0, 0, 0, 0.8),
        4px 4px 0px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 140, 0, 0.6),
        0 0 30px rgba(255, 69, 0, 0.4);
      font-weight: 600;
    }

    h3 {
      text-align: center;
      margin-bottom: 20px;
      font-size: clamp(1rem, 3vw, 1.3rem);
      color: #ffeb3b;
      text-shadow: 
        2px 2px 0px rgba(0, 0, 0, 1),
        3px 3px 0px rgba(0, 0, 0, 0.8),
        4px 4px 0px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 200, 0, 0.7),
        0 0 30px rgba(255, 140, 0, 0.4);
      font-weight: 700;
      padding: 0 10px;
    }

    #textArea {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 10px;
    }

    .form-floating {
      width: 100%;
      position: relative;
    }

    #textContainer {
      width: 100%;
      min-height: 150px;
      padding: 15px;
      font-size: clamp(0.9rem, 2.5vw, 1rem);
      border: 2px solid #ffd93d;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.05);
      color: #fff;
      backdrop-filter: blur(10px);
      position: relative;
      overflow: hidden;
      line-height: 1.6;
      word-wrap: break-word;
    }

    textarea {
      width: 100%;
      min-height: 150px;
      padding: 15px;
      font-size: clamp(0.9rem, 2.5vw, 1rem);
      border: 2px solid #ffd93d;
      border-radius: 15px;
      background: rgba(255, 255, 255, 0.05);
      color: #fff;
      resize: vertical;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      font-family: inherit;
      line-height: 1.6;
    }

    textarea:focus {
      outline: none;
      border-color: #ff6b6b;
      box-shadow: 0 0 20px rgba(255, 107, 107, 0.3);
    }

    textarea::placeholder {
      color: rgba(255, 255, 255, 0.5);
    }

    #burnBtn {
      margin-top: 20px;
      width: 100%;
      height: clamp(60px, 15vw, 70px);
      border: none;
      border-radius: 15px;
      cursor: pointer;
      position: relative;
      background: linear-gradient(180deg, #ff4500 0%, #ff6b00 50%, #ff8c00 100%);
      box-shadow: 0 0 40px rgba(255, 69, 0, 0.6), inset 0 -5px 20px rgba(0, 0, 0, 0.3);
      transition: all 0.3s ease;
      overflow: hidden;
      font-size: clamp(1.3rem, 4vw, 1.8rem);
      font-weight: bold;
      color: #fff;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
      letter-spacing: 3px;
      z-index: 10;
    }

    #burnBtn:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 50px rgba(255, 69, 0, 0.9), inset 0 -5px 20px rgba(0, 0, 0, 0.3);
    }

    #burnBtn:active {
      transform: translateY(0);
    }

    #burnBtn.clicked {
      animation: buttonPulse 0.5s ease-out;
    }

    @keyframes buttonPulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.1);
        box-shadow: 0 0 80px rgba(255, 69, 0, 1);
      }
      100% {
        transform: scale(1);
      }
    }

    #burnBtn::before,
    #burnBtn::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 15px;
      animation: fire 0.8s ease-in-out infinite;
      pointer-events: none;
    }

    #burnBtn::before {
      background: linear-gradient(180deg, transparent 0%, rgba(255, 69, 0, 0.3) 50%, transparent 100%);
      animation-delay: 0s;
    }

    #burnBtn::after {
      background: linear-gradient(180deg, transparent 0%, rgba(255, 165, 0, 0.2) 50%, transparent 100%);
      animation-delay: 0.4s;
    }

    @keyframes fire {
      0%, 100% {
        transform: translateY(0) scaleY(1);
        opacity: 0.6;
      }
      25% {
        transform: translateY(-5px) scaleY(1.1);
        opacity: 0.8;
      }
      50% {
        transform: translateY(3px) scaleY(0.95);
        opacity: 0.5;
      }
      75% {
        transform: translateY(-3px) scaleY(1.05);
        opacity: 0.7;
      }
    }

    .flame {
      position: absolute;
      width: 20px;
      height: 35px;
      background: linear-gradient(to top, rgba(255, 69, 0, 0.8) 0%, rgba(255, 165, 0, 0.6) 50%, rgba(255, 255, 0, 0.4) 100%);
      border-radius: 50% 50% 0 0;
      opacity: 0.7;
      animation: flicker 0.6s ease-in-out infinite;
      pointer-events: none;
    }

    .flame:nth-child(1) {
      left: 15%;
      bottom: -5px;
      animation-delay: 0s;
    }

    .flame:nth-child(2) {
      right: 15%;
      bottom: -5px;
      animation-delay: 0.2s;
      width: 18px;
      height: 30px;
    }

    .flame:nth-child(3) {
      left: 50%;
      bottom: -5px;
      transform: translateX(-50%);
      animation-delay: 0.1s;
      width: 22px;
      height: 40px;
    }

    @keyframes flicker {
      0%, 100% {
        transform: scaleY(1) scaleX(1);
        opacity: 0.7;
      }
      50% {
        transform: scaleY(1.3) scaleX(0.9);
        opacity: 0.9;
      }
    }

    h4 {
      text-align: center;
      margin-top: 15px;
      color: #ffd54f;
      font-size: clamp(0.85rem, 2.5vw, 1rem);
      font-style: italic;
      text-shadow: 
        2px 2px 0px rgba(0, 0, 0, 1),
        3px 3px 0px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 200, 0, 0.6),
        0 0 25px rgba(255, 140, 0, 0.4);
      font-weight: 600;
      padding: 0 10px;
    }

    /* Media queries per schermi molto piccoli */
    @media (max-width: 480px) {
      body {
        padding: 15px 10px;
      }

      .description {
        margin-bottom: 20px;
      }

      #burnBtn {
        letter-spacing: 2px;
      }

      textarea, #textContainer {
        min-height: 120px;
        padding: 12px;
      }
    }

    /* Media queries per tablet */
    @media (min-width: 768px) and (max-width: 1024px) {
      .description {
        margin-bottom: 40px;
      }

      textarea, #textContainer {
        min-height: 180px;
      }
    }

    .word-wrapper {
      display: inline-block;
      position: relative;
      margin-right: 0.3em;
    }

    .falling-word {
      display: inline-block;
      position: relative;
      animation: wordFall 1.5s ease-in forwards;
    }

    @keyframes wordFall {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
      }
      70% {
        opacity: 0.7;
      }
      100% {
        transform: translateY(150px) rotate(15deg);
        opacity: 0;
      }
    }

    .word-fire {
      position: absolute;
      width: 100%;
      height: 35px;
      pointer-events: none;
      bottom: -40px;
      left: 0;
    }

    .word-fire::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 20%;
      width: 10px;
      height: 20px;
      background: linear-gradient(to top, #ff4500 0%, #ff6b00 40%, #ffa500 70%, #ffff00 100%);
      border-radius: 50% 50% 0 0 / 60% 60% 0 0;
      animation: fireFlame1 0.6s ease-in-out infinite;
    }

    .word-fire::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 14px;
      height: 25px;
      background: linear-gradient(to top, #ff4500 0%, #ff6b00 40%, #ffa500 70%, #ffff00 100%);
      border-radius: 50% 50% 0 0 / 60% 60% 0 0;
      animation: fireFlame2 0.7s ease-in-out infinite;
      animation-delay: 0.2s;
    }

    .fire-extra {
      position: absolute;
      bottom: 0;
      right: 20%;
      width: 8px;
      height: 18px;
      background: linear-gradient(to top, rgba(255, 69, 0, 0.9) 0%, rgba(255, 165, 0, 0.7) 50%, rgba(255, 255, 0, 0.5) 100%);
      border-radius: 50% 50% 0 0 / 60% 60% 0 0;
      animation: fireFlame3 0.5s ease-in-out infinite;
      animation-delay: 0.1s;
    }

    @keyframes fireFlame1 {
      0%, 100% {
        transform: scaleY(1) scaleX(1) translateX(0);
        opacity: 1;
      }
      25% {
        transform: scaleY(1.2) scaleX(0.9) translateX(-2px);
        opacity: 0.9;
      }
      50% {
        transform: scaleY(0.9) scaleX(1.1) translateX(2px);
        opacity: 0.85;
      }
      75% {
        transform: scaleY(1.15) scaleX(0.95) translateX(-1px);
        opacity: 0.95;
      }
    }

    @keyframes fireFlame2 {
      0%, 100% {
        transform: translateX(-50%) scaleY(1) scaleX(1);
        opacity: 1;
      }
      30% {
        transform: translateX(-50%) scaleY(1.25) scaleX(0.85);
        opacity: 0.9;
      }
      60% {
        transform: translateX(-50%) scaleY(0.95) scaleX(1.1);
        opacity: 0.8;
      }
    }

    @keyframes fireFlame3 {
      0%, 100% {
        transform: scaleY(1) scaleX(1) translateX(0);
        opacity: 0.9;
      }
      40% {
        transform: scaleY(1.3) scaleX(0.8) translateX(2px);
        opacity: 1;
      }
      70% {
        transform: scaleY(0.85) scaleX(1.15) translateX(-2px);
        opacity: 0.85;
      }
    }

    .spark {
      position: absolute;
      width: 3px;
      height: 3px;
      background: #ffff00;
      border-radius: 50%;
      pointer-events: none;
      box-shadow: 0 0 5px #ffff00;
      animation: sparkFly 1s ease-out forwards;
    }

    @keyframes sparkFly {
      0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0);
      }
    }

    .hidden {
      display: none;
    }




  </style>