*{font-family:Roboto,sans-serif;margin:0;animation:loadComponents .6s linear}:root{--background-color:#fcfcfc;--logo-one:#fbd87f;--logo-two:#f75590;--logo-three:#10ffcb}body{background-color:var(--background-color)}@keyframes loadComponents{0%{opacity:0;filter:blur(50)}to{opacity:1;filter:blur(0)}}.login-container{display:flex;align-items:center;justify-content:center;background-color:#fff;padding:80px;filter:drop-shadow(0px 0px 5px rgba(0,0,0,.1));border-radius:20px}.left-img{width:400px}.logo{width:200px;margin:5%}.login-right h2{font-size:60px;font-weight:200}.input-form{display:flex;flex-direction:column;gap:10px}.login-right{width:500px;padding:5%;display:flex;flex-direction:column;align-items:center;gap:10px}.login-left{display:flex;flex-direction:column;align-items:center}.input-form label{font-size:20px;margin:6% 2% 1%}.input-form input{width:300px;padding:12px;border-radius:10px;border:solid black .5px;font-size:15px}.input-form button{width:325px;padding:12px;margin-top:2%;border:none;background-color:var(--logo-one);transition:.5s;border-radius:10px}.input-form button:hover{background-color:var(--logo-two);cursor:pointer}.input-form button:active{background-color:var(--logo-three)}@media (max-width:600px){.login-container{flex-direction:column}.left-img{width:200px}}.nav-container{width:100%;height:80px;background-color:#e9e7e7;display:flex;align-items:center;justify-content:space-between}.nav-container img{width:80px;margin:1% .1% 1% 1%;filter:invert(1)}.user-name-nav{font-size:20px}.nav-container div{display:flex;margin:2%}.logout{font-size:20px;background:none;border:none;cursor:pointer}.logout:hover{text-decoration:underline;transform:scale(1.1)}@media (max-width:600px){.nav-container img{width:30px}.nav-container p{font-size:14px}.user-name-nav,.logout{font-size:12px}.nav-container{height:40px}}.container{display:flex;align-items:center;justify-content:space-between}.main-div{margin:3%}.home-img{width:800px}.home-text{font-size:30px;text-wrap:nowrap}.home-tagline{text-align:right;margin-top:30px;font-size:20px}@media (max-width:600px){.container{justify-content:center}.main-div{display:flex;flex-direction:column;align-items:center}.home-img{width:70vw}.container{width:100vw}.home-text{font-size:15px;text-wrap:wrap;text-align:center}.home-tagline{font-size:16px;text-align:center;width:90vw}.img-div{display:none}}.cards{display:flex;gap:2%;justify-content:space-evenly;flex-wrap:wrap;margin-bottom:30px}.card{position:relative;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:10px;padding:1%;transition:.3s;width:320px;height:250px;cursor:pointer;border-radius:4px}.card-bg{position:absolute;top:0;left:0;width:100%;height:100%;transition:filter .3s ease;z-index:1;background-color:#fff;border-radius:10%;filter:drop-shadow(0px 0px 10px rgba(0,0,0,.1))}.card:hover{transform:translateY(-20px)}.card-content{position:relative;z-index:2;height:100%;padding:20px;display:flex;flex-direction:column;justify-content:space-between;text-align:center;color:#222;transition:color .3s ease}.card:hover .card-bg{filter:brightness(.3);border-radius:10px}.view-on{opacity:1;transition:opacity .3s ease}.hover-on{opacity:0;transition:opacity .3s ease;color:#fff}.card:hover .view-on{opacity:0}.card:hover .hover-on{opacity:1}.card-content a{color:#fff;text-decoration:none}.card-content a:hover{text-decoration:underline}@keyframes linkAnimation{0%{transform:translate(0)}50%{transform:translate(10px)}to{transform:translate(0)}}.go-to-link i{animation:linkAnimation 1s infinite;margin-right:10px}@media (max-width:600px){.cards{display:grid;grid-template-columns:auto auto;transform:scale(.55);justify-content:center;gap:20px;margin-top:-40%}.card{height:400px;border-radius:0}body{width:100vw;overflow-x:hidden}.card-bg{border-radius:0}}.emp-manage-container{margin:2%;display:flex;gap:80px;flex-wrap:wrap-reverse}.emp-manage-container h2{font-size:30px;margin:1%;text-wrap:nowrap}.emp-add{display:flex;flex-direction:column;background-color:#fff;filter:drop-shadow(0px 0px 20px rgba(0,0,0,.2));padding:3%;border-radius:1%;height:fit-content}.emp-add label{margin:5% auto .5% 0}.form{display:flex;flex-direction:column;gap:10px}.emp-table table thead tr{background-color:var(--logo-three);height:50px}.emp-table table{width:1200px;text-align:center}.emp-table table tr{border-bottom:1px solid black;cursor:pointer}.emp-table table{border-collapse:collapse}.emp-table table tr td{padding:20px}.emp-table table tr:hover{background-color:var(--logo-one)}.emp-table table tbody tr{background-color:#faebd7}.emp-add .form input,.emp-add .form button,.emp-add .form select{padding:8px;border-radius:5px}.emp-add .form button{background-color:var(--logo-three);cursor:pointer;border:none}.emp-add .form input:focus{outline:solid var(--logo-one);border:none}.emp-add .form input{border:solid .5px}.table-container{height:75vh;position:sticky;top:70%;overflow-y:scroll}.table-container table thead{position:sticky;top:0}@media (max-width:600px){.emp-manage-container{justify-content:left}.table-container{overflow-x:scroll;width:100vw}.emp-add{filter:none}body{width:100vw;overflow-x:hidden}.table-container table{width:100%;margin-right:20px;font-size:10px}.emp-table table tr td{padding:5px}.emp-table table tr td,.emp-table table thead tr td{width:10px}.emp-table table thead tr{height:20px}.emp-table h2{font-size:15px;margin-top:-50px}}.dlt-btn{background-color:#e24747;border-radius:5px;border:solid 1px;cursor:pointer}.loading-gif{width:120px}