.container{position:relative;width:100%;height:100%;background-position:center;background-size:cover;animation:fade-in 1.4s ease-in-out}.text-layer{font-size:1.4rem;padding:1em 2em;height:100%;display:flex;flex-direction:column;justify-content:space-between;position:relative;color:#fff;z-index:1}.top{margin-top:5rem;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:1rem}.middle{display:flex;align-items:center;order:-1}#loader{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.spinner{width:6rem;height:6rem;border:8px solid #fff;border-top:8px solid #333;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.text-shadow{text-shadow:0 2px 3px rgba(0,0,0,.6)}.padding-small{padding:.24em .48em}.padding-medium{padding:.5em 1em}.padding-big{padding:1em 2em}.card{color:#e7e5e4;border:1px solid oklch(37.4% .01 67.558 /.7);border-radius:20px;background-color:#0c0a09b3}.chevron-right-icon{padding:100dvh 0 100dvh 1%;position:absolute;left:0;top:50%;font-size:2.4rem;transform:translateY(-50%);animation:move 1s ease-in-out infinite;opacity:1;transition:all .3s}.hide-icon{opacity:0}@keyframes move{0%{transform:translateY(-50%)}50%{transform:translate(2px,-50%)}99%{transform:translateY(-50%)}}.horizontal-line{align-self:stretch;height:1px;background-color:#44403bf2}.vertical-line{margin-top:.8em;width:100%;height:1px;background-color:#44403bf2}a{text-decoration:none;font-weight:700;color:#fff;transition:text-decoration .3s,color .3s}a:hover{text-decoration:underline;color:#ddd}.img-shadow{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:0}h1{position:absolute;left:50%;top:-5%;transform:translate(-50%,50%);font-size:5.2rem;font-family:Roboto Mono,monospace;font-weight:400}.row{min-width:20rem;display:flex;align-items:center;gap:1rem}.row p{font-size:1.4rem}.row p:nth-last-of-type(1){color:#9f0712;margin-left:auto;font-weight:700}.to-do-container{min-width:30rem;width:20%;position:absolute;left:0;top:1%;bottom:1%;background-color:#0c0a09f2;color:#e7e5e4;border:1px solid oklch(37.4% .01 67.558 /.95);border-left:none;border-top-right-radius:15px;border-bottom-right-radius:15px;opacity:0;transform:translate(-100%);transition:all .3s ease;z-index:2}.to-do-container.show{opacity:1;transform:translate(0)}.to-do-header{display:flex;align-items:center;font-size:2rem;gap:1.5rem;margin-bottom:.5em;color:#da7700;color:oklch(66.6% .179 58.318)}.to-do-list{list-style:none}.to-do-element{margin-bottom:1.2em}.task-element{display:flex;justify-content:space-between;align-items:center;gap:1em}.fade-out{opacity:0;transform:translate(-300px);transition:all 1.2s ease}.input-container{margin-bottom:3em;display:flex;flex-direction:column;justify-content:center;gap:1rem}.input-container label{font-weight:700;color:#da7700;color:oklch(66.6% .179 58.318)}.to-do-container input[type=text]{width:100%;padding:.7em 1.2em;border:1px solid oklch(37.4% .01 67.558 /.95);border-radius:10px;color:#e7e5e4;background-color:#0c0a091a;outline:none}.to-do-container button{font-size:2rem;background:none;border:none;color:#e7e5e4;cursor:pointer;transition:transform .3s}.to-do-container button:active{transform:scale(.95)}.weather{position:relative;display:flex;flex-direction:column;align-items:center;gap:1rem}.column{display:flex;flex-direction:column;align-items:center;gap:1rem}.text-large{font-size:3rem}.text-small{font-size:1.6rem;text-transform:capitalize}.weather img{height:50px;width:50px}@media (min-width: 768px){.text-layer{font-size:1.6rem}.top{margin-top:0;flex-direction:row;gap:0;align-items:start}.middle{order:0}h1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:6.2rem}.row{min-width:22.5rem}.row p{font-size:1.6rem}.to-do-header{font-size:2.8rem}.weather{position:relative;display:flex;flex-direction:row;gap:3rem;align-items:flex-end}.city{position:absolute;top:1em}.column{align-items:start}.column:first-of-type p{align-self:center}.column:last-of-type p{align-self:center}.horizontal-line{align-self:stretch;width:1px;background-color:#44403bf2}.weather img{height:100px;width:100px}}@media (min-width: 1200px){h1{font-size:7.2rem}.row{min-width:25rem}.row p{font-size:1.8rem}.to-do-header{font-size:3rem}}*{box-sizing:border-box;margin:0;padding:0}html{font-size:62.5%}body{height:100dvh;font-family:Montserrat,sans-serif;background-color:#333;overflow:hidden;touch-action:manipulation;overscroll-behavior:contain}@keyframes fade-in{0%{transform:translateZ(-100%);opacity:0}to{transform:translateZ(0);opacity:1}}