/* @import url('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: #060c21; */ } .c-form { position: relative; background: #060c21d8; border: 1px solid #3f3f3f; box-shadow: 5px 5px 10px rgba(87, 86, 86, 0.788); width: 350px; padding: 40px 40px 60px; border-radius: 10px; text-align: center; } .c-form::before { content: ''; position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; background: linear-gradient(315deg,#591309,#fee4c1); z-index: -1; transform: skew(2deg,1deg); border-radius: 10px; } .c-form h2 { color: #fff; font-weight: 500; text-transform: uppercase; letter-spacing: 5px; transition: transform 0.2s; } .c-form h2:hover { scale: 1.05; transition: transform 0.2s; } .c-form .c-input { margin-top: 40px; text-align: left; } .c-form .c-input .c-inputBox { margin-top: 10px; } .c-form .c-input .c-inputBox label { display: block; color: #fff; margin-bottom: 5px; font-size: 18px; letter-spacing: 1px; } .c-form .c-input .c-inputBox input { position: relative; width: 100%; height: 40px; border: none; outline: none; padding: 5px 15px; background:linear-gradient(315deg,#591309,#fee4c1) ; color: #fff; font-size: 18px; border-radius: 10px; } .c-form .c-input .c-inputBox input[type="submit"] { cursor: pointer; margin-top: 20px; letter-spacing: 1px; } .c-form .c-input .c-inputBox input[type="submit"]:hover { background:linear-gradient(315deg,#fee4c1,#591309) ; } .c-form .c-input .c-inputBox input[type="submit"]:active { color: rgba(255, 255, 255, 0.521); background:linear-gradient(315deg,#fee4c1,#591309) ; }