*{margin:0;padding:0;box-sizing:border-box}#App{padding-top:3rem;margin-bottom:0rem;justify-content:space-around;width:100vw;height:100vh;background-color:#180a34;background-image:repeating-linear-gradient(to bottom right,#180a34 51%,#000 51.8%);color:#fff;display:grid;grid-template-areas:"head head" "btn nlist" "foot foot";grid-template-columns:1fr 1fr;grid-template-rows:10fr 30fr 1fr}#footer{grid-area:foot;display:flex;justify-content:center;margin-top:1rem;padding:1rem 1rem .4rem;background-color:#00004d}#main-head{grid-area:head;display:flex;justify-content:center;margin:0rem 5rem 5rem;align-items:center;font-family:Montserrat Underline,sans-serif;font-optical-sizing:auto;font-weight:600;font-size:4rem;font-style:normal;text-shadow:0px 0px 6px white}#add-button-div{display:flex;justify-content:center;height:100%;width:100%;grid-area:btn}#add-button{background-image:linear-gradient(to bottom right,#1a1acf,#eb16d5);color:#000;text-decoration:double;font-family:Encode Sans Expanded,sans-serif;font-size:.8rem;box-shadow:2px 2p;height:12rem;width:12rem;border-radius:20px}#add-button:hover{cursor:pointer}.note-list{overflow:scroll;grid-area:nlist;height:100%;width:100%;border:2px solid rgb(64,64,64);border-radius:10px;overflow-x:hidden;padding:6px;margin-right:1;padding-left:1.4rem}#noteless{height:100%;width:100%;display:flex;justify-content:center;align-items:center;color:#9e9e9e;margin-bottom:2px}#note-form{height:40%;width:90%;padding:1rem;border-radius:5px}#title-input{width:100%;background-color:#1d34cca6;height:30%;padding:.4rem;border:2px solid rgba(255,255,255,.69)}#text-input{width:100%;background-color:#c321c3d4;padding:.4rem;border:2px solid rgba(255,255,255,.69)}#title-input::placeholder{color:#000;font-size:larger;opacity:1}#text-input::placeholder{color:#000;font-size:larger;opacity:1}#buttons{display:flex;justify-content:space-between;height:20%}#Save{width:5rem;justify-self:center;background-image:linear-gradient(to bottom right,#008900 40%,#fff 120%);color:#fff;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;font-size:medium;box-shadow:0 0 4px #014e01}#Cancel{width:5rem;background-image:linear-gradient(to bottom right,#930404 40%,#fff 120%);color:#fff;font-size:medium;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;box-shadow:0 0 4px #470101}@media screen and (max-width: 500px){#App{display:flex;flex-direction:column;align-items:center;min-height:100vh;width:100vw;overflow-y:auto;padding:1rem;gap:1rem}#main-head{font-size:2.5rem;margin:2rem 0 1rem;text-align:center}#add-button-div{width:100%;justify-content:center;margin-bottom:1rem}#add-button{width:60vw;height:10rem;font-size:1rem}.note-list{width:95vw;height:200%;margin:0}#note-form{width:100%;padding:.5rem}#title-input,#text-input{font-size:1rem;height:auto}#footer{padding:.5rem;font-size:.8rem;text-align:center;flex-wrap:wrap}}#Note{border:5px solid rgb(105,105,199);border-radius:3rem;padding:1rem;margin:5px;height:100%;width:90%;display:block;background-image:linear-gradient(to bottom right,#3838c4 10%,#a424a9 60%)}#heading{font-family:Lexend Peta,sans-serif;font-optical-sizing:auto;font-weight:500;font-style:normal;font-size:x-large;border-bottom:2px solid rgb(0,0,0);display:flex;justify-content:space-between}#note-box{height:85%;width:100%;display:flex;flex-direction:column;padding:.5rem;box-sizing:border-box}#first{flex:first;display:grid;height:100%;width:100%;grid-template-rows:88% 12%;box-sizing:border-box}#editing-text-area{height:100%;width:100%;background-color:#fff0;font-family:Encode Sans Expanded,sans-serif;font-weight:400;font-style:normal;box-sizing:border-box;color:#00420d;padding:.5rem}textarea{height:100%;width:100%;overflow:scroll;overflow-x:hidden;overflow-y:auto;border:none;resize:none}#second{flex:first;display:grid;height:100%;width:100%;grid-template-rows:88% 12%;box-sizing:border-box}#text-area{padding:.2rem;margin:.5rem;height:90%;width:100%;overflow:scroll;overflow-x:hidden;overflow-y:auto;border:none;resize:none;font-family:Encode Sans Expanded,sans-serif;font-weight:400;font-style:normal;box-sizing:border-box}#savebtn{width:20%;height:20px;justify-self:center;background-image:linear-gradient(to bottom right,#008900 40%,#fff 120%);color:#fff;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;box-shadow:0 0 4px #014e01}#editbtn{width:20%;height:20px;background-image:linear-gradient(to bottom right,#930404 40%,#fff 120%);color:#fff;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;box-shadow:0 0 4px #470101}#downbtn{width:30%;height:20px;background-image:linear-gradient(to bottom right,#616161 40%,#fff 120%);color:#fff;font-family:Gill Sans,Gill Sans MT,Calibri,Trebuchet MS,sans-serif;box-shadow:0 0 4px #470101}#inner{display:flex;justify-content:space-between}