#addButton,#clearButton,#taskList li button{padding:.5rem 1rem;cursor:pointer}#clearButton,#deleteButton{background-color:#fa4032;color:#fff}#addButton:hover,#saveButton{background-color:#0d6e3b}#taskForm,#taskList li,.container,.popUp,footer,main{display:flex}*{margin:0;padding:0;box-sizing:border-box;font-family:cursive}main{width:auto;height:100%;overflow:hidden;background-image:url(../media/lifestyle-summer-scene-with-cartoon-design.jpg);background-size:cover;background-position:center;flex-direction:column;justify-content:center;align-items:center;text-align:center}main h1{color:#fff;font-size:2.75rem;margin-top:4rem;font-weight:400;font-family:Pacifico,cursive}main h1 span{font-family:"Rubik Moonrocks",sans-serif}.container{width:80%;height:50vh;flex-direction:column;margin-top:4rem;background-color:rgba(35,35,35,.4);border:1px solid rgba(235,235,235,.1);border-radius:1rem;margin-bottom:4rem}#taskForm{padding:3rem;width:100%;justify-content:center;gap:.5rem}#taskInput{width:70%;padding:.5rem 1rem;border-radius:.5rem;border:none}#taskInput:focus{outline:0}#addButton{background-color:#118b50;color:#fff;border:none;border-radius:.5rem}#clearButton{border:none;border-radius:.5rem}#clearButton:hover{background-color:#d32b1d}#taskList{padding:1rem 0;width:100%;height:60vh;color:#fff;overflow-y:auto;scrollbar-color:#91c2aa rgba(235,235,235,0.5);scrollbar-width:thin}#taskList li{width:80%;background-color:rgba(235,235,235,.5);align-items:center;justify-content:center;color:#7d0a0a;font-size:1.5rem;padding:.5rem .75rem;border-radius:.5rem;font-weight:500;margin:auto auto 1rem}.floating{transform:translateZ(0) rotateZ(1deg);transition:transform .3s,box-shadow .3s;box-shadow:0 10px 20px rgba(0,0,0,.2)}#taskList li span{flex-grow:1;margin:.75rem}#taskList li button{border-radius:.5rem;border:none}#taskList li input{margin:0 .75rem;border:none;outline:0;padding:.5rem;border-radius:.5rem}#deleteButton:hover{background-color:#af2f26}#updateButton{background-color:#ffb200;color:#000;margin-left:.5rem}#saveButton{color:#fff;margin-left:.5rem}#saveButton:hover{background-color:#0c5834}#updateButton:hover{background-color:#ce9102}footer{justify-content:center;padding:.9rem;background-color:#49583c}footer p{color:gray}.popUp{width:50%;height:50%;padding:2rem;flex-direction:column;justify-content:center;align-items:center;background-color:rgba(0,0,0,.7);position:fixed;top:-100%;left:25%;z-index:100;color:#fff;border-radius:.5rem;opacity:0;transition:opacity .7s ease-in-out}.popUp h2,.popUp p,.popUpImg{padding-bottom:1rem}@keyframes popUpAnimation{0%{opacity:0;top:-100%}25%{opacity:.25;top:5%}50%{opacity:.5;top:15%}75%{opacity:.75;top:20%}100%{opacity:1;top:25%}}.popUp.show{opacity:1;animation:.4s forwards popUpAnimation}.popUpImg{width:10rem}@media (min-width:280px) and (max-width:620px){.popUp h2,.popUp p,.popUpImg{padding-bottom:.75rem}#taskList li{flex-direction:column;justify-content:center;align-items:center;gap:.5rem}#taskList li button{margin-left:0;width:60%}#taskInput{width:100%}#taskForm{flex-direction:column;justify-content:center;align-items:center}.popUp{width:80%;height:80%;left:10%;top:100%}.popUpImg{width:7rem}footer{text-align:center}}