:root{--primary-color: #19456b;--primary-color-variant: #225a8b;--background-color: #d8d8d8;--dark-gray: #464646;--light-gray: #6c757d;--roboto: "Roboto", sans-serif;--border-round: 5px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--roboto);font-weight:400;font-style:normal;height:100vh;padding:32px 0}.main-container{display:flex;align-items:center;justify-content:center}.btn-primary{padding:.5em 1em;border:none;border-radius:var(--border-round);background-color:var(--primary-color);color:var(--background-color);font-size:1em;cursor:pointer;color:#fff}.btn-primary:hover{background-color:var(--primary-color-variant)}.btn-secondary{align-self:flex-end;color:var(--light-gray);border:none;padding:.3em .8em;border-radius:var(--border-round);cursor:pointer}.btn-secondary:hover{background-color:#bbbaba}.search__container{position:relative;display:flex;align-items:center;width:100%;margin-bottom:.5em}.search__input{width:100%;padding-left:35px;height:35px;box-sizing:border-box;border:1px solid var(--dark-gray);border-radius:var(--border-round)}.search__icon{position:absolute;left:10px;width:20px;height:20px;pointer-events:none}.header__container{display:flex;justify-content:center;align-items:center;margin-bottom:1em}.header__logo{width:2em;height:2em}.header__title{font-size:1.5em;margin-left:.5em;color:var(--primary-color-variant)}.create-notes__container{display:flex;flex-direction:column;max-width:375px}.create-notes__form{display:flex;flex-direction:column;width:375px;max-width:375px}.create-notes__inputs{display:flex;flex-direction:column;border:1px solid var(--dark-gray);border-radius:var(--border-round);padding:.5em;margin-bottom:1em}.create-notes__input{padding:.5em;border:none;font-size:.9em;font-weight:700;font-family:var(--roboto)}.create-notes__textarea{padding:.5em;border:none;font-size:.9em;resize:none;height:80px;font-family:var(--roboto);color:var(--dark-gray)}.create-notes__textarea::placeholder{color:var(--light-gray);font-family:var(--roboto);font-size:14px}.create-notes__input:focus,.create-notes__input:active,.create-notes__textarea:focus,.create-notes__textarea:active{outline:none}.notes__container{margin-top:1em;max-height:370px;overflow-y:auto;border-radius:var(--border-round);border:1px solid var(--dark-gray);padding-bottom:.5em}.notes__list{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:340px}.notes__item{display:flex;flex-direction:column;margin-top:.5em;padding:.5em;border-radius:var(--border-round);min-width:340px;max-width:340px;border:2px solid rgba(89,89,89,.05)}.notes__item>h2{font-size:1em;color:var(--primary-color);word-wrap:break-word;padding-left:.2em}.notes__item>span{font-size:.9em;margin-top:.2em;color:var(--light-gray);word-wrap:break-word;padding-left:.2em}.item__buttons{align-self:flex-end;margin-top:.5em}.span-empty-notes{color:var(--light-gray);font-size:.9em;margin-top:.5em}@media (max-width: 768px){.main-container{flex-direction:column;padding:16px}.btn-primary,.btn-secondary{width:100%;padding:1em}.create-notes__container,.create-notes__form,.notes__list,.notes__item{max-width:100%;width:100%}.header__title{font-size:1.2em}.create-notes__textarea{height:100px}}