:root { --Rotkehlchen-gray: #e7ecf2; --Rotkehlchen-brown1: #a28d7a; --Rotkehlchen-orange-default: #e79a0e; --Rotkehlchen-gray-default: #E7ECF2; --Rotkehlchen-brown-middle: #7F6D6D; --Rotkehlchen-yellow-default: #FED640; --Rotkehlchen-yellow-hover: #EAC22A; } .login-display{ display: flex; flex-direction: column; height: 100vh; /* Full viewport height */ width: 100vw; /* Full viewport width */ position: absolute; background: var(--gradient-blue-backround-mobile, linear-gradient(270deg, rgba(20, 15, 86, 0.27) 0%, rgba(20, 15, 86, 0.58) 24%, rgba(20, 15, 86, 0.74) 43%, rgba(17, 13, 71, 0.82) 56%, rgba(13, 10, 56, 0.90) 68%), url('../public/assets/images/BirdsSky.jpg') lightgray 50% / cover no-repeat); align-items: center; justify-content: center; min-width: 300px; min-height: 400px; } .login-text{ display: flex; padding: 8px 40px 40px 40px; flex-direction: column; justify-content: center; align-items: center; gap: 18px; color: var(--Rotkehlchen-gray-default); text-align: center; /* Body-L */ font-family: Inter; font-size: 24px; font-style: normal; font-weight: 700; line-height: 40px; /* 166.667% */ } .login-icon{ height: 32px; width: 32px; aspect-ratio: 1/1; align-self: center; } .login-button{ display: inline-flex; padding: auto; justify-content: center; align-items: center; gap: 10px; width: 150px; height: 32px; border-radius: 10px; border: 2px solid var(--Rotkehlchen-orange-default); background: var(--Rotkehlchen-yellow-default); } .login-button:hover{ border-radius: 10px; border: 2px solid var(--Rotkehlchen-orange-default); background: var(--Rotkehlchen-yellow-hover); } .login-button:active{ border-radius: 10px; border: 2px solid var(--Rotkehlchen-orange-default); background: var(--Rotkehlchen-orange-default); } .login-div-input{ display: flex; flex-direction: row; border-radius: 4px; border: 2px solid var(--Rotkehlchen-brown-middle); background: #FFF; width:100%; height: 32px; align-items: center; justify-content: flex-start; } .login-input{ width: 100%; height: 28px; border: none; color: var(--Rotkehlchen-brown-middle); /* M3/body/large */ font-family: var(--Static-Body-Large-Font, Roboto); font-size: var(--Static-Body-Large-Size, 16px); font-style: normal; font-weight: 400; line-height: var(--Static-Body-Large-Line-Height, 24px); /* 150% */ letter-spacing: var(--Static-Body-Large-Tracking, 0.5px); } .login-link{ color: var(--Rotkehlchen-orange-default, #E79A0E); /* Body-M */ font-family: Inter; font-size: 16px; font-style: normal; font-weight: 600; line-height: 17px; letter-spacing: 0.8px; } .login-signup{ color: #FFF; text-align: center; /* Body-M */ font-family: Inter; font-size: 1rem; font-style: normal; font-weight: 600; line-height: 17px; /* 106.25% */ letter-spacing: 0.8px; } .login-part{ display: flex; padding: 8px 40px 40px 40px; flex-direction: column; justify-content: center; align-items: center; gap: 18px; } /* Desktop view*/ @media only screen and (min-width: 768px) { .login-login{ display: flex; flex-direction: row; border-radius: 4px; background: rgba(13, 10, 56, 0.71); box-shadow: 0px 5px 8.9px 15px rgba(115, 116, 206, 0.25); align-items: center; justify-content: start; width: 50vw; height: 60vh; min-height: 300px; min-width: 400px; } .login-image{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 8px; border: 5px solid var(--Rotkehlchen-gray-default); background-image: url("../public/assets/images/BirdLogin.jpg"); background-size: cover; background-position: 75%; } .signup-image{ width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 8px; border: 5px solid var(--Rotkehlchen-gray-default); background-image: url("../public/assets/images/OwlSignUp.png"); background-size: cover; background-position: 75%; } .login-part{ width: 45%; height: 90%; padding:3%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1%; } }