*{margin:0;padding:0}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.content{width:100%}.screen{display:flex}.sidebar{width:14rem;height:calc(100vh -52px);border-right:1px solid gray}.sidebar ul{list-style:none;padding:1rem 2rem}.sidebar ul li{margin-bottom:1rem}.sidebar ul li a{text-decoration:none}.container{display:flex;flex-direction:column;min-height:100vh;position:relative}.current{flex-grow:1;padding:20px;margin-left:5%}.footer{bottom:0;width:100%;background-color:#fff;padding:10px 0}@media screen and (max-width: 768px){.footer{width:50%;margin-left:5%}}.header{width:100%;background:#696969;background:linear-gradient(90deg,#696969 37%,#b1b0b0 72%);z-index:100;position:fixed;margin-left:-5%;margin-top:-3%;height:80px;display:flex;align-items:center;justify-content:center;border-radius:50px}.header-content{margin-top:0%}.tooltip-container{position:relative;background:transparent;cursor:pointer;transition:all .2s;font-size:48px;padding:14px;border-radius:5px;text-align:center;display:flex;align-items:center;justify-content:center;font-weight:800;color:#372020}.tooltip-container span:last-child{display:flex;justify-content:center}.tooltip-container span:last-child img{width:10%}.tooltip-1,.tooltip-2,.tooltip-3{position:absolute;transform:translate(-50%);font-weight:800;opacity:0;pointer-events:none;transition:all .3s;border-radius:8px;background:#807f7b;box-shadow:1px 2px 3px #0000009e,inset 0 -2px 3px #0000007a,inset 1px 1px 4px #fff,#32325d40 0 13px 27px -5px,#0000004d 0 8px 16px -8px;min-width:180px;padding:8px;color:#4e2d38;font-size:11px}.tooltip-1{top:auto;left:25%;width:200px}.tooltip-2{left:100%}.tooltip-3{left:0}.tooltip-container:hover .tooltip-1{top:-100%;opacity:1;visibility:visible;pointer-events:auto}.tooltip-container:hover .tooltip-2{left:-100%;opacity:1;visibility:visible;pointer-events:auto}.tooltip-container:hover .tooltip-3{left:200%;opacity:1;visibility:visible;pointer-events:auto}@media screen and (max-width: 768px){.header{width:100%;height:40px}.header-content{flex-direction:column;align-items:flex-start}.tooltip-container.show{display:none}.tooltip-container{display:block;margin-bottom:10px}.tooltip-container{margin-top:5%}.tooltip-container span:last-child{display:flex;font-size:25px;justify-content:center;align-content:center}.tooltip-container span:last-child img{width:40px}}.sidebar{width:200px;height:100%;background-color:#333;position:fixed;left:0;top:0;overflow-y:auto;transition:width .3s ease;border:none;margin-top:5%}.sidebar ul{list-style:none;padding:0;margin:0}.sidebar ul li{padding:10px}.sidebar ul li a{color:#fff;text-decoration:none;display:flex;justify-content:space-around;align-items:center;padding:5px 10px;border-radius:10px}.sidebar ul li:last-child{margin-top:150%}.sidebar ul li:last-child img{width:100%}.sidebar ul li a:hover{background-color:#555;border-radius:10px}.login-message{color:#fff;padding:20px}.home-link{background-color:#f0f0f0;color:#333!important;border-radius:10px}.post-link{background-color:#e6f7ff;color:#000!important;border-radius:10px}.user-link{background-color:#f9f9f9;color:#000!important;border-radius:10px}a{transition:background-color .5s ease}@media only screen and (max-width: 768px){.sidebar{width:60px;margin-top:10%;display:flex;align-content:center}.sidebar.active{width:150px}.sidebar ul li a,.login-message{padding:10px}.icon{margin-right:5px}.text{display:none}}ul{list-style:none}.example-2{display:flex;justify-content:center;align-items:center}.example-2 .icon-content{margin:0 10px;position:relative}.example-2 .icon-content .tooltip{position:absolute;top:-30px;left:50%;transform:translate(-50%);color:#fff;padding:6px 10px;border-radius:5px;opacity:0;visibility:hidden;font-size:14px;transition:all .3s ease}.example-2 .icon-content:hover .tooltip{opacity:1;visibility:visible;top:-50px}.example-2 .icon-content a{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;color:#4d4d4d;background-color:#fff;transition:all .3s ease-in-out}.example-2 .icon-content a:hover{box-shadow:3px 2px 45px #0000001f}.example-2 .icon-content a svg{position:relative;z-index:1;width:30px;height:30px}.example-2 .icon-content a:hover{color:#fff}.example-2 .icon-content a .filled{position:absolute;top:auto;bottom:0;left:0;width:100%;height:0;background-color:#000;transition:all .3s ease-in-out}.example-2 .icon-content a:hover .filled{height:100%}.example-2 .icon-content a[data-social=linkedin] .filled,.example-2 .icon-content a[data-social=linkedin]~.tooltip{background-color:#0274b3}.example-2 .icon-content a[data-social=github] .filled,.example-2 .icon-content a[data-social=github]~.tooltip{background-color:#24262a}.example-2 .icon-content a[data-social=instagram] .filled,.example-2 .icon-content a[data-social=instagram]~.tooltip{background:linear-gradient(45deg,#405de6,#5b51db,#b33ab4,#c135b4,#e1306c,#fd1f1f)}.example-2 .icon-content a[data-social=spotify] .filled,.example-2 .icon-content a[data-social=spotify]~.tooltip{background-color:#1db954}@media screen and (max-width: 768px){.footet2{width:50%;margin-left:5%}}.wheel-and-hamster{--dur: 1s;position:absolute;top:40%;left:60%;transform:translate(-50%,-50%);width:12em;height:12em;font-size:14px}.wheel,.hamster,.hamster div,.spoke{position:absolute}.wheel,.spoke{border-radius:50%;top:0;left:0;width:100%;height:100%}.wheel{background:radial-gradient(100% 100% at center,#9990 47.8%,#999 48%);z-index:2}.hamster{animation:hamster var(--dur) ease-in-out infinite;top:50%;left:calc(50% - 3.5em);width:7em;height:3.75em;transform:rotate(4deg) translate(-.8em,1.85em);transform-origin:50% 0;z-index:1}.hamster__head{animation:hamsterHead var(--dur) ease-in-out infinite;background:#f48c25;border-radius:70% 30% 0 100%/40% 25% 25% 60%;box-shadow:0 -.25em #facc9e inset,.75em -1.55em #fce6cf inset;top:0;left:-2em;width:2.75em;height:2.5em;transform-origin:100% 50%}.hamster__ear{animation:hamsterEar var(--dur) ease-in-out infinite;background:#fbb6b6;border-radius:50%;box-shadow:-.25em 0 #f48c25 inset;top:-.25em;right:-.25em;width:.75em;height:.75em;transform-origin:50% 75%}.hamster__eye{animation:hamsterEye var(--dur) linear infinite;background-color:#000;border-radius:50%;top:.375em;left:1.25em;width:.5em;height:.5em}.hamster__nose{background:#f98686;border-radius:35% 65% 85% 15%/70% 50% 50% 30%;top:.75em;left:0;width:.2em;height:.25em}.hamster__body{animation:hamsterBody var(--dur) ease-in-out infinite;background:#fce6cf;border-radius:50% 30%/15% 60% 40% 40%;box-shadow:.1em .75em #f48c25 inset,.15em -.5em #facc9e inset;top:.25em;left:2em;width:4.5em;height:3em;transform-origin:17% 50%;transform-style:preserve-3d}.hamster__limb--fr,.hamster__limb--fl{clip-path:polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);top:2em;left:.5em;width:1em;height:1.5em;transform-origin:50% 0}.hamster__limb--fr{animation:hamsterFRLimb var(--dur) linear infinite;background:linear-gradient(#facc9e 80%,#f98686 80%);transform:rotate(15deg) translateZ(-1px)}.hamster__limb--fl{animation:hamsterFLLimb var(--dur) linear infinite;background:linear-gradient(#fce6cf 80%,#fbb6b6 80%);transform:rotate(15deg)}.hamster__limb--br,.hamster__limb--bl{border-radius:.75em .75em 0 0;clip-path:polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);top:1em;left:2.8em;width:1.5em;height:2.5em;transform-origin:50% 30%}.hamster__limb--br{animation:hamsterBRLimb var(--dur) linear infinite;background:linear-gradient(#facc9e 90%,#f98686 90%);transform:rotate(-25deg) translateZ(-1px)}.hamster__limb--bl{animation:hamsterBLLimb var(--dur) linear infinite;background:linear-gradient(#fce6cf 90%,#fbb6b6 90%);transform:rotate(-25deg)}.hamster__tail{animation:hamsterTail var(--dur) linear infinite;background:#fbb6b6;border-radius:.25em 50% 50% .25em;box-shadow:0 -.2em #f98686 inset;top:1.5em;right:-.5em;width:1em;height:.5em;transform:rotate(30deg) translateZ(-1px);transform-origin:.25em .25em}.spoke{animation:spoke var(--dur) linear infinite;background:radial-gradient(100% 100% at center,#999 4.8%,#9990 5%),linear-gradient(#8c8c8c00 46.9%,#a6a6a6 47%,#a6a6a6 52.9%,#a6a6a600 53%) 50% 50% / 99% 99% no-repeat}@keyframes hamster{0%,to{transform:rotate(4deg) translate(-.8em,1.85em)}50%{transform:rotate(0) translate(-.8em,1.85em)}}@keyframes hamsterHead{0%,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(8deg)}}@keyframes hamsterEye{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(0)}}@keyframes hamsterEar{0%,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(12deg)}}@keyframes hamsterBody{0%,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-2deg)}}@keyframes hamsterFRLimb{0%,25%,50%,75%,to{transform:rotate(50deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-30deg) translateZ(-1px)}}@keyframes hamsterFLLimb{0%,25%,50%,75%,to{transform:rotate(-30deg)}12.5%,37.5%,62.5%,87.5%{transform:rotate(50deg)}}@keyframes hamsterBRLimb{0%,25%,50%,75%,to{transform:rotate(-60deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(20deg) translateZ(-1px)}}@keyframes hamsterBLLimb{0%,25%,50%,75%,to{transform:rotate(20deg)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-60deg)}}@keyframes hamsterTail{0%,25%,50%,75%,to{transform:rotate(30deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(10deg) translateZ(-1px)}}@keyframes spoke{0%{transform:rotate(0)}to{transform:rotate(-1turn)}}.post-item{padding:10px;margin-bottom:10px;width:50%;display:flex;align-items:center;flex-direction:column}.post-item h2{margin-bottom:5px}.card{width:50%;height:450px;border:1px solid #ccc;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;perspective:1000px;box-shadow:0 0 0 5px #ffffff80;transition:all .6s cubic-bezier(.175,.885,.32,1.275)}.card svg{width:100%;fill:#fff;transition:all .6s cubic-bezier(.175,.885,.32,1.275)}.card svg text{font-size:2.2px;font-family:Courier New,Courier,monospace}.card svg text:last-child{font-size:.8px;font-family:Verdana,Geneva,Tahoma,sans-serif}.card:hover{transform:scale(1.05);box-shadow:0 8px 16px #fff3}.card__content{position:absolute;top:0;left:0;width:100%;height:100%;padding:20px;box-sizing:border-box;background-color:#f2f2f2;transform:rotateX(-90deg);transform-origin:bottom;transition:all .6s cubic-bezier(.175,.885,.32,1.275)}.card:hover .card__content{transform:rotateX(0)}.card__title{margin:-1%;font-size:50px;color:#fff;font-weight:700;font-family:Courier New,Courier,monospace}.card:hover svg{scale:0}.card__description{margin:10px 0 0;font-size:14px;color:#fff;line-height:1.4;font-family:Verdana,Geneva,Tahoma,sans-serif}.card__gender{margin:10px 0 0;font-size:14px;color:#fff;line-height:1.4;display:flex;justify-content:space-between}.card__gender span{background-color:#6f3676;padding:4px 8px;font-weight:600;text-transform:uppercase;font-size:12px;border-radius:50em;margin:10px}.card__gender-label{display:flex;gap:8px}.posts{display:flex;flex-direction:column;padding:20px;width:200%;margin-left:-45%;cursor:pointer}.posts>div{margin-bottom:20px}.post-item{background-color:#f0f0f0;border-radius:10px;padding:20px;transition:background-color .3s ease}.post-item:hover{background-color:#e0e0e0}.postdiv{display:flex;justify-content:center}.container{max-width:800px;margin:0 auto;padding:20px}.post-details{background-color:transparent;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a}.post-details h1{font-size:24px;margin-bottom:10px}.post-details p{font-size:16px;margin-bottom:20px}.post-details textarea{width:100%;padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:4px}.post-details button{background-color:#af4c4c;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;margin:10px}.post-details button:last-child{background-color:#4caf50;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;transition:background-color .3s ease;margin:10px}.post-details button:hover{background-color:#45a049}.order-button{padding:10px 20px;border:none;border-radius:4px;display:flex;margin-left:8%;cursor:pointer;transition:background-color .3s}.order-button:hover{background-color:#6f5252}.recent-button{background-color:#6c6c6c;color:#fff}.oldest-button{background-color:#fff;color:#000}.form-container{width:450px;background:linear-gradient(#212121,#212121) padding-box,linear-gradient(145deg,transparent 35%,#e81cff,#40c9ff) border-box;border:2px solid transparent;padding:50px;font-size:14px;font-family:inherit;color:#fff;display:flex;flex-direction:column;gap:20px;box-sizing:border-box;border-radius:16px;background-size:200% 100%;animation:gradient 5s ease infinite;margin-left:25%}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.form-container button:active{scale:.95}.form-container .form{display:flex;flex-direction:column;gap:20px}.form-container .form-group{display:flex;flex-direction:column}.form-container .form-group p{color:#717171;font-weight:600;font-size:12px;text-align:left}.form-container .form-group input,.form-container .form-group textarea{width:100%;padding:12px 16px;border-radius:8px;color:#fff;font-family:inherit;background-color:transparent;border:1px solid #414141}.form-container .form-group input::placeholder{opacity:.5}.form-container .form-group input:focus,.form-container .form-group textarea:focus{outline:none;border-color:#e81cff}.form-container .form-submit-btn{display:flex;align-items:center;justify-content:center;font-family:inherit;color:#717171;font-weight:600;width:40%;background:#313131;border:1px solid #414141;padding:12px 16px;font-size:inherit;gap:8px;margin-top:8px;cursor:pointer;border-radius:6px}.form-container .form-submit-btn:hover{background-color:#fff;border-color:#fff}@media screen and (max-width: 768px){.form-container{padding:10px;width:100%;margin-left:10%}.form-container .form-group input,.form-container .form-group textarea{padding:8px;font-size:12px;width:90%}.form-container .form-submit-btn{padding:10px;font-size:14px}}.profile-container{background-color:#1a1a1a;padding:20px;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin-left:25%;margin-top:50px}.profile-header{display:flex;flex-direction:column;justify-content:space-between;align-items:center;height:100%}.profile-name{color:#fff;font-size:24px;margin-bottom:10px;padding:10%}.logout-button{background-color:#333;color:#fff;border:none;padding:10px 20px;font-size:16px;border-radius:6px;cursor:pointer;margin-top:10%}.logout-button:hover{background-color:#555}.imageUser{font-size:40px}.login-container{max-width:400px;margin:0 auto;padding:20px;border:1px solid #ccc;border-radius:8px;box-shadow:0 0 10px #0000001a}.login-container h1{font-size:24px;text-align:center;margin-bottom:20px}.login-container form{display:flex;flex-direction:column}.login-container input[type=text],.login-container input[type=password]{padding:10px;margin-bottom:15px;border:1px solid #ccc;border-radius:5px;outline:none}.login-container input[type=text]:focus,.login-container input[type=password]:focus{border-color:#007bff}.login-container button[type=submit]{padding:10px;background-color:#007bff;color:#fff;border:none;border-radius:5px;cursor:pointer}.login-container button[type=submit]:hover{background-color:#0056b3}.login-container p{text-align:center;margin-top:20px}.login-container p a{color:#007bff;text-decoration:none}.login-container p a:hover{text-decoration:underline}.button{height:50px;width:100%;position:relative;background-color:transparent;cursor:pointer;border:2px solid #a2a4a4;overflow:hidden;border-radius:30px;color:#dcd5d5;transition:all .5s ease-in-out}.btn-txt{z-index:1;font-weight:800;letter-spacing:4px}.type1:after{content:"";position:absolute;left:0;top:0;transition:all .5s ease-in-out;background-color:#333;border-radius:30px;visibility:hidden;height:10px;width:10px;z-index:-1}.button:hover{box-shadow:1px 1px 200px #252525;color:#fff;border:none}.type1:hover:after{visibility:visible;transform:scale(100) translate(2px)}.group{position:relative}.input{font-size:16px;padding:10px 10px 10px 5px;display:block;width:200px;border:none;border-bottom:1px solid #515151;background:transparent}.input:focus{outline:none}label{color:#999;font-size:18px;font-weight:400;position:absolute;pointer-events:none;left:5px;top:10px;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.input:focus~label,.input:valid~label{top:-20px;font-size:14px;color:#5264ae}.bar{position:relative;display:block;width:200px}.bar:before,.bar:after{content:"";height:2px;width:0;bottom:1px;position:absolute;background:#5264ae;transition:.2s ease all;-moz-transition:.2s ease all;-webkit-transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.input:focus~.bar:before,.input:focus~.bar:after{width:50%}.highlight{position:absolute;height:60%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.input:focus~.highlight{animation:inputHighlighter .3s ease}@keyframes inputHighlighter{0%{background:#5264ae}to{width:0;background:transparent}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}