.zotero-container{margin-top:30vw}.zetero-post{margin-top:2vw}@keyframes animate{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}section span{position:relative;display:block;width:calc(6.25vw - 2px);height:calc(6.25vw - 2px);background:#fff;z-index:2;transition:1.5s}section span:hover{background:#00464d;transition:0s}section .signin{position:absolute;width:70vw;height:65vw;background:#2525258c;z-index:1000;display:flex;justify-content:center;align-items:center;padding:40px;border-radius:4px;box-shadow:0 15px 35px #000}.contentsection{position:absolute;width:40vw;background:#2525258c;z-index:1000;display:flex;justify-content:center;align-items:center;padding:40px;border-radius:4px;box-shadow:0 15px 35px #000;margin-right:30vw}section .signin .content{position:relative;width:100%;display:flex;gap:5vh;flex-direction:column;align-items:center;margin-top:-5vw;align-items:flex-start}section .signin .zotero-content{position:relative;width:100%;display:flex;gap:40px;flex-direction:column;align-items:center}section .signin .content h4{font-size:1em;color:#bcbcbc}.zeteroLink{font-size:1em;color:#000;margin-left:.5vw}section .signin .content .form{width:100%;display:flex;flex-direction:column;gap:25px}section .signin .content .form .inputBox{position:relative;width:100%}section .signin .content .form .inputBox input{position:relative;width:100%;background:#333;border:none;outline:none;padding:25px 10px 7.5px;border-radius:4px;color:#fff;font-weight:500;font-size:1em}section .signin .content .form .inputBox i{position:absolute;left:0;padding:15px 10px;font-style:normal;color:#aaa;transition:.5s;pointer-events:none}.signin .content .form .inputBox input:focus~i,.signin .content .form .inputBox input:valid~i{transform:translateY(-7.5px);font-size:.8em;color:#fff}.signin .content .form .links{position:relative;width:100%;display:flex;justify-content:space-between}.signin .content .form .links a{color:#fff;text-decoration:none}.signin .content .form .links a:nth-child(2){color:#00464d;font-weight:600}.signin .content .form .inputBox input[type=submit]{padding:10px;background:#00464d;color:#fefefe;font-weight:600;font-size:1.35em;letter-spacing:.05em;cursor:pointer}input[type=submit]:active{opacity:.6}@media (max-width: 900px){section span{width:calc(10vw - 2px);height:calc(10vw - 2px)}}@media (max-width: 600px){section span{width:calc(20vw - 2px);height:calc(20vw - 2px)}}.header{margin-left:-8vw;margin-top:1vw}.sidebar{position:absolute;width:20vw;height:100vh;display:flex;justify-content:flex-start;gap:10px;flex-wrap:nowrap;overflow:hidden;background:#8888888c;align-content:flex-start;flex-direction:column;align-items:center;margin-left:-1vw}.sidebar-button{display:block;width:15vw;padding:10px;background-color:#f0f0f0;border:1px solid #ddd;border-radius:4px;text-align:center;margin-top:2vw}.sidebar-button:hover{background-color:#56c2eb}.sidebar-button:last-child{margin-right:0}.flex-container{display:flex;flex-direction:column;align-items:start;gap:0}.profile-header{height:5vw;width:80vw}.usage-bar-container{width:100%;background-color:#ddd;border-radius:5px;overflow:hidden;position:relative;height:40px;z-index:5}.usage-bar{height:100%;background-color:#1072b8;border-radius:5px;position:relative;display:flex;align-items:center;transition:width .5s ease-in-out}.usage-percentage{color:#fff;margin-left:10px;font-size:1.2em}.usage-text{margin-top:10px;font-size:1.2em;text-align:center}.zoteroinfo{position:absolute;width:40vw;background:#222;z-index:1000;display:flex;justify-content:center;align-items:center;padding:40px;border-radius:4px;box-shadow:0 15px 35px #000}.zotero-container{display:flex;align-items:stretch;gap:20px;margin-top:5vw;justify-content:center;flex-direction:column;flex-wrap:nowrap;justify-content:flex-end;align-content:center;height:20vw;width:35vw}.user-profile{background:#222;padding:20px;border-radius:4px;box-shadow:0 15px 35px #000000e6;color:#fff;width:90%}.note1 .h3{width:100%;background:#222;padding:20px;border-radius:4px;box-shadow:0 15px 35px #000000e6;color:#fff;margin-top:40vw;margin-left:40vw}@media (max-width: 768px){.zotero-container{flex-direction:column;align-items:center}.user-profile,.zotero-signin{width:90%}}.zotero-signin{background:#b0b0b0;padding:20px;border-radius:4px;box-shadow:0 15px 35px #000000e6;color:#fff;width:90%}.flex-container{display:flex;flex-direction:row}.content-area{flex-grow:1;padding:20px;margin-left:25vw;margin-top:4vw}.mx-0{margin-left:-1.4vw;margin-right:-1.4vw}.py-8{padding-top:0}