.box-container{height:max-content;display:flex;justify-content:center;align-items:center;height:100vh;min-height:500px;width:100%;visibility:visible!important}.box{height:fit-content;background-color:hsl(var(--accent),3%,100%)}h2{font-weight:900}.buttons{padding:20px 0 0;display:flex;flex-direction:row!important;gap:10px}.buttons .input-inline{margin-bottom:10px;align-items:center;display:flex}.form{margin:20px 0}.form .input-area{width:100%;display:flex;align-items:center;justify-content:space-between}label{min-width:fit-content;margin-right:10px}input[type=text],input[type=password]{width:75%;margin:5px 0;color:hsl(var(--accent),12%,10%);background-color:hsl(var(--accent),12%,90%)}.container{margin-bottom:10px;display:flex;flex-direction:column-reverse;gap:30px;justify-content:center}.import-svg-1{padding:10px;width:100px}.menu-main-container{height:100%;max-height:800px;padding:20px;display:flex;flex-wrap:nowrap}menu{height:fit-content;background:hsl(var(--accent),0%,100%);border-radius:10px;margin:0;padding:20px 20px 10px}menu h1{font-weight:400;font-size:1.5rem}menu p,.write-main header h3{color:#383838}menu h3{font-size:.95rem;font-weight:400}menu div{padding-top:20px}menu .sync-button{position:relative;padding-top:0}menu .sync-options{z-index:102;background:hsl(var(--accent),10%,100%);border:1px solid hsl(var(--accent),12%,80%);color:#fff;width:100%;padding:0 10px 90px;border-radius:10px;position:absolute;top:100%;display:flex;flex-direction:column}menu .s3-box{height:100%;background:hsl(var(--accent),30%,80%,80%);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:103;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}menu .sync-options button{margin:10px 0;width:100%;max-width:none}menu .flex-buttons{min-width:200px;display:flex;flex-direction:column;gap:5px}menu hr{background-color:hsl(var(--accent),12%,80%);height:1px;border:0;width:100%}menu ul{list-style-type:none;padding:0;margin:0}menu ul li{transition:.3s ease;margin:10px 0;width:100%;padding:5px 20px 5px 10px;background-color:hsl(var(--accent),100%,90%);border-radius:10px;cursor:pointer}menu ul li.active,menu ul li:hover{background-color:hsl(var(--accent),60%,80%)}menu ul li a{text-decoration:none}button{max-width:fit-content;color:#000;padding:0 9px;border-radius:10px;transition:.3s ease;background-color:hsl(var(--accent),12%,90%);cursor:pointer;border:0}button:enabled:hover{background-color:hsl(var(--accent),12%,80%)}button:disabled{color:#b3b3b3}button:active{outline:0px solid transparent}.write-main{background:hsl(var(--accent),0%,100%);overflow-y:auto;padding:0 20px;margin:0 20px;border-radius:10px;width:100%}.write-main .flex{display:flex;justify-content:space-between;align-items:center}.write-main .error{padding:20px;text-align:center;color:#900;background-color:#f2d9d9;border-radius:10px}.write-main img{align-self:flex-end;margin:20px 20px 0;width:auto;max-width:20%}.write-main header{width:auto;margin:20px 0}.write-main header h1{font-size:1.75rem;margin-bottom:10px}.write-main .bottom{margin-bottom:20px}.write-main .items{display:flex;flex-direction:column;gap:10px}.write-main .item{padding:10px;border-radius:10px;cursor:pointer;background-color:hsl(var(--accent),0%,93%);width:100%}.write-main .item span.date{color:hsl(var(--accent),0%,13%);font-weight:500}.write-main .item span.date:before{content:"Date: ";color:hsl(var(--accent),0%,63%);font-weight:400}.write-main .bottom button{padding:2px 22px;margin-right:10px;margin-top:30px}.write-main .bottom span{color:#878787}textarea{background-color:#e2e6e9;border:0;padding:10px;border-radius:10px;width:100%;height:300px;resize:none}textarea:focus{outline:0px solid transparent}@media screen and (max-width: 700px){.menu-main-container{flex-direction:column;padding:20px 0}menu{width:100%}.write-main{margin:10px 0}.write-main header h1{font-size:1.5rem;font-weight:500}.write-main img{width:100px;opacity:.4;float:right}}.box-container{visibility:hidden;display:flex;justify-content:center;justify-items:center;height:100vh;min-height:500px;width:100%;padding:0;margin:0}.box{border:0;max-width:700px;padding:20px;border-radius:10px}@media screen and (max-width: 600px){.box{width:100%}}.image{width:50%;max-width:150px;margin-bottom:30px}h2{font-weight:500}p{padding-top:10px}.buttons{padding:20px 0 0;display:flex;flex-direction:column;gap:10px}.buttons form{width:100%;max-width:400px}@media screen and (max-width: 400px){.buttons .submit-area{flex-direction:column}}.buttons button,input{border-radius:10px;transition:.3s ease;background-color:hsl(var(--accent),12%,90%);padding:3px 10px;border:0}.buttons .input-inline{width:100%;margin-bottom:10px;align-items:center;display:flex}.buttons .input-inline svg{padding:0;margin:0;transform:translateY(25%)}.buttons .error{padding:0 5px;color:#a45151}.buttons .submit-area{display:flex;align-items:center;gap:10px}.buttons button.eye{padding:3px 5px;margin-left:5px;transition:.1s ease;background-color:transparent}.buttons input{width:100%;color:hsl(var(--accent),12%,10%);background-color:hsl(var(--accent),12%,90%)}.buttons .button:enabled:hover{cursor:pointer;background-color:hsl(var(--accent),12%,80%)}.buttons button .spinning{font-size:.8rem;margin-top:.3px;margin-left:5px}.container{margin-bottom:10px;display:flex;gap:30px;justify-content:space-between}@media screen and (max-width: 600px){.box{max-width:100%}.buttons{flex-direction:column}.container{flex-direction:column-reverse}}.main-container{max-width:500px;margin:20px auto;height:100vh;display:flex;justify-content:center;align-items:center}.main-container .notice{background-color:#fff;border-radius:10px;padding:20px}.main-container img{width:20%;min-width:100px;margin-bottom:50px}.main-container h1{font-size:1.5rem;margin-bottom:20px;font-weight:500}.main-container h3{font-size:1.05rem;color:#494949}