@import"https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;500;600;700&display=swap";.main-container{min-height:100vh;margin:0 auto;display:flex;flex-direction:column}@media screen and (min-width: 768px){.main-container{position:relative}}.header{position:fixed;height:6.5rem;top:0;left:0;right:0;z-index:99}@media screen and (min-width: 500px){.header{height:5.5rem}}.board{background-color:#191919;background-image:radial-gradient(rgb(45,74,94) 1.7px,rgb(25,25,25) 1.7px);background-size:28px 28px;background-position:center;display:flex;flex-direction:column;flex-grow:1;margin:6rem 0}@media screen and (min-width: 768px){.footer-container{position:fixed;z-index:99;bottom:0;left:0;right:0}}.btn-outline{border-radius:.4rem;border:.1rem solid #b0b0b0;color:#f3f1f1;font-size:1.3rem;padding:.5rem 0;font-weight:600;letter-spacing:.1rem;box-shadow:.1rem .1rem .1rem #b0b0b0;width:6.5rem}.btn-outline:hover{transform:translate(-.1rem,-.1rem);box-shadow:.1rem .1rem .1rem transparent}.btn-outline-delete{background-color:#ec4d4d;border-color:#d61717}.btn-outline-delete:hover{background-color:#d61717}.btn-outline-cancel{color:#191919;background-color:#d6d6d6}.btn-outline-cancel:hover{background-color:#f3f1f1}.btn-outline-save{background-color:#1b7adf;border-color:#13559b}.btn-outline-save:hover{background-color:#13559b}.btn-icon{color:#2d4a5e;background-color:transparent;border:0}.btn-icon:hover{color:#0c1419;scale:1.1}.btn-new{border-radius:.4rem;border:.1rem solid #b0b0b0;color:#f3f1f1;font-size:1.3rem;padding:.5rem 0;font-weight:600;letter-spacing:.1rem;box-shadow:.1rem .1rem .1rem #b0b0b0;display:flex;justify-content:center;align-items:center;gap:.4rem;flex-direction:row;background-color:#d6d6d6;width:8rem;height:3rem;color:#191919}.btn-new:hover{transform:translate(-.1rem,-.1rem);box-shadow:.1rem .1rem .1rem transparent}.btn-color{border-radius:.4rem;border:.1rem solid #b0b0b0;color:#f3f1f1;font-size:1.3rem;padding:.5rem 0;font-weight:600;letter-spacing:.1rem;box-shadow:.1rem .1rem .1rem #b0b0b0;width:3rem;padding:.6rem .5rem;height:3rem;color:#f9f08d;background-color:#f9f08d}.btn-color:hover{transform:translate(-.1rem,-.1rem);box-shadow:.1rem .1rem .1rem transparent}.header{background-color:#191919;color:#f9f08d}.header .header-container{max-width:2000px;margin:0 auto;display:flex;justify-content:center;align-items:center;gap:0rem;flex-direction:row;height:6.5rem;padding:0 1rem;justify-content:space-between}@media screen and (min-width: 500px){.header .header-container{gap:1rem;height:5.5rem}}@media screen and (min-width: 1024px){.header .header-container{font-size:6.5rem}}.header .title-container{flex-grow:1;text-align:center}.header .title{font-weight:500;font-size:1.7rem;letter-spacing:4px;line-height:1.6}@media screen and (min-width: 500px){.header .title{font-size:2.2rem}}@media screen and (min-width: 1024px){.header .title{font-size:2.6rem}}.header svg{color:#f9f08d;font-size:3.4rem}@media screen and (min-width: 1024px){.header svg{font-size:3.4rem}}.form-container{background-color:#2d2d2d;width:100%;padding:3.5rem 2rem 2rem}.form{text-align:center;max-width:2000px;margin:0 auto}@media screen and (min-width: 1024px){.form{display:grid;grid-template-columns:1fr 14rem;column-gap:2.5rem;padding:0 3rem}}@media screen and (min-width: 2500px){.form{padding:0}}.form .fields{display:flex;justify-content:center;align-items:center;gap:1.5rem;flex-direction:column;margin-bottom:2rem}@media screen and (min-width: 1024px){.form .fields{flex-direction:row}}.form .group-field{display:flex;justify-content:center;align-items:center;gap:0;flex-direction:column;text-align:center;width:100%}@media screen and (min-width: 1024px){.form .group-field{flex-direction:row;gap:1rem}}.form label{margin-top:.5rem;color:#d6d6d6;order:2}.form input{background-color:#f3f1f1;padding:.1rem .6rem 0;font-family:Josefin Sans,sans-serif;font-size:1.6rem;border:0;height:3.2rem;border-radius:.3rem;order:1;width:100%}@media screen and (min-width: 1024px){.form input{order:2}}.form input[type=text]:focus{outline:none;background-color:#f8f8f8;border:.3rem solid #1b7adf;color:#191919;border-radius:.3rem}.form .buttons{display:flex;justify-content:center;align-items:center;gap:2rem;flex-direction:row;align-items:unset;position:relative}.form .modal{width:fit-content;height:fit-content;top:0}.form .modal-header{display:none;margin:0}.form .modal-swatches{border-radius:.3rem;padding:1rem 1.2rem;background-color:#191919}.form .modal .swatch{width:3rem;margin:0 .4rem;height:3rem}@media screen and (min-width: 1024px){.form .modal{left:50%;top:-1.5rem;transform:translate(-50%)}}.notes{max-width:2000px;margin:0 auto;padding:5rem 3rem;height:100%;flex-grow:1}@media screen and (min-width: 1400px){.notes{padding:5rem 4rem}}@media screen and (min-width: 2500px){.notes{padding:5rem 0}}.noteItem{width:100%;margin:0 auto;display:grid;grid-template-rows:1fr auto;break-inside:avoid;position:relative;color:#2c2a2a;box-shadow:.5rem .5rem .7rem #555555b3;border-radius:.2rem;overflow:hidden;font-size:1.5rem;height:fit-content}.noteItem .note-title{background-color:#db7adb;text-align:center;font-size:1.8rem;font-weight:700;padding:1.4rem 1.5rem;border-top-left-radius:.3rem;border-top-right-radius:.3rem}.noteItem .note-title:focus{outline:none;background-color:#f8f8f8;border:.3rem solid #1b7adf;color:#191919;border-radius:.3rem}.noteItem .note-body{font-size:1.8rem;padding:1.5rem 1rem;line-height:1.6}.noteItem .note-body:focus{outline:none;background-color:#f8f8f8;border:.3rem solid #1b7adf;color:#191919;border-radius:.3rem}.noteItem .note-footer{background-color:plum;height:4.4rem;width:100%;border-top:.1rem solid rgb(45,74,94);padding:1rem 1.4rem;display:flex;align-items:baseline;justify-content:space-between}.noteItem .note-footer .date{font-size:1.4rem;color:#5e5e5f}.noteItem .note-footer .buttons{display:flex;gap:1.8rem}@media screen and (min-width: 650px){.noteItem{width:unset;margin:unset}}.modal{position:absolute;bottom:0;width:100%;text-align:center;border-radius:.2rem;background-color:#191919d9;color:#d6d6d6;z-index:60}.modal-header{text-align:right;padding:1.2rem 0 .8rem;border-bottom:.1rem solid #f3f1f1;text-align:center}.modal-header-close{position:absolute;top:.4rem;right:.4rem;background-color:transparent;border:0;color:#d6d6d6}.modal-header-close:hover{color:#fff;transform:scale(1.1)}.modal-message{font-size:1.6rem;padding:1rem .5rem .5rem;line-height:1.2;letter-spacing:.05rem}.modal-options{display:flex;justify-content:center;align-items:center;gap:1.6rem;flex-direction:row;height:4.4rem}.modal-options .btn-outline{height:2.8rem}.modal-swatches{display:flex}.swatch{position:relative;width:100%;height:5.5rem;border-radius:.4rem;border:.1rem solid #f3f1f1}.swatch:hover{transform:scale(1.1)}.swatch>*{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#2d4a5e}.loader-container{margin-top:6rem;text-align:center}.loader{border:2rem solid #f8f8f8;border-top:2rem solid #81b3e9;border-radius:50%;width:13rem;height:13rem;animation:spin 2s linear infinite;margin:0 auto}.loader-message{margin-top:3rem;font-size:2.3rem;color:#f3f1f1;letter-spacing:2px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{margin-top:5rem;text-align:center;color:#d6d6d6}.error-message{font-size:2.5rem}.footer-container{background-color:#2d2d2d;width:100%;border-top:.1rem solid #d6d6d6;text-align:center;padding:1rem 0}.footer{max-width:2000px;margin:0 auto;display:flex;justify-content:center;align-items:center;gap:1rem;flex-direction:column;height:6rem;padding:2rem 0}@media screen and (min-width: 768px){.footer{flex-direction:row;gap:3rem;height:3rem}}.footer-links{display:flex;justify-content:center;align-items:center;gap:2rem;flex-direction:row}@media screen and (min-width: 768px){.footer-links{order:2}}.footer-links a svg{font-size:2.5rem;color:#5ee6ad}@media screen and (min-width: 1024px){.footer-links a svg{font-size:2rem}}.footer-links a svg:hover{color:#30966b}.footer-links a svg:active{color:#f3f1f1}.footer-links .svg-link{width:2.5rem;height:2.5rem;filter:invert(82%) sepia(41%) saturate(557%) hue-rotate(92deg) brightness(95%) contrast(89%)}@media screen and (min-width: 1024px){.footer-links .svg-link{width:2rem;height:2rem}}.footer-links .svg-link:hover{filter:invert(45%) sepia(10%) saturate(2200%) hue-rotate(103deg) brightness(105%) contrast(94%)}.footer-links .svg-link:active{filter:invert(100%) sepia(0%) saturate(4288%) hue-rotate(294deg) brightness(109%) contrast(68%)}.footer-copyright{color:#a8b4b8;letter-spacing:1px}@media screen and (min-width: 768px){.footer-copyright{order:1}}.footer-copyright a{color:#5ee6ad}.footer-copyright a:hover{color:#179460}.footer-copyright a:active{color:#f8f8f8}*,*:after,*:before{margin:0;padding:0;box-sizing:inherit}html{font-size:62.5%;margin:0;padding:0}body{box-sizing:border-box;font-family:Josefin Sans,sans-serif;font-size:1.6rem;background-color:#191919}a{text-decoration:none}ul{list-style-type:none;margin:0;padding:0}