*{margin:0;padding:0}: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%}nav{display:flex;justify-content:space-between;padding:10px 100px;margin-bottom:50px}nav div{display:flex;gap:30px;align-items:center}nav div a{color:#fff;font-size:1.2rem;font-family:Hack,monospace}.logout-btn{font-family:Hack,monospace;cursor:pointer;font-size:1em;background-color:transparent;border:0;transition:all .2s;border-radius:10px;color:#b93f3f}html{background:linear-gradient(#141e30,#243b55)}body{margin:0 auto;max-width:1920px;min-height:100vh;font-family:sans-serif}.card-container{max-width:320px;color:#fff;background-color:#1a1b21;border-radius:10px 10px 0 0;margin:auto}.card-container img{width:100%;height:250px;border-radius:10px 10px 0 0;object-fit:cover}.card-container h1{font-size:20px;text-align:center;margin-top:10px}.card-container h4{color:#f3bf99;font-weight:200;text-align:center}.card-container a{font-size:14px;text-align:center;font-weight:200;display:flex;justify-content:center;color:#fff}.card-container .buttons{display:flex;justify-content:center;gap:15px;margin-top:10px}.card-container a{padding:5px 15px;border:0;border-radius:2px}.card-container .email{background-color:#fff;font-size:14px;color:#374151}.card-container .linkedin{background-color:#5093e2;color:#fff}.card-container .info{padding:0 20px}.card-container .info h2{margin-top:15px;font-weight:600;font-size:19px}.card-container .info p{font-size:12px;font-weight:200}.card-container footer{display:flex;justify-content:space-around;background-color:#161619;padding:20px 40px;margin-top:24px}.card-container footer img{height:25px;width:25px;border-radius:20px}.createCard .container{display:grid;grid-template-columns:repeat(2,1fr);max-width:1920px;margin:0 10%}.createCard .form{display:flex;flex-direction:column;gap:20px;height:100%;align-items:center}.createCard #textarea{resize:vertical;padding:5px 10px;border:0;border-radius:2px;font-size:1rem;max-width:400px;width:100%}.createCard .submit{padding:15px 20px;font-size:1rem}.createCard .form input{padding:10px;border:0;border-radius:2px;font-size:1rem;max-width:400px;width:100%}.createCard .card-container{max-width:320px;color:#fff;background-color:#1a1b21;border-radius:10px 10px 0 0;margin:auto}.createCard .card-container img{width:100%;height:250px;border-radius:10px 10px 0 0;object-fit:cover}.createCard .card-container h1{font-size:20px;text-align:center;margin-top:10px}.createCard .card-container h4{color:#f3bf99;font-weight:200;text-align:center}.createCard .card-container a{font-size:14px;text-align:center;font-weight:200;display:flex;justify-content:center;color:#fff}.createCard .card-container .buttons{display:flex;justify-content:center;gap:15px;margin-top:10px}.createCard .card-container button{padding:5px 15px;border:0;border-radius:2px}.createCard .card-container .email{background-color:#fff;font-size:14px;color:#374151}.createCard .card-container .linkedin{background-color:#5093e2;color:#fff}.createCard .card-container .info{padding:0 20px}.createCard .card-container .info h2{margin-top:15px;font-weight:600;font-size:19px}.createCard .card-container .info p{font-size:12px;font-weight:200}.createCard .card-container footer{display:flex;justify-content:space-around;background-color:#161619;padding:20px 40px;margin-top:24px}.createCard .card-container footer img{height:25px;width:25px;border-radius:20px}.createCard h1{text-align:center}@media screen and (max-width: 768px){.createCard .container{grid-template-columns:1fr;gap:50px}.createCard .card-container{order:-1}}.index{display:flex;align-items:center}.index .errorMessage{text-align:center;color:#b93f3f}.index .none{display:none}.index .block{display:block}.index .login-box{margin-bottom:20px;width:400px;padding:40px;background:rgba(0,0,0,.5);box-sizing:border-box;box-shadow:0 15px 25px #0009;border-radius:10px}.index .button-container{display:flex;justify-content:space-between}.index .login-box h2{margin:0 0 30px;padding:0;color:#fff;text-align:center}.index .login-box .user-box{position:relative}.index .login-box .user-box input{width:100%;padding:10px 0;font-size:16px;color:#fff;margin-bottom:30px;border:none;border-bottom:1px solid #fff;outline:none;background:transparent}.index .login-box .user-box label{position:absolute;top:0;left:0;padding:10px 0;font-size:16px;color:#fff;pointer-events:none;transition:.5s}.index .login-box .user-box input:focus~label,.index .login-box .user-box input:valid~label{top:-20px;left:0;color:#03e9f4;font-size:12px}.index .login-box form button{position:relative;display:inline-block;padding:10px 20px;color:#03e9f4;font-size:16px;text-decoration:none;text-transform:uppercase;overflow:hidden;transition:.5s;margin-top:40px;letter-spacing:4px}.index .login-box form .registerBtn{color:#ff00ea}.index .login-box button:hover{background:#03e9f4;color:#fff;border-radius:5px;box-shadow:0 0 5px #03e9f4,0 0 25px #03e9f4,0 0 50px #03e9f4,0 0 100px #03e9f4}.index .login-box .registerBtn:hover{background:#ff00ea;color:#fff;border-radius:5px;box-shadow:0 0 5px #ff00ea,0 0 25px #ff00ea,0 0 50px #ff00ea,0 0 100px #ff00ea}.index .login-box button span{position:absolute;display:block}.index .login-box button span:nth-child(1){top:0;left:-100%;width:100%;height:2px;background:linear-gradient(90deg,transparent,#03a7af);animation:btn-anim1 2s linear infinite}.index .login-box .registerBtn span:nth-child(1),.index .login-box .registerBtn span:nth-child(2),.index .login-box .registerBtn span:nth-child(3),.index .login-box .registerBtn span:nth-child(4){background:linear-gradient(90deg,transparent,#ff00ea)}@keyframes btn-anim1{0%{left:-100%}50%,to{left:100%}}.index .login-box button span:nth-child(2){top:-100%;right:0;width:2px;height:100%;background:linear-gradient(180deg,transparent,#03a7af);animation:btn-anim2 2s linear infinite;animation-delay:.25s}@keyframes btn-anim2{0%{top:-100%}50%,to{top:100%}}.index .login-box button span:nth-child(3){bottom:0;right:-100%;width:100%;height:2px;background:linear-gradient(270deg,transparent,#026469);animation:btn-anim3 2s linear infinite;animation-delay:.5s}.index button{border:none;border-radius:2px;background-color:transparent}@keyframes btn-anim3{0%{right:-100%}50%,to{right:100%}}.index .login-box button span:nth-child(4){bottom:-100%;left:0;width:2px;height:100%;background:linear-gradient(360deg,transparent,#003235);animation:btn-anim4 2s linear infinite;animation-delay:.75s}@keyframes btn-anim4{0%{bottom:-100%}50%,to{bottom:100%}}
