@import"https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.sidebar{display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100%;width:20vw;background-color:#a67c52;border-right:2px solid #633c17;padding:1rem;z-index:1000;overflow-y:auto;transition:left .5s ease}.sidebar.hidden{left:-20vw}.toggle-button{position:fixed;left:calc(20vw + 10px);top:1rem;background-color:#fdd762;border:2px solid #633c17;border-radius:5px;padding:10px 15px;font-size:1.5rem;font-weight:700;cursor:pointer;z-index:1100;transition:all .1s ease,left .5s ease}.sidebar.hidden .toggle-button{left:10px}.sidebar-items{list-style:none;padding:0;margin-top:5rem;font-size:.75rem}.sidebar-icon{width:1.2em}.sidebar-items li{margin-bottom:1rem}.sidebar-items li a{display:inline-block;width:100%;padding:.75rem 1rem;text-decoration:none;background-color:#fdf5dc;border:2px solid #633c17;color:#3b2e1b;text-align:center;transition:background-color .3s ease}.sidebar-items li.active a{background-color:#ffe57f}.sidebar-items li a:hover{background-color:#e9cda9}.sidebar-items li.active a:hover{background-color:#ffe57f}.logout-button{margin:auto 1.5rem 1rem;background-color:#fdd762;border:2px solid #633c17;font-weight:700;padding:.5rem;cursor:pointer;color:#000;border-radius:5px}@media (max-width: 768px){.sidebar{width:60vw}.sidebar.hidden{left:-60vw}.toggle-button{left:calc(60vw + 10px)}.sidebar.hidden .toggle-button{left:10px}}.page-layout{display:flex;width:100vw;min-height:100vh;overflow-x:hidden;font-family:"Press Start 2P",sans-serif}.content-wrapper{flex:1;margin-left:20vw;margin-right:auto;padding:2rem;transition:margin-left .5s ease}.page-layout.sidebar-hidden .content-wrapper{margin-left:0}.page-title{margin-bottom:2rem;font-size:1.5rem;color:#3b2e1b;text-align:center;width:100%}.content{max-width:100%;display:flex;justify-content:flex-start;align-items:flex-start;flex-direction:column;gap:1rem;min-height:calc(100vh - 6rem)}@media (max-width: 768px){.content-wrapper{margin-left:0}}:root{--font-family: "Press Start 2P", cursive;--text-color: #42210b;--border-color: #8d6e63;--panel-bg: #fff8dc;--record-bg: #fffbe6;--shadow: 6px 6px 0 #7c4a1e}.container{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:2rem;width:100%;padding-top:3rem}.numberRecordBox,.latestRecordBox{border:4px solid #5D3A00;border-radius:5px;padding:2rem;background-color:#fdf5dc;text-align:center;box-shadow:4px 4px #895c34;width:20rem;height:16rem;display:flex;flex-direction:column;justify-content:center;align-items:center}.numberRecordBox h3,.latestRecordBox h3{font-size:1.3rem;margin-bottom:1.5rem;color:#3b2e1b}.numberRecordBox p,.latestRecordBox p{margin:.5rem 0;padding:.75rem;font-size:clamp(.8rem,1.8vw,1.2rem);background-color:#fff0c2;border:2px solid #3b2e1b;border-radius:5px;width:100%;text-align:center;line-height:1.4;word-break:break-word;display:flex;justify-content:center;align-items:center}:root{--panel-bg: #fffae3;--border-color: #42210b;--shadow-color: 6px 6px 0 #7c4a1e;--button-bg: #ffd966;--button-hover-bg: #fff2b3;--font-family: "Press Start 2P", cursive;--green: #4CAF50;--red: #f44336}body,html,#root{background:linear-gradient(to bottom,#9df,#f7e6b2);font-family:var(--font-family);margin:0;padding:0;overflow-x:hidden;color:#42210b;text-transform:uppercase;letter-spacing:1px}.centered-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;width:100vw}.box{max-width:500px;width:95vw;margin:0 auto;padding:2rem;text-align:center;background:var(--panel-bg);border:4px solid var(--border-color);box-shadow:var(--shadow-color);display:flex;flex-direction:column;align-items:center;font-size:.75em}.form-container{max-width:420px;margin:2rem auto;padding:2rem;background:var(--panel-bg);border:4px solid var(--border-color);box-shadow:var(--shadow-color);display:flex;flex-direction:column;gap:1.5rem}.form-container input{padding:.8rem 1rem;font-size:.75em;border:3px solid var(--border-color);background-color:#fffbe6;color:#42210b;outline:none}button{background:var(--button-bg);border:3px solid var(--border-color);color:#42210b;font-size:.75em;padding:.75em 1.5em;cursor:pointer;box-shadow:4px 4px #7c4a1e;transition:all .1s ease-in-out;text-transform:uppercase;letter-spacing:1px}button:hover{background:var(--button-hover-bg);transform:translateY(-2px);box-shadow:6px 6px #a8682f;border:3px solid #754321;color:#754321}h1{font-size:1.1em;margin-bottom:1rem;text-shadow:2px 2px 0 #fffbe6}input{font-family:var(--font-family)}input:focus{outline:solid var(--border-color)}input:not(:placeholder-shown){border:2px solid var(--border-color)}.error-page{height:calc(100vh - 4rem);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;width:100vw;box-sizing:border-box;margin:0;padding:0}.user-form{border:4px solid var(--border-color);padding:20px;width:420px;margin:5vh auto;background-color:#fdf5dc;box-shadow:6px 6px #7c4a1e}.input-field{width:100%;padding:1rem;background:var(--record-bg);border:2px solid var(--border-color);color:var(--text-color);margin-bottom:1rem}.input-field:user-valid{border:2px solid var(--green)}.input-field:user-invalid{border:2px solid var(--red)}.dialog{position:fixed;top:40%;left:50%;transform:translate(-50%,-50%);background-color:#fff8dc;border:4px solid #5D3A00;box-shadow:6px 6px #895c34;border-radius:0;padding:2rem;text-align:center;color:#3b2e1b;z-index:9999}.dialog-btn{font-size:1rem;padding:.75rem 2rem;margin-top:1rem;border:none;border-radius:0;background-color:#6f4e37;color:#42210b;box-shadow:3px 3px #42210b;cursor:pointer}.dialog-btn:hover{background-color:#895c34}.success{background-color:var(--green)}.failure{background-color:var(--red)}.list-item{width:100%;display:grid;grid-template-columns:1fr 1.5fr auto;place-items:center;gap:1rem;color:var(--text-color)}.list-item span:first-child{max-width:25em;min-width:19em}.edit-input-field{width:100%;padding:1rem;background-color:var(--record-bg);border:2px solid var(--border-color);color:var(--text-color)}.display{width:100%;background-color:var(--record-bg);border:2px solid var(--border-color);padding:1rem;color:var(--text-color);text-align:left}.btn{flex:1 1 0;width:100%}.actions{display:flex;flex-direction:column;gap:.5rem;width:100%}*,*:after,*:before{box-sizing:border-box}.records-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:2rem;width:100%;border:.3rem solid;background:var(--panel-bg);box-shadow:var(--shadow);padding:1rem}.user-list{display:grid;grid-template-columns:1fr;list-style-type:none;padding:2rem;margin:0;border-radius:0;gap:1.5rem;width:100%;font-family:var(--font-family)}