*{padding:0;margin:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:#fff}img{width:100%}.sour-gummy{font-family:Sour Gummy,sans-serif;font-optical-sizing:auto;font-weight:100;font-style:normal;font-variation-settings:"wdth" 100}.note-app{margin:15px;padding:16px}.note-app__header{display:flex;align-items:center;justify-content:center;padding:4px 32px;border-bottom:1px solid #d9d9d9}.note-app__header h1{margin:8px 0;flex:1;color:#000;font-family:Sour Gummy,sans-serif;font-weight:400;font-size:29px}.note-app__body h2{font-family:Sour Gummy,sans-serif;font-weight:400;margin:16px 0}.footer{font-family:Sour Gummy,sans-serif;font-size:18px;text-align:center;margin:30px 0}.note-app__body{max-width:1050px;margin:16px auto;padding:12px}.note-list{max-width:1050px;display:grid;gap:16px;grid-template-columns:1fr;margin-bottom:48px}.note-item{overflow:hidden;display:flex;height:100%;place-content:center}.note-item__content{border:1px solid rgb(185,185,185);background-color:#fff;padding:12px;position:relative;box-shadow:0 0 6px #0000001a;overflow:hidden;text-overflow:ellipsis;line-height:1.5;min-height:244.5px;min-width:244.5px;height:100%;width:100%;box-sizing:border-box}.read-more{color:#00f;cursor:pointer;text-decoration:underline;font-size:14px}.note-item__content:before,.note-item__content:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background-repeat:repeat}.note-item__content:before{background-image:linear-gradient(to bottom right,transparent 35%,rgba(125,125,125,.1) 50%,transparent 52%),linear-gradient(to top right,transparent 35%,rgba(125,125,125,.1) 50%,transparent 52%);background-size:100px 100px;z-index:0}.note-item__content:after{background-image:linear-gradient(to bottom,transparent 48%,rgba(125,125,125,.1) 50%,transparent 52%),linear-gradient(to right,transparent 48%,rgba(125,125,125,.1) 50%,transparent 52%);background-size:100px 100px;z-index:0}.note-item__image{border:1px solid rgb(255,255,255);position:relative;display:inline-block;height:100%}.note-item__image img{display:block;width:100%;height:100%;flex-grow:1}.note-item__image:hover:after{content:"Click to unfold";position:absolute;background-color:#000000bf;color:#fff;padding:5px;border-radius:5px;top:60%;left:50%;transform:translate(-50%);white-space:nowrap}.note-item__overlay-text{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;color:#000;background-color:#f5f5f5;padding:5px 10px;font-size:14px;z-index:1}.note-item__title{text-overflow:ellipsis;overflow:hidden;margin-bottom:4px}.note-item__date{font-size:12px;margin-bottom:8px;color:#464646}.note-item__body{font-family:Sour Gummy,sans-serif;font-size:15px}.note-item__action{margin-top:20px;margin-left:30px;margin-right:30px;display:flex;justify-content:space-between}.note-item__delete{padding:8px;font-size:12px;background-color:#000;color:#fff;border:0;cursor:pointer}.note-item__archive{padding:8px;font-size:12px;background-color:gray;color:#fff;border:0;cursor:pointer}.note-item__delete,.note-item__archive{display:block;width:100%;border:0;padding:8px 0;font-family:Inter,sans-serif;font-weight:700;cursor:pointer}.note-list__empty-message{text-align:center;color:#4a4a4a}input,textarea{padding:8px;margin:12px 0;font-family:Inter,sans-serif;background-color:transparent;color:#000;border:1px solid #d9d9d9;border-radius:4px;font-size:14px}.note-input{max-width:400px;margin:0 auto 32px;border:1px solid #d9d9d9;background-color:#fff;padding:12px}.dropdown{position:relative;margin-bottom:10px;border-radius:4px}.dropdown-menu{position:absolute;top:100%;left:0;background:#fff;z-index:100;max-width:420px;color:#000;overflow-y:auto}.dropdown-toggle{position:relative;padding-right:20px;cursor:pointer;background-color:#fff!important;color:#171717!important;border-radius:4px;display:inline-block;font-size:14px}.dropdown-toggle:after{content:"▼";position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:12px;color:#d9d9d9}.shape-options{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;position:relative;background-color:#fff;padding:10px;border:1px solid #ccc;z-index:10}.shape-options label{cursor:pointer;position:relative;display:flex;justify-content:center}.shape-img{width:60px;height:60px;border:1px solid transparent;transition:border-color .3s,transform .2s}.note-input__title__char-limit{font-size:14px;text-align:right;color:#000}.note-input input{display:block;width:100%;padding:8px;margin:8px 0;font-family:Inter,sans-serif;font-size:14px}.buttonsubmit{border-color:#171717!important}textarea{display:block;min-height:120px;width:100%;padding:8px;margin:12px 0;font-family:Inter,sans-serif;background-color:#fff;border:1px solid #d9d9d9;border-radius:4px;font-size:14px}.shape-options{display:flex;flex-wrap:wrap;gap:12px;align-items:center;place-content:center}.shape-options label{position:relative;cursor:pointer}.shape-options input[type=radio]{display:none}.shape-img{width:60px;height:60px;border:1px solid transparent;transition:transform .2s,border-color .3s}.shape-options input[type=radio]:checked+.shape-img{border-color:#d9d9d9;transform:scale(1.1)}input[type=radio]{display:none}input[type=radio]:checked+.shape-img{border-color:#d9d9d9;transform:scale(1.1)}.note-input button{width:100%;padding:8px;font-family:Inter,sans-serif;color:#fff;background-color:#171717;height:35px;border-color:#d9d9d9;border-radius:4px;font-size:14px}@media only screen and (min-width: 500px){.notes-list{grid-template-columns:1fr 1fr}}@media only screen and (min-width: 800px){.note-list{grid-template-columns:repeat(3,1fr)}.note-search input{min-width:320px}}@media only screen and (min-width: 800px){.note-list{grid-template-columns:repeat(4,1fr)}}@media only screen and (max-width: 800px){.note-list{grid-template-columns:repeat(2,1fr)}.note-item__image img{max-width:100%;height:auto}}@media only screen and (max-width: 480px){.note-app__header{display:flex;align-items:center;justify-content:center;padding:4px 12px;border-bottom:1px solid #d9d9d9}.note-app__header h1{margin:8px 0;font-size:23px;flex:1;color:#000;font-family:Sour Gummy,sans-serif}.note-app__body h2{font-family:Sour Gummy,sans-serif;font-weight:400;font-size:22px;margin:10px 0}.note-list{grid-template-columns:1fr}.note-item__image img{max-width:50%;height:auto;margin-left:25%}.note-item__content{border:1px solid #d9d9d9;background-color:#fff;padding:12px;position:relative;box-shadow:0 0 6px #0000001a;overflow:hidden;text-overflow:ellipsis;line-height:1.5;min-height:244.5px;width:244.5px;box-sizing:border-box}.shape-options{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;position:relative;background-color:#fff;padding:10px;border:1px solid #d9d9d9;z-index:10}.dropdown-menu{position:absolute;top:100%;right:0;left:0;background:#fff;z-index:100;max-width:420px;overflow-y:auto}.note-input input{display:block;width:100%;padding:8px;margin:8px 0;font-family:Inter,sans-serif;font-size:16px}textarea{display:block;min-height:120px;width:100%;padding:8px;margin:12px 0;font-family:Inter,sans-serif;background-color:#fff;border:1px solid #d9d9d9;border-radius:4px;font-size:16px}input,textarea{padding:8px;margin:12px 0;font-family:Inter,sans-serif;background-color:transparent;color:#000;border:1px solid #d9d9d9;border-radius:4px;font-size:16px}.note-input button{width:100%;padding:8px;font-family:Inter,sans-serif;color:#fff;background-color:#171717;height:35px;border-color:#d9d9d9;border-radius:4px;font-size:15px}}