.top-bar{position:fixed;top:10px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:space-between;width:90%;padding:10px 20px;margin:10px;background-color:var(--primary-color);border-radius:10px}.top-bar .logo img{width:300px;margin-right:10px;cursor:pointer}.navbar{position:fixed;bottom:10px;left:50%;transform:translate(-50%);width:100%;padding:10px;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:5px}.navbar .curr-path{padding:10px;border-radius:5px;background-color:#0000004d}.curr-path p{margin:0;padding:6px}.home-login-container{position:relative;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;background-color:var(--primary-color);padding:80px;border-radius:10px;width:80%}.home-login-container p{font-size:30px}.home-login-container a{text-decoration:none;color:#7f5af0e6}.home-login-container a:hover{color:#7f5af0}.home-login-container button{font-size:18px;padding:10px;border-radius:5px;background-color:#b727ff;border:none;width:60%}.home-login-container button:hover{background-color:#b727ffe6;border:none}.navbar .nav-btns{padding:10px;border-radius:5px;background-color:#1313134d}button{font-size:15px;padding:10px;margin:0 5px;border-radius:5px;background-color:transparent;border:1px solid rgba(200,200,200,.3)}button:hover{border:1px solid rgb(183,39,255)}.active{border:none!important}button:hover{cursor:pointer}:root{--primary-color: #1a1a1a;--sec-color: #646cff;--ter-color: #373636;font-size:large;text-align:left}body{overflow-x:hidden}.contacts-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--primary-color);width:60%;height:65vh;padding:30px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}.contacts-container button{margin:0}.table{width:90%;border-collapse:collapse;border-spacing:0;margin:20px 0;border-radius:10px}.fixed_header thead{width:600px}.fixed_header tbody{width:600px;table-layout:fixed;border-collapse:collapse;display:block;overflow:auto;height:50vh}.fixed_header thead tr{display:block;width:98%}.fixed_header tbody tr{display:block}th.nameCol,td.nameCell{width:200px}th.numCol,td.numCell{width:150px}th.actionCol{width:250px}td.actionCell{width:100px}:root{--hue: 223;--loader-bg: hsl(var(--hue),10%,90%);--loader-fg: hsl(var(--hue),10%,10%);--primary: hsl(var(--hue),90%,55%);--primary-l: hsl(var(--hue),90%,65%);--primary-d: hsl(var(--hue),90%,45%);--white: hsl(var(--hue),10%,100%);--white-d: hsl(var(--hue),10%,45%)}body{color:var(--loader-fg);font:1em/1.5 sans-serif;height:100vh;display:grid;place-items:center}.book,.book__pg-shadow,.book__pg{animation:cover 7s ease-in-out infinite}.book{background-color:var(--primary-l);border-radius:.25em;box-shadow:0 .25em .5em #0000004d,0 0 0 .25em var(--primary) inset;padding:.25em;perspective:37.5em;position:relative;width:6em;height:4em;aspect-ratio:8/6;transform:translateZ(0);transform-style:preserve-3d}.book__pg-shadow,.book__pg{position:absolute;left:.25em;width:calc(50% - .25em)}.book__pg-shadow{animation-name:shadow;background-image:linear-gradient(-45deg,hsla(0,0%,0%,0) 50%,hsla(0,0%,0%,.3) 50%);filter:blur(.25em);top:calc(100% - .25em);height:3.75em;transform:scaleY(0);transform-origin:100% 0%}.book__pg{animation-name:pg1;background-color:var(--white);background-image:linear-gradient(90deg,hsla(var(--hue),10%,90%,0) 87.5%,hsl(var(--hue),10%,90%));height:calc(100% - .5em);transform-origin:100% 50%}.book__pg--2,.book__pg--3,.book__pg--4{background-image:repeating-linear-gradient(hsl(var(--hue),10%,10%) 0 .125em,hsla(var(--hue),10%,10%,0) .125em .5em),linear-gradient(90deg,hsla(var(--hue),10%,90%,0) 87.5%,hsl(var(--hue),10%,90%));background-repeat:no-repeat;background-position:center;background-size:2.5em 4.125em,100% 100%}.book__pg--2{animation-name:pg2}.book__pg--3{animation-name:pg3}.book__pg--4{animation-name:pg4}.book__pg--5{animation-name:pg5}@media (prefers-color-scheme: dark){:root{--loader-bg: hsl(var(--hue),10%,30%);--loader-fg: hsl(var(--hue),10%,90%)}}@keyframes cover{0%,5%,45%,55%,95%,to{animation-timing-function:ease-out;background-color:var(--primary-l)}10%,40%,60%,90%{animation-timing-function:ease-in;background-color:var(--primary-d)}}@keyframes shadow{0%,10.01%,20.01%,30.01%,40.01%{animation-timing-function:ease-in;transform:translateZ(1px) scaleY(0) rotateY(0)}5%,15%,25%,35%,45%,55%,65%,75%,85%,95%{animation-timing-function:ease-out;transform:translateZ(1px) scaleY(.2) rotateY(90deg)}10%,20%,30%,40%,50%,to{animation-timing-function:ease-out;transform:translateZ(1px) scaleY(0) rotateY(180deg)}50.01%,60.01%,70.01%,80.01%,90.01%{animation-timing-function:ease-in;transform:translateZ(1px) scaleY(0) rotateY(180deg)}60%,70%,80%,90%,to{animation-timing-function:ease-out;transform:translateZ(1px) scaleY(0) rotateY(0)}}@keyframes pg1{0%,to{animation-timing-function:ease-in-out;background-color:var(--white);transform:translateZ(1px) rotateY(.4deg)}10%,15%{animation-timing-function:ease-out;background-color:var(--white);transform:translateZ(1px) rotateY(180deg)}20%,80%{animation-timing-function:ease-in;background-color:var(--white-d);transform:translateZ(1px) rotateY(180deg)}85%,90%{animation-timing-function:ease-in-out;background-color:var(--white);transform:translateZ(1px) rotateY(180deg)}}@keyframes pg2{0%,to{animation-timing-function:ease-in;background-color:var(--white-d);transform:translateZ(1px) rotateY(.3deg)}5%,10%{animation-timing-function:ease-in-out;background-color:var(--white);transform:translateZ(1px) rotateY(.3deg)}20%,25%{animation-timing-function:ease-out;background-color:var(--white);transform:translateZ(1px) rotateY(179.9deg)}30%,70%{animation-timing-function:ease-in;background-color:var(--white-d);transform:translateZ(1px) rotateY(179.9deg)}75%,80%{animation-timing-function:ease-in-out;background-color:var(--white);transform:translateZ(1px) rotateY(179.9deg)}90%,95%{animation-timing-function:ease-out;background-color:var(--white);transform:translateZ(1px) rotateY(.3deg)}}@keyframes pg3{0%,10%,90%,to{animation-timing-function:ease-in;background-color:var(--white-d);transform:translateZ(1px) rotateY(.2deg)}15%,20%{animation-timing-function:ease-in-out;background-color:var(--white);transform:translateZ(1px) rotateY(.2deg)}30%,35%{animation-timing-function:ease-out;background-color:var(--white);transform:translateZ(1px) rotateY(179.8deg)}40%,60%{animation-timing-function:ease-in;background-color:var(--white-d);transform:translateZ(1px) rotateY(179.8deg)}65%,70%{animation-timing-function:ease-in-out;background-color:var(--white);transform:translateZ(1px) rotateY(179.8deg)}80%,85%{animation-timing-function:ease-out;background-color:var(--white);transform:translateZ(1px) rotateY(.2deg)}}@keyframes pg4{0%,20%,80%,to{animation-timing-function:ease-in;background-color:var(--white-d);transform:translateZ(1px) rotateY(.1deg)}25%,30%{animation-timing-function:ease-in-out;background-color:var(--white);transform:translateZ(1px) rotateY(.1deg)}40%,45%{animation-timing-function:ease-out;background-color:var(--white);transform:translateZ(1px) rotateY(179.7deg)}50%{animation-timing-function:ease-in;background-color:var(--white-d);transform:translateZ(1px) rotateY(179.7deg)}55%,60%{animation-timing-function:ease-in-out;background-color:var(--white);transform:translateZ(1px) rotateY(179.7deg)}70%,75%{animation-timing-function:ease-out;background-color:var(--white);transform:translateZ(1px) rotateY(.1deg)}}@keyframes pg5{0%,30%,70%,to{animation-timing-function:ease-in;background-color:var(--white-d);transform:translateZ(1px) rotateY(0)}35%,40%{animation-timing-function:ease-in-out;background-color:var(--white);transform:translateZ(1px) rotateY(0)}50%{animation-timing-function:ease-in-out;background-color:var(--white);transform:translateZ(1px) rotateY(179.6deg)}60%,65%{animation-timing-function:ease-out;background-color:var(--white);transform:translateZ(1px) rotateY(0)}}.login-form{position:relative;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:15px;width:100%;background-color:var(--primary-color);border-radius:10px;padding:30px}.login-form div{display:flex;justify-content:space-between;align-items:center;gap:5px;width:100%}.login-form input{background-color:#6a6a6a4d;border:1px solid rgba(106,106,106,.5);font-size:15px;padding:5px;border-radius:5px;width:60%;text-align:center}.login-form button{font-size:18px;padding:10px;border-radius:5px;background-color:#b727ff;border:none;width:40%}.login-form button:hover{background-color:#b727ffe6}.login-form p{margin:0}.login-form a{text-decoration:none;color:#7f5af0e6}.login-form a:hover{color:#7f5af0}.register-form{position:relative;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:15px;width:100%;background-color:var(--primary-color);border-radius:10px;padding:30px}.register-form div{display:flex;justify-content:space-between;align-items:center;gap:5px;width:100%}.register-form input{background-color:#6a6a6a4d;border:1px solid rgba(106,106,106,.5);font-size:15px;padding:5px;border-radius:5px;width:60%;text-align:center}.register-form button{font-size:18px;padding:10px;border-radius:5px;background-color:#b727ff;border:none;width:40%}.register-form button:hover{background-color:#b727ffe6}.add-contact-form{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:15px;width:400px;background-color:var(--primary-color);border-radius:10px;padding:30px}.add-contact-form div{display:flex;justify-content:space-between;align-items:center;gap:5px;width:100%}.add-contact-form input{background-color:#6a6a6a4d;border:1px solid rgba(106,106,106,.5);font-size:15px;padding:5px;border-radius:5px;width:60%;text-align:center}.add-contact-form button{font-size:18px;padding:10px;border-radius:5px;background-color:#b727ff;border:none;width:40%}.add-contact-form button:hover{background-color:#b727ffe6}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}