*{margin:0;padding:0;box-sizing:border-box}body,html{margin:0;padding:0;font-size:1.1rem;width:100%;height:100%;--s: 200px;--c1: #1d1d1d;--c2: #4e4f51;--c3: #3c3c3c;background:repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 180deg) calc(.5 * var(--s)) calc(.5 * var(--s) * .577),repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 180deg);background-size:var(--s) calc(var(--s) * .577)}html,body,.app-container{height:100%;padding:0;margin:0;display:flex;flex-direction:column;overflow-x:hidden}.app-container{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}.main-content{flex:1}.navrow{display:flex;flex-direction:row;gap:2rem;padding:1rem}.Nav{color:#fff;font-size:1.2rem;font-weight:600;text-decoration:none}.active-link{text-decoration:none;font-size:1.2rem;font-weight:600;color:#f3df29}.Nav:hover{text-decoration:none;color:#f3df29}#Navbar{background-color:#131212}#footer{border-top:2px solid rgb(250,6,6);padding:2rem;display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;background:linear-gradient(16deg,#0e0d0d,#080808);flex-shrink:0;gap:3rem}#footer div{display:flex;flex-direction:column}#footer div p,#footer div p a{color:#fff;font-size:1rem;text-decoration:none}.flip-card{background-color:transparent;width:25rem;height:28rem;perspective:1000px;font-family:sans-serif}.title{font-size:1.3em;font-weight:900;text-align:center;margin:0}.flip-card-inner{position:relative;width:100%;height:100%;padding:.2rem;text-align:center;transition:transform .8s;transform-style:preserve-3d}.flip-card:hover .flip-card-inner{transform:rotateY(180deg)}.flip-card-front,.flip-card-back{box-shadow:0 8px 14px #0003;position:absolute;display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid coral;border-radius:1rem}.flip-card-front{background:linear-gradient(120deg,#5c5c5c 60%,#f5f3f3 88%,#fdfbfa 40%,#f8eeeefd 48%);color:coral}.flip-card-back{padding:2rem;background:linear-gradient(120deg,#cecdcc 30%,#070707 88%);color:#f5f3f3;transform:rotateY(180deg)}.flip-card-back h2{margin-bottom:1rem;color:coral}.flip-card-back p{margin-bottom:2.5rem}.middle-part{padding:3rem;display:flex;flex-direction:column;justify-content:center;align-items:center}button{outline:none;cursor:pointer;border:none;padding:.9rem 2rem;margin:0;font-family:inherit;font-size:inherit;position:relative;display:inline-block;letter-spacing:.05rem;font-weight:700;font-size:17px;border-radius:500px;overflow:hidden;background:#6f6;color:#f8f8ff}button span{position:relative;z-index:10;transition:color .4s}button:hover span{color:#000}button:before,button:after{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}button:before{content:"";background:#000;width:120%;left:-10%;transform:skew(30deg);transition:transform .4s cubic-bezier(.3,1,.8,1)}button:hover:before{transform:translate3d(100%,0,0)}.form{--bg-light: #efefef;--bg-dark: #707070;--clr: #58bc82;--clr-alpha: #9c9c9c60;display:flex;flex-direction:column;align-items:center;gap:3rem;width:100%;max-width:300px}.form .input-span{width:100%;display:flex;flex-direction:column;gap:.5rem}.form input[type=email],.form input[type=text]{border-radius:.5rem;padding:1rem .75rem;width:100%;border:none;display:flex;align-items:center;gap:.5rem;color:#fff;font-size:1rem;background-color:var(--clr-alpha);outline:2px solid var(--bg-dark)}.form input[type=email]:focus,.form input[type=name]:focus{outline:2px solid var(--clr)}.label{align-self:flex-start;color:var(--clr);font-weight:600}.form .submit{padding:1rem .75rem;width:100%;display:flex;align-items:center;gap:.5rem;border-radius:3rem;background-color:var(--bg-dark);color:var(--bg-light);border:none;cursor:pointer;transition:all .3s;font-weight:600;font-size:.9rem}.form .submit:hover{background-color:var(--clr);color:var(--bg-dark)}.span{text-decoration:none;color:#fff}.span a{color:var(--clr)}.register-form,.login-form{display:flex;justify-content:center;padding:3rem;margin-top:2rem;margin-bottom:2rem}.card1{color:#000;width:26rem;height:28rem;border-radius:44px;background:#d3d3d3;background:linear-gradient(145deg,#f59d9d,#474646);box-shadow:2px 3px 3px #f1efef,2px 3px 3px #faf8f8}.avatar{width:8rem;height:8rem;display:inline-block;background-color:#ffffffe6;margin:30px 15px 20px 25px;border-radius:14px}.info{display:inline-block;vertical-align:top;margin-top:33px;width:14rem}.info-1,.info-2{display:inline-block;height:2.5rem;width:100%;border-radius:6px;background:#ffffffe6;padding:.6rem}.info-2{padding:.6rem;margin-top:2rem;height:2.5;width:100%;border-radius:6px}.content-1{width:80%;border-radius:12px;background:#ffffffe6;padding:.5rem;height:4rem;margin:5rem auto 2rem}.content-2{width:60%;padding:.2rem;border-radius:6px;background:#ffffffe6;height:2rem;margin:1rem auto;display:flex;justify-content:center}.content-2 a:hover{color:#00f;cursor:pointer}.userinfo{color:#fff;margin-top:2rem;margin-bottom:2rem;padding:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center}.secret-form-wrapper{display:flex;justify-content:center;align-items:center;padding:2rem;background:#f3f3f3}.secret-form{background:#fff;padding:2rem;border-radius:12px;box-shadow:#00000026 0 4px 12px;width:100%;max-width:600px;text-align:center}.lock-icon{color:#0e2954;margin-bottom:1rem}.input-group{display:flex;gap:1rem;align-items:stretch;margin-top:1rem}.secret-input{flex:1;padding:.75rem 1rem;border-radius:8px;border:1px solid #ccc;resize:none;font-size:16px;min-height:100px;box-shadow:inset 0 1px 3px #0000001a;transition:border-color .3s}.secret-input:focus{border-color:#0e2954;outline:none}.add-btn{padding:0 1.5rem;background-color:#0e2954;color:#fff;border:none;border-radius:8px;font-size:16px;cursor:pointer;transition:background-color .3s}.add-btn:hover{background-color:#163b70}.addsecrets{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;margin-top:2rem;margin-bottom:2rem;padding:2rem}.card-container{width:300px;height:300px;position:relative;border-radius:10px;box-shadow:0 10px 20px #0003;overflow:hidden}.card{width:100%;height:100%;border-radius:inherit}.card .front-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(-45deg,#e9f7df,#f18686);transition:all .6s cubic-bezier(.23,1,.32,1)}.card .front-content p{font-size:32px;font-weight:700;opacity:1;background:linear-gradient(-45deg,#f89b29,#ff0f7b);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;transition:all .6s cubic-bezier(.23,1,.32,1)}.card .content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;background:linear-gradient(-45deg,#f89b29,#ff0f7b);color:#e8e8e8;padding:20px;line-height:1.5;border-radius:5px;pointer-events:none;transform:translateY(96%);transition:all .6s cubic-bezier(.23,1,.32,1)}.card .content .heading{font-size:32px;font-weight:700}.card:hover .content{transform:translateY(0)}.card:hover .front-content{transform:translateY(-30%)}.card:hover .front-content p{opacity:0}.user-profile{width:131px;height:51px;border-radius:15px;cursor:pointer;transition:.3s ease;background:linear-gradient(to bottom right,#2e8eff,#2e8eff00 30%);background-color:#2e8eff33;display:flex;align-items:center;justify-content:center}.user-profile:hover,.user-profile:focus{background-color:#2e8effb3;box-shadow:0 0 10px #2e8eff80;outline:none}.user-profile-inner{width:127px;height:47px;border-radius:13px;background-color:#1a1a1a;display:flex;align-items:center;justify-content:center;gap:15px;color:#fff;font-weight:600}.user-profile-inner svg{width:27px;height:27px;fill:#fff}.logout{margin-top:3rem}@media (max-width: 768px){#footer{flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem;text-align:center}#footer div{width:100%;align-items:center}#footer div p,#footer div p a{font-size:1rem;padding-left:0}.flip-card{width:90%}}