*{padding:0;margin:0;box-sizing:border-box}html{font-family:Montserrat,sans-serif;width:100%}html,body{height:100%!important;margin:0;padding:0;overflow-x:hidden}body{width:100%}#root{width:100%;min-height:100vh;background:#464646}#main{position:relative;min-height:100vh;width:100%;display:flex;flex-direction:column}header{display:flex;align-items:center;justify-content:center;padding:10px 32px;box-shadow:0 0 10px #0000004d;position:sticky;top:0;z-index:10;justify-content:space-between;height:12vh;width:100%}header img{width:50px;height:50px;margin-left:20px}header i{font-size:24px}header h1{color:#fff;font-family:McLaren,cursive;font-weight:200;justify-self:flex-start;padding-right:100px}#notes{width:100%;padding-bottom:2.5rem;display:flex;justify-content:center;flex-wrap:wrap}footer{position:absolute;text-align:center;bottom:0;width:100%;height:2.5rem}footer p{left:50%;color:#dbd3d3;max-width:50%;position:absolute}.note{background:#fff;border-radius:7px;box-shadow:0 2px 5px #ccc;padding:10px;margin:16px;width:27%;float:left;display:flex;flex-direction:column;height:fit-content}.note h1{font-size:1.1em;margin-bottom:6px;word-wrap:break-word;max-width:100%}.note p{font-size:1.1em;margin-bottom:10px;white-space:pre-wrap;word-wrap:break-word;max-width:100%}.note button{border:none;font-size:.7rem;text-align:end;background:#0000;width:10%;align-self:flex-end;cursor:pointer}form.create-note{position:relative;width:50%;margin:30px auto 20px;background:#fff;padding:15px;border-radius:7px;box-shadow:0 1px 5px #8a8989}form.create-note input,form.create-note textarea{width:100%;border:none;padding:4px;outline:none;font-size:1.2em;font-family:inherit;resize:none}form.create-note button{position:absolute;right:18px;bottom:-18px;background:#f5ba13;color:#fff;border:none;border-radius:50%;width:36px;height:36px;box-shadow:0 1px 3px #0000004d;cursor:pointer;outline:none;text-align:center}.search{width:50%;height:100%}.search .input{width:100%;height:100%}.profile{width:15%;height:100%;display:flex;justify-content:center;align-items:center}.profile-data{display:flex;padding:0;margin:0;justify-content:space-between;align-items:center;gap:5px}.profile-data img{padding:0;margin:0;border-radius:50%}.profile-data p{overflow:hidden;font-weight:800}.css-1ihob1g-MuiButtonBase-root-MuiButton-root:hover{background-color:red}.login{width:100%;height:100%;font-size:30px;font-weight:900}.login-form-box{width:50%;height:70%;display:flex;flex-direction:column;align-items:center;align-self:center;position:absolute;top:15%;color:#fff;padding:20px 0;background-color:#ffc82f;gap:10px;border-radius:25px}.login-form-box>button{color:#fff;background:none;border:none;cursor:pointer}.login-form{display:flex;flex-direction:column;width:80%;font-size:20px;gap:10px}.login-form input{font-size:20px;border:none;outline:none;background:none;border-bottom:1px #ffffff solid;color:#fff}.login-form button{font-size:20px;color:#fff;box-shadow:0 3px 6px #0003;border-radius:25px;border:2px solid rgb(255,255,255);height:40px;cursor:pointer}.login-form button:active{background-color:#cccccc80}@media only screen and (max-width: 500px){form.create-note{width:90%}header h1{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-weight:300}header img{width:50px;height:50px;margin-left:-31px}.search,.profile-data p{display:none}.profile{height:100%;align-items:center;padding:10px}footer p{left:36%}}