@import"https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{height:100vh;background:#f4f4f4;display:flex;align-items:center;justify-content:center;font-family:Manrope,sans-serif;font-size:1.2rem}#page-wrapper{height:90vh;width:90vw}#grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(30%,1fr));grid-auto-columns:1fr;grid-auto-rows:1fr;gap:1rem;margin-top:2rem;padding:.5rem}#grid>div{display:flex;align-items:center;justify-content:center;border-radius:1rem;overflow:hidden;position:relative}#grid .working{color:#fff;border:.3rem solid white}#grid .tall{grid-row:span 2}#grid .wide{grid-column:span 2}@media (max-width: 768px){#grid{grid-template-columns:1fr;grid-auto-rows:minmax(100px,auto)}#grid .tall,#grid .wide{grid-column:1;grid-row:span 2}#grid>div{grid-column:1;grid-row:span 1}}.header{border-bottom:black solid .08rem;padding:1rem;font-size:1.2rem;display:flex;justify-content:space-between}.title{font-size:130%}.right-border{display:grid;font-size:80%}.wrapper{background:rgb(255,255,255);width:20rem;max-width:100%;height:30rem;padding:2rem;border-radius:1rem;box-shadow:0 10px 15px -3px #0000001a}.screen{height:3rem;margin-bottom:3rem;text-align:right;font-size:3.5em;padding-right:.5rem}.button-box{display:flex;flex-direction:column;gap:.5rem}.btn-row{display:flex;justify-content:space-between}.button{background:#e9f0f4;width:3.5rem;height:3.5rem;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#242424;border:none;font-size:1.5rem;transition:border .2s ease-in-out}.button:hover{border:2px dotted #334B48}.equals{background:#334B48;color:#fff;width:7.5rem}.opt{color:#fff;background:#94A9C0}.clock{width:16rem;height:16rem;margin:1.2rem;background-color:#fff;border-radius:50%;border:4px solid white;box-shadow:15px 19px 15px -3px #0003;position:relative;color:#795959}.clock:after{content:"";height:30px;width:30px;border-radius:50%;background-color:#6c4949;box-shadow:15px 19px 15px -3px #0003;position:absolute;top:50%;left:50%;transform:translate(-50%) translateY(-50%);z-index:11}.clock .number{--roation: 0;position:absolute;width:100%;height:100%;text-align:center;transform:rotate(var(--roation));font-size:1.5rem;padding:18px}.number:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:5px;height:15px;background-color:#795959;box-shadow:15px 19px 15px -3px #0003}.clock .num1{--roation: 30deg}.clock .num2{--roation: 60deg}.clock .num3{--roation: 90deg}.clock .num4{--roation: 120deg}.clock .num5{--roation: 150deg}.clock .num6{--roation: 180deg}.clock .num7{--roation: 210deg}.clock .num8{--roation: 240deg}.clock .num9{--roation: 270deg}.clock .num10{--roation: 300deg}.clock .num11{--roation: 330deg}.num1 div{transform:rotate(-30deg)}.num2 div{transform:rotate(-60deg)}.num3 div{transform:rotate(-90deg)}.num4 div{transform:rotate(-120deg)}.num5 div{transform:rotate(-150deg)}.num6 div{transform:rotate(-180deg)}.num7 div{transform:rotate(-210deg)}.num8 div{transform:rotate(-240deg)}.num9 div{transform:rotate(-270deg)}.num10 div{transform:rotate(-300deg)}.num11 div{transform:rotate(-330deg)}.clock .hand{--roation: 0;position:absolute;bottom:50%;left:50%;border:1px solid white;border-top-right-radius:10px;border-top-left-radius:10px;transform-origin:bottom;transform:translate(-50%) rotate(calc(var(--rotation)* 1deg));z-index:10}.clock .hand.second{width:5px;height:45%;background-color:#482121;box-shadow:15px 19px 15px -3px #0003}.clock .hand.minute{width:7px;height:40%;background-color:#6c4949;box-shadow:15px 19px 15px -3px #0003}.clock .hand.hour{width:10px;height:30%;background-color:#6c4949;box-shadow:15px 19px 15px -3px #0003}#pomodora{--main-red: rgb(177, 90, 75);--leaves: #A8B848;display:flex;justify-content:center;min-height:260px}#tomato{background:var(--main-red);height:4rem;width:11.5rem;border-radius:0 0 7rem 6.5rem;position:relative}#tomato:hover{transform:scale(1.2)}#tomato:before{content:"";width:6.8rem;height:65px;background:linear-gradient(318deg,rgba(177,90,75,1) 55%,rgba(141,145,55,1) 92%,rgba(96,135,72,1) 100%);position:absolute;border-radius:70px 90px 0 0;top:-62px;right:0}#tomato:after{content:"";width:6rem;height:62px;background:linear-gradient(20deg,rgba(177,90,75,1) 40%,rgba(141,145,55,1) 98%,rgba(96,135,72,1) 100%);position:absolute;border-radius:80px 80px 0 0;top:-53px}#tomatoTop{background:#407645;height:16px;width:16px;border-radius:16px 0;position:absolute;transform:rotate(135deg);top:-20px;z-index:1;left:4.7rem;top:-2rem}#tomatoTop:before{content:"";background:#407645;height:16px;width:22px;border-radius:16px 0;position:absolute;z-index:1;transform:rotate(80deg);top:18px}#tomatoTop:after{content:"";background:#407645;height:16px;width:22px;border-radius:16px 0;position:absolute;z-index:1;transform:rotate(90deg);top:-2px;right:13px}#soccerball-container{width:100%;height:100%;overflow:hidden;position:relative}#soccerball{content:"";width:100px;height:100px;border-radius:50%;position:absolute;top:calc(50% - 50px);left:2%;animation:roll 6s infinite;background:url(/shawnacss/assets/icons8-soccer-ball-96-3f2987de.png) no-repeat center center}@keyframes roll{0%,to{left:0;transform:rotate(0)}50%{left:88.5%;transform:rotate(360deg)}}