@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); :root{ --main-color: #2eb1cd; --black--color: #160d5e; --white-color: #fff; --body-color: #f0f2f5; --gold-color: #ff9939; --body-font-color: #5f5f5f; --border: .1rem solid rgba(0,0,0, 0.2); --box-shadow: 0 .5rem 1rem rgba(0,0,0, 0.1); } .btnn { width: 10rem; margin: 0 auto; border-radius: .5rem; padding: .8rem .6rem; font-size: 1.3rem; color: var(--white-color); cursor: pointer; background-color: var(--main-color); border: none; } *{ margin: 0; font-family: 'Poppins', sans-serif; box-sizing: border-box; } html{ font-size: 62.5%; overflow-x: hidden; } .heading{ font-size: 2rem; color: var(--black--color); font-weight: bold; text-align: center; } body{ background-color: var(--body-color); } /* form section starts */ .form{ min-height: 100vh; display: flex; justify-content: center; align-items: center; } .form form{ background-color: var(--white-color); box-shadow: var(--box-shadow); width: 40rem; padding: 2rem; border-radius: .5rem; } .form form .image{ margin: 0 auto; width: 7rem; height: 7rem; } .form form .image img{ width: 100%; height: 100%; object-fit: contain; } .form form .login-heading{ font-size: 1.4rem; color: var(--main-color); padding: 1rem 0; text-align: center; } .form form .login-heading big{ color: var(--gold-color); font-size: 2rem; } .form form .box{ position: relative; flex: 1 1 40rem; margin-bottom: .5rem; } .form form .box label{ font-size: 1.3rem; color: var(--black--color); } .form form .box i{ position: absolute; top: 68%; right: 1rem; transform: translateY(-50%); color: var(--main-color); font-size: 1.3rem; transition: all 0.5s ease-in-out; cursor: pointer; } .form form .box .input{ width: 100%; border: var(--border); padding: 0.5rem; margin: .5rem 0; font-size: 1.8rem; color: var(--black-color); border-radius: .5rem; } .form form .box .input:focus{ outline: 0; box-shadow: var(--box-shadow); } .form form .box span { font-size: 1.3rem; color: #df4958; font-weight: bold; margin-top: 2rem; } /* form section ends */ /* alert message section starts */ .alert-message{ position: absolute; top: 10rem; right: 40%; width: auto; padding: 1rem; margin-bottom: .5rem; display: flex; align-items: center; gap: 1rem; justify-content: space-between; border: var(--border); border-radius: .5rem; background: #fff; z-index: 1000; } .alert-message span{ font-size: 1.3rem; color: var(--black--color); } .alert-message i{ font-size: 2rem; color: var(--black--color); cursor: pointer; } .alert-message.alert-red .fa-times-circle{ color: #f2495a; font-size: 2rem; } .alert-message.alert-green .fa-circle-check{ color: #1e5433; font-size: 2rem; } .alert-message.alert-yellow .fa-exclamation-circle{ color:#daae29; font-size: 2rem; } /* alert message section ends */ /* footer section starts */ .footer{ position: relative; bottom: 0; padding: 1rem; } .footer .flex{ display: flex; justify-content: center; } .footer .flex .copyright{ font-size: 1.1rem; color: var(--white); } .footer .flex .contact{ font-size: 1.1rem; color: #e24d4c; } /* footer section ends */ /* mobile device */ @media(max-width: 768px){ .alert-message{ position: absolute; top: 10rem; right: 7rem; width: 0 auto; padding: 1rem; margin-bottom: .5rem; } .footer .flex{ flex-wrap: wrap; } }