:root{--font-color: #333;--background-color: #eee}[data-theme=dark]{--font-color: #eee;--background-color: #333}*{padding:0;margin:0;box-sizing:border-box}body{font-family:Inter,sans-serif;background-color:var(--background-color);color:var(--font-color)}input,textarea{padding:12px;margin:12px 0;font-family:Inter,sans-serif;background-color:var(--background-color);color:var(--font-color);border:1px solid #aaa;border-radius:4px}input::placeholder,textarea::placeholder{color:#aaa}header h1{flex:1}header .navigation ul li{display:inline-block;padding:20px;font-size:30px;margin:0 8px}main{margin:0 auto;padding:32px 0;width:90%;max-width:1200px}.loading-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh}.loading-icon{font-size:5em;margin-bottom:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-icon{animation:spin 1s linear infinite}.locale-button,.logout-button{background-color:var(--background-color);color:var(--font-color);border:none;cursor:pointer;font-size:1em;font-weight:700}.user-icon-container{text-align:center}.user-icon-container div{display:flex;flex-direction:column;align-items:center}.user-name{font-size:12px;color:var(--font-color)}.nav-icon{background-color:var(--background-color);color:var(--font-color);font-size:1em;cursor:pointer}.toggle-theme-button{background-color:var(--background-color);color:var(--font-color);border:none;cursor:pointer;font-size:1em}.note-app__header{display:flex;align-items:center;justify-content:center;padding:4px 16px;border-bottom:1px solid #aaa}.note-app__header h1{margin:8px 0;flex:1;color:var(--font-color)}.note-app__body{max-width:1000px;margin:16px auto;padding:12px}.note-app__body h2{font-weight:400;margin:16px 0}.note-input{margin:0 auto 48px;max-width:500px}.note-input input,.note-input textarea{display:block;width:100%}.note-input__title{font-weight:700}.note-input__title__char-limit{font-size:14px;text-align:right;color:#aaa}.note-input__body{min-height:175px}.note-input button,.login-input button,.register-input button,.contact-input button{display:block;width:100%;padding:8px;background-color:transparent;font-family:Inter,sans-serif;color:var(--font-color);border:1px solid #aaa;border-radius:4px;font-weight:700;cursor:pointer}.notes-list{margin-top:20px;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(min-content,max-content);gap:16px;margin-bottom:48px}.notes-list__empty-message{text-align:center;color:#aaa}.note-item{padding:15px;border:1px solid #aaa;border-radius:4px;overflow:hidden;display:flex;flex-direction:column}.note-item__content{padding:12px;flex:1}.note-item__title{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin-bottom:4px}.note-item__date{font-size:12px;margin-bottom:8px;color:#aaa}.note-item__body{font-size:14px}.note-item__action{display:flex;flex-direction:row;justify-content:space-between;margin-top:10px}.note-item__delete-button,.note-item__archive-button,.note-item__detail-button{flex:2;align-content:center;background-color:var(--background-color);color:var(--font-color);border:0;border-top:1px solid #aaa;padding:8px 12px;font-family:Inter,sans-serif;font-weight:700;cursor:pointer;transition:background-color .3s ease,color .3s ease}.note-item__delete-button{border-right:1px solid #aaa;background-color:var(--background-color);color:var(--font-color)}.note-item__archive-button,.note-item__archive-button:hover{color:var(--font-color)}.note-item__delete-button:hover{color:#b00020}.note-item__detail-button{border-left:1px solid #aaa;color:var(--font-color)}.note-item__detail-button:hover{color:green}.login-page h2,.register-page h2{font-weight:400}.login-input,.register-input,.contact-input{margin-top:16px}.login-input input,.register-input input,.contact-input input{display:block;padding:16px;width:100%;margin:8px 0;font-size:24px;background-color:transparent;border:2px dashed black;border-radius:8px}.login-input button,.register-input button,.contact-input button{display:block;width:100%;padding:16px;font-size:24px;background-color:tan;border:2px dashed black;border-radius:8px;margin:16px 0}@media only screen and (min-width: 500px){.notes-list{grid-template-columns:1fr 1fr}}@media only screen and (min-width: 800px){.notes-list{grid-template-columns:repeat(3,1fr)}.note-search input{min-width:400px}}@media only screen and (min-width: 1200px){.notes-list{grid-template-columns:repeat(4,1fr)}}