@import 'https://fonts.googleapis.com/css2?family=Oswald&display=swap';*{margin:0;padding:0;box-sizing:border-box;font-family:oswald,sans-serif}body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:url(../images/login.gif)}.form{position:relative;background:#060c21;border:1px solid #000;width:450px;padding:40px 40px 60px;border-radius:10px;margin:50px}.form::before{content:'';position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;background:linear-gradient(315deg,#ff0c00,#ffb900);z-index:-1;transform:skew(2deg,1deg);border-radius:10px}.form h2{color:#fff;font-weight:500}.form .input{margin-top:40px;text-align:left}.form .input .inputBox{margin-top:10px}.form .input .inputBox label{display:block;color:#fff;margin-bottom:5px;font-size:15px;letter-spacing:1px}.form .input .inputBox input{position:relative;width:100%;height:40px;border:none;outline:none;padding:5px 15px;color:#fff;border:1px solid #ffb900;background:0 0;font-size:14px;border-radius:4px}.form .input .inputBox select{position:relative;width:100%;height:40px;border:none;outline:none;padding:5px 15px;color:gray;border:1px solid #ffb900;background:0 0;font-size:14px;border-radius:4px}.form .input .inputBox input[type=submit]{cursor:pointer;margin-top:20px;letter-spacing:1px;width:150px}.form .input .inputBox input[type=submit]:hover{background:linear-gradient(315deg,#ff0c00,#ffb900)}.form .input .inputBox input[type=submit]:active{color:rgba(255,255,255,.521);background:linear-gradient(315deg,#e91e6271,#5f02ff8c)}.forgot{margin-top:10px;color:#fff;font-size:14px;letter-spacing:1px}.forgot a{color:#fff}.social{margin-top:30px;display:flex;flex-direction:column;align-items:center}.social button{width:75%;border-radius:20px;margin-bottom:15px;padding:5px 10px;background:0 0;border:3px solid #222;outline:none;cursor:pointer;display:flex;align-items:center}.social button i{display:flex;align-items:center;justify-content:center;background:#fff;width:20px;height:20px;border-radius:50%}.social button p{color:#fff;font-size:15px;margin-left:10px;letter-spacing:1px}.social button:hover{background:linear-gradient(315deg,#326cd6,#5d02ff)}.social button:hover i{filter:invert(1)}.social button:active{background:linear-gradient(315deg,#5d02ff,#e91e63)}input[type=checkbox]{visibility:hidden;opacity:0;display:inline-block;vertical-align:middle;width:0;height:0;display:none}input[type=checkbox]:checked~label:before{content:"\f00c";color:#ff1400;border:1px solid #ff1400}input[type=checkbox]~label{position:relative;padding-left:30px;cursor:pointer;display:block}input[type=checkbox]~label:before{content:"";font-weight:700;position:absolute;left:0;top:3.5px;border:1px solid #fff;height:18px;width:18px;line-height:18px;text-align:center;font-size:12px}input[type=radio]{visibility:hidden;opacity:0;display:inline-block;vertical-align:middle;width:0;height:0;display:none}input[type=radio]~label{position:relative;padding-left:30px;cursor:pointer;line-height:1;display:inline-block;font-weight:600;margin-bottom:0}input[type=radio]~label::before{content:"\f111";position:absolute;left:0;top:-2px;width:20px;height:20px;padding-left:0;font-size:.6em;line-height:19px;text-align:center;border-radius:100%;font-weight:700;color:transparent;-webkit-transition:all .2s ease;transition:all .2s ease}input[type=radio]:checked~label::before{}@media only screen and (max-width:600px){.form{position:relative;background:#060c21;border:1px solid #000;width:80%;padding:40px 40px 60px;border-radius:10px;margin:40px}}