html,body{margin:0;padding:0;text-align:center;background:linear-gradient(to bottom,#f5f5f5,#dbe6f3);background-size:no-repeat;background-attachment:fixed;font-family:Inter,sans-serif;height:100%;display:flex;flex-direction:column}h1{font-family:Concert One,cursive;font-size:2.5rem}h2{font-size:2rem}button{font-family:Inter,sans-serif;font-size:1rem;text-align:center;padding:.5rem;border-radius:5px}p,li{font-size:1rem}nav{padding:1rem;display:flex;background-color:#333}#ul_container{list-style:none;padding:0}#ul_container>li{margin:10px 0;padding:15px;background-color:#444;border-radius:10px;font-size:1.2rem;color:#fff;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 6px #0003;transition:transform .2s ease,background-color .3s ease}#ul_container>li:hover{background-color:#555;transform:scale(1.02)}#ul_container button{font-size:1rem;padding:8px 12px;margin-left:10px;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease,transform .2s ease}#ul_container button:hover{transform:scale(1.1)}#ul_container button:nth-child(1){background-color:#4caf50;color:#fff}#ul_container button:nth-child(1):hover{background-color:#45a049}#ul_container button:nth-child(2){background-color:#ff5733;color:#fff}#ul_container button:nth-child(2):hover{background-color:#e74c3c}#ul_button button{font-size:.8rem;padding:5px;margin-left:10px;background-color:red;color:#fff;border:none;cursor:pointer;border-radius:5px}.container{display:inline-block;padding:20px;flex:1}#input_area{text-align:center;padding:.5rem 0;border-radius:5px;border:2px solid whitesmoke;background-color:#f5f5f5;gap:10px}#add_button,#del_button{background-color:#007bff;color:#fff;padding:.6rem 1rem;border:none;border-radius:5px;font-size:1rem;cursor:pointer;transition:background-color .3s ease,transform .2s ease}#add_button:hover{background-color:#0056b3;transform:scale(1.05)}#del_button{background-color:#6c757d}#del_button:hover{background-color:#5a6268;transform:scale(1.05)}#ul_container{text-align:auto;padding-bottom:80px}.popup{position:absolute;top:290px;left:90px;display:inline-block;cursor:pointer}.popup .popuptext{visibility:hidden;width:180px;background-color:#222222e6;color:#fff;text-align:center;border-radius:10px;padding:10px 15px;font-size:14px;font-family:Inter,sans-serif;position:absolute;z-index:1;bottom:130%;left:50%;transform:translate(0) scale(.9);opacity:0;transition:all .3s ease-in-out;box-shadow:0 4px 8px #0000004d}.popup .popuptext:after{content:"";position:relative;top:100%;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:rgba(34,34,34,.9) transparent transparent transparent}.popup .show{visibility:visible;transform:translate(0) scale(1);opacity:1}@media (min-width: 768px){.container{width:50%;margin:0 auto}#input_area{width:80%;font-size:2.2rem}button{font-size:2.2rem;padding:.75rem}ul>li{font-size:2.2rem;padding:15px}.popup .popuptext{width:220px;font-size:16px;padding:15px 20px}}@media (min-width: 1024px){.container{width:40%}#input_area{width:70%;font-size:1.4rem}button{font-size:1.4rem;padding:1rem}ul>li{font-size:1.4rem;padding:20px}.popup .popuptext{width:260px;font-size:18px;padding:20px 25px}}.off-screen-menu{background:#333;height:100vh;width:100%;max-width:450px;position:fixed;top:0;right:-450px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:3rem;transition:.3s ease}.off-screen-menu a{color:#fff;text-decoration:none;margin:20px 0}.off-screen-menu a:hover{text-decoration:underline}.off-screen-menu li{list-style:none}.off-screen-menu.active{right:0}.ham-menu{height:50px;width:50px;cursor:pointer;margin-left:auto;position:relative}.ham-menu span{width:100%;height:5px;background:#fff;border-radius:25px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:.3s ease}.ham-menu span:nth-child(1){top:25%}.ham-menu span:nth-child(3){top:75%}.ham-menu.active span:nth-child(1){top:50%;transform:translate(-50%,-50%) rotate(45deg)}.ham-menu.active span:nth-child(2){opacity:0}.ham-menu.active span:nth-child(3){top:50%;transform:translate(-50%,-50%) rotate(-45deg)}#time{position:absolute;left:0;top:0;padding:2rem;color:gray;transition:color .5s ease,transform .5s ease}#time:hover{color:#fff;transform:scale(1.2);cursor:none}#footer{position:relative;bottom:0;width:100%;background-color:#333;color:#cfcfcf;padding:10px 0;font-family:Inter,sans-serif;font-size:1rem;text-align:center;margin-top:auto}#footer a{color:#cfcfcf;text-decoration:none;padding:0 10px}#footer a:hover{text-decoration:underline}@media (max-width: 768px){#footer{font-size:.9rem}#footer a{padding:0 5px}}.input-container{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px;flex-wrap:nowrap;max-width:100%}#input_area{text-align:center;padding:.5rem 0;border-radius:5px;border:2px solid whitesmoke;background-color:#f5f5f5;flex:1}@media (max-width: 768px){#input_area{width:60%;font-size:1rem}#add_button,#del_button{font-size:.8rem;padding:.4rem}}@media (max-width: 480px){#input_area{width:50%;font-size:1.8rem}#add_button,#del_button{font-size:1.7rem;padding:.3rem}}