html {height: 100%;}
body {margin: 0;padding: 0;font-family: sans-serif;background-size: cover;background-size: cover;background-image: linear-gradient(to right top, #491100, #591805, #6a2007, #7b2908, #8c3206, #9b3c06, #ab4604, #ba5002, #cb5e02, #dd6c03, #ee7a02, #ff8901);}
.login-box {position: absolute;top: 50%;left: 50%;width: 400px;padding: 40px;transform: translate(-50%, -50%);background: rgb(72 16 1 / 73%);box-sizing: border-box;box-shadow: 0 15px 25px rgb(180 1 1 / 72%);border: 4px solid #ff9501cc;z-index: 10;}
.login-box h2 {margin: 0 0 30px;padding: 0;color: #fff;text-align: center;}
.login-box .user-box {position: relative;}
.login-box .user-box input {width: 100%;padding: 10px 0;font-size: 16px;color: #fff;margin-bottom: 30px;border: none;border-bottom: 1px solid #fff;outline: none;background: transparent;}
.login-box .user-box label {position: absolute;top: 0;left: 0;padding: 10px 0;font-size: 16px;color: #fff;pointer-events: none;transition: .5s;}
.login-box .user-box input:focus ~ label,.login-box .user-box input:valid ~ label {top: -20px;left: 0;font-size: 12px;}
.login-box form a {position: relative;display: inline-block;padding: 10px 20px;color: #03e9f4;font-size: 16px;text-decoration: none;text-transform: uppercase;overflow: hidden;transition: .5s;margin-top: 40px;letter-spacing: 4px}
.login-box a:hover {background: #03e9f4;color: #fff;border-radius: 5px;box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;}
.login-box a span {position: absolute;display: block;}
.login-box a span:nth-child(1) {top: 0;left: -100%;width: 100%;height: 2px;background: linear-gradient(90deg, transparent, #03e9f4);animation: btn-anim1 1s linear infinite;}
@keyframes btn-anim1 {0% {left: -100%;}50%,100% {left: 100%;}}
.login-box a span:nth-child(2) {top: -100%;right: 0;width: 2px;height: 100%;background: linear-gradient(180deg, transparent, #03e9f4);animation: btn-anim2 1s linear infinite;animation-delay: .25s}
@keyframes btn-anim2 {0% {top: -100%;}50%,100% {top: 100%;}}
.login-box a span:nth-child(3) {bottom: 0;right: -100%;width: 100%;height: 2px;background: linear-gradient(270deg, transparent, #03e9f4);animation: btn-anim3 1s linear infinite;animation-delay: .5s}
@keyframes btn-anim3 {0% {right: -100%;}50%,100% {right: 100%;}}
.login-box a span:nth-child(4) {bottom: -100%;left: 0;width: 2px;height: 100%;background: linear-gradient(360deg, transparent, #03e9f4);animation: btn-anim4 1s linear infinite;animation-delay: .75s}
@keyframes btn-anim4 {0% {bottom: -100%;}
50%,100% {bottom: 100%;}}
@media only screen and (max-width:479px) {.login-box {width: 300px;}
.login-back-img {margin: 200px 0px !important;}}
@media (max-width: 576px) {body, .top-links a {font-size: 13px;}}
.waves-top {position: fixed;top: 0px;left: 0;right: 0;}
.login-back-img {background-size: cover !important;background-repeat: no-repeat !important;width: 100% !important;}