:root{--primary: #bb86fc;--primary-variant: #3700b3;--secondary: #03dac6;--background: #121212;--surface: #121212;--error: #cf6679;--warning: #f39c12;--on-background: #ffffff;--on-background-grey: #c7c7c7;--on-surface: #ffffff}[data-theme=light]{--background: #dddddd;--suface: #ffffff;--on-background: #333333;--on-background-grey: #6d6d6d;--on-surface: #333333}*{padding:0;margin:0;box-sizing:border-box}a{color:var(--on-background)}body{font-family:Inter,sans-serif}.app-container{color:var(--on-background);background-color:var(--background);min-height:100vh;transition:all ease-in-out .5s}header{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--on-background)}header h1{flex:1}.navigation ul{display:flex;flex-direction:row;justify-content:space-around;align-items:center}header .navigation ul li{display:inline-block;font-size:24px;margin:0 8px}main{margin:0 auto;padding:32px 0;width:90%;max-width:1400px}.notes-list{margin-top:32px;display:grid;grid-template-columns:1fr;gap:16px;padding:16px 8px}.notes-list-empty{margin-top:32px;padding:16px 8px}.notes-list-empty p{text-align:center;color:var(--on-background-grey)}.note-item{padding:16px;border-radius:8px;border:1px solid var(--on-background);border-top:5px solid}.note-item__title{margin:4px 0}.note-item__createdAt{color:var(--on-background-grey);font-size:14px;margin:4px 0}.note-item__body{margin-top:16px;overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-line-clamp:6;-webkit-box-orient:vertical}.detail-page{margin:32px auto 0;width:90%}.detail-page__title{font-size:48px;margin-bottom:8px;word-wrap:break-word}.detail-page__createdAt{color:var(--on-background-grey)}.detail-page__body{line-height:1.5;margin-top:36px;font-size:18px}.login-page,.register-page{padding:64px}.detail-page__action,.homepage__action,.add-new-page__action{position:fixed;display:flex;gap:16px;bottom:32px;right:32px}.action{display:flex;align-items:center;justify-content:center;font-size:32px;border:0;width:50px;height:50px;border-radius:50px;background-color:var(--on-background);color:var(--background);padding:8px;cursor:pointer}.add-button{position:fixed;top:87%;right:3%}.error-page{padding:64px}.detail-page__button-container{position:fixed;top:87%;right:5%;display:flex;flex-direction:row-reverse;gap:24px}.add-button,.delete-button,.archive-button{background:none;border:var(--on-surface) solid 4px;border-radius:100%;display:flex;justify-content:center;align-items:center;color:var(--on-surface);font-size:3em;text-align:center;width:80px;height:80px}.add-new-page__input{padding:16px 64px;margin-top:32px}.add-new-page__input .add-new-page__input__title{width:100%;background-color:transparent;border:0;color:var(--on-background);font-family:Inter,sans-serif;font-size:64px;font-weight:700;padding:8px 0}.add-new-page__input__title::placeholder{color:var(--on-background-grey)}.add-new-page__input .add-new-page__input__body{width:100%;background-color:transparent;border:0;color:var(--on-background);font-family:Inter,sans-serif;font-size:24px;padding:8px 0;min-height:500px}[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--on-background-grey)}.search-bar input{margin:16px 0;font-family:Inter,sans-serif;background-color:transparent;border:1px solid var(--on-background);border-radius:4px;padding:8px;width:100%;color:var(--on-background)}.search-bar input::placeholder{color:var(--on-background-grey)}.toggle-theme,.toggle-locale{background-color:transparent;border:0;cursor:pointer;color:var(--on-background);display:flex;align-items:center;margin:0 16px}.toggle-theme{font-size:36px}.toggle-locale{font-size:28px}.input-login,.input-register{margin:32px 0}.input-login label,.input-register label{font-size:24px;font-weight:lighter}.input-login input,.input-register input{font-size:18px;font-family:Inter,sans-serif;margin-top:8px;margin-bottom:16px;display:block;width:100%;padding:8px;background-color:transparent;border-radius:8px;border:3px solid var(--on-background);color:var(--on-background)}.input-login button,.input-register button{font-family:Inter,sans-serif;font-weight:700;font-size:24px;width:100%;padding:12px;border:0;border-radius:8px;background-color:var(--on-background);color:var(--background);cursor:pointer}.header-button-container{display:flex;flex-direction:row;align-items:center;justify-content:space-evenly;width:10%}.title{width:14%}.button-logout,.button-theme{display:flex;align-items:center;gap:8px;background-color:transparent;border:0;font-size:32px;cursor:pointer;color:var(--on-background)}.button-theme{font-size:40px}.loading-page{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;gap:12px}.loader{display:inline-grid;width:90px;aspect-ratio:1;transform:rotate(90deg);animation:l4 1s linear infinite}.loader:before,.loader:after{content:"";grid-area:1/1}.loader:before{clip-path:polygon(100% 50%,90.45% 79.39%,65.45% 97.55%,34.55% 97.55%,9.55% 79.39%,0% 50%,9.55% 20.61%,34.55% 2.45%,65.45% 2.45%,90.45% 20.61%,100% 50%,85.6% 24.14%,63.6% 8.15%,36.4% 8.15%,14.4% 24.14%,6% 50%,14.4% 75.86%,36.4% 91.85%,63.6% 91.85%,85.6% 75.86%,94% 50%,85.6% 24.14%);background:#574951}.loader:after{background:#83988e;clip-path:polygon(100% 50%,65.45% 97.55%,9.55% 79.39%,9.55% 20.61%,65.45% 2.45%);margin:27%;translate:46% 0;transform-origin:right;animation:inherit}@keyframes l4{0%{rotate:18deg}to{rotate:-18deg}}@media screen and (min-width: 650px){.notes-list{grid-template-columns:repeat(2,1fr)}.detail-page__title{font-size:64px}}@media screen and (min-width: 850px){.notes-list{grid-template-columns:repeat(3,1fr)}}@media screen and (min-width: 1200px){.notes-list{grid-template-columns:repeat(4,1fr)}}