/* @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; } .logo { color: #fff; font-weight: 500; text-transform: uppercase; letter-spacing: 5px; filter: drop-shadow(0px 0px 8px rgba(168, 168, 168, 0.788)); transition: all 0.5s ease-in-out; } .logo:hover { filter: drop-shadow(0px 0px 12px rgba(168, 168, 168, 0.788)); /* transition: transform 1.2s; */ scale: 1.2; } .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: #f1e3d1; margin-bottom: 5px; font-size: 18px; letter-spacing: 1px; } .c-form .c-input .c-inputBox input { position: relative; width: 100%; height: 50px; border: none; outline: none; padding: 5px 15px; background: #3f3f3f; color: #fff; font-size: 20px; border-radius: 10px; } .c-form .c-input .c-inputBox input[type="submit"] { background:#612319; cursor: pointer; margin-top: 20px; letter-spacing: 1px; box-shadow: 0px 0px 10px rgba(207, 207, 207, 0.671); transition: all 0.3s ease-in-out; } .c-form .c-input .c-inputBox input[type="submit"]:hover { background:#9e6f4f; scale: 1.05; } /* .c-form .c-input .c-inputBox input[type="submit"]:active { color: rgba(255, 255, 255, 0.521); background:linear-gradient(315deg,#fee4c1,#591309) ; } */