:root{--MainColor:#14213d;--SpecialColor:#fca311;--BackgroundColor:#ffffff}@font-face{font-family:Cairo;src:url(/assets/Cairo-Regular-3-BJwmSWBM.ttf)}@font-face{font-family:Head;src:url(/assets/Pixemon-D1heLLlu.otf)}html{background-color:var(--BackgroundColor);color:var(--MainColor);font-family:Cairo;font-weight:600}html *{text-decoration:none;transition:all .2s ease;list-style:none}.Section{width:97%;height:auto;padding:1% 1.5%}.Header{border-bottom:1px solid grey;display:flex;align-items:center;justify-content:space-between}.Header .Sessions{padding:2.5px 10px;border:1px solid grey;background-color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:left;gap:5px}.Header .Sessions .Ciricle{width:10px;height:10px;border-radius:50%;background-color:var(--SpecialColor)}.Header .Name{display:flex;gap:15px;align-items:center;justify-content:left}.Header .Name .Details{display:flex;flex-direction:column}.Header .Name .Details h1{margin-top:-5%}.Header .Name .Details span{display:inline-block;margin-top:-17.5%;color:gray}.Header .Name .fa-stopwatch{padding:10px;font-size:30px;background-color:var(--MainColor);color:var(--SpecialColor);border-radius:10px}.FirstSection{background-color:var(--MainColor);color:var(--BackgroundColor);border-radius:2rem;display:flex;align-items:center;justify-content:space-around;width:70%;margin:2.5% auto}.FirstSection .LeftSlider{text-align:center;padding:15px;display:grid;grid-template-columns:1fr;grid-template-rows:1fr 90px;align-items:center;justify-items:center}.FirstSection .LeftSlider .Details{display:grid;grid-template-columns:1fr;grid-template-rows:75px 10px;text-align:center}.FirstSection .LeftSlider .Details span{color:var(--SpecialColor)}.FirstSection .LeftSlider .fa-stopwatch{padding:20px;border-radius:10px;font-size:30px;background-color:var(--SpecialColor);color:var(--MainColor)}.FirstSection .RightSlider{padding:50px 20px;border-radius:1rem}.FirstSection .RightSlider .Head{width:100%;padding:0% 5px;margin:0 auto 20px;background-color:var(--MainColor);display:flex;align-items:center;justify-content:space-between}.FirstSection .RightSlider .Head .Link{padding:2px 15px;background-color:var(--BackgroundColor);border:0;border-radius:5px;color:var(--SpecialColor);cursor:pointer;font:inherit;box-shadow:0 5px 1px var(--SpecialColor)}.FirstSection .RightSlider .Head .Link:hover{box-shadow:0 0 1px var(--SpecialColor);transform:translateY(5px)}.FirstSection .RightSlider .Timer{width:300px;height:300px;font-size:35px;font-family:monospace;display:flex;align-items:center;justify-content:center;position:relative;border-radius:50%;background-color:var(--SpecialColor);z-index:3}.FirstSection .RightSlider .Timer:after{width:90%;height:90%;position:absolute;content:"";translate:-50% -50%;top:50%;left:50%;border-radius:50%;background-color:var(--MainColor)}.FirstSection .RightSlider .Timer .Content{z-index:5}.FirstSection .RightSlider .Start{width:100%;display:grid;margin-top:15px;grid-template-columns:1fr 35px;grid-template-rows:1fr;gap:1em}.Button{height:35px;display:flex;align-items:center;justify-content:center;border-radius:5px;border:1.5px solid var(--SpecialColor);background-color:transparent;box-shadow:0 5px 1px var(--SpecialColor);color:var(--SpecialColor);cursor:pointer;font-family:Cairo}.Button.Icon{width:30px;height:30px}.Button:hover{box-shadow:0 0 1px var(--SpecialColor);transform:translateY(5px)}.Button.hole{width:100%;background-color:var(--MainColor)}.Setting{background:none;border:none}.Setting .fa-gear{font-size:35px}.Setting .fa-gear:hover{rotate:90deg}.DialogSetting{width:30%;border-top-right-radius:1rem;border-bottom-right-radius:1rem;height:90vh;left:-65%;position:absolute;color:var(--MainColor)}.DialogSetting::backdrop{width:100%;height:100vh;background-color:#0000009c;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.DialogSetting h2{width:102%;height:75px;background-color:var(--MainColor);margin:-3% -3% 0%;display:flex;align-items:center;justify-content:left;padding:1% 2%;color:var(--SpecialColor);font-size:35px}.DialogSetting .inputTimer{padding:5px 10px;display:inline-block;border:1px solid var(--SpecialColor);background-color:var(--BackgroundColor);border-radius:5px;font-family:Cairo;width:80%}.DialogSetting .inputTimer.duration{width:20%;margin-left:5%;margin-top:3%}.Section.ListSection{width:62.5%;height:auto;padding:2.5% 5%;border-radius:2rem;margin:0 auto;border:1px solid #e0e0e0}.Section.ListSection .Head{width:100%;display:flex;align-items:center;justify-content:space-between;padding:0% 1%;border-bottom:1px solid #e0e0e0}.Section.ListSection .Head .Name{display:flex;align-items:center;justify-content:left;gap:12.5px;font-size:20px}.Section.ListSection .Head .Name .fa-list-check{color:var(--SpecialColor)}.Section.ListSection .Head .Items{color:gray;font-family:monospace}.Section.ListSection .AddItemsAndLinks{width:90%;margin:0 auto}.Section.ListSection .AddItemsAndLinks .Flex{display:flex;width:100%;align-items:center;justify-content:space-between}.Section.ListSection .AddItemsAndLinks .Flex.Links{justify-content:center;gap:1em;margin:17.5px auto}.Section.ListSection .AddItemsAndLinks .Flex.Links .Link{width:125px;height:35px;background-color:var(--MainColor);display:flex;align-items:center;justify-content:center;color:var(--SpecialColor);border-radius:5px;border:0;cursor:pointer;font:inherit}.Section.ListSection .AddItemsAndLinks .Flex.Links .Link.CLicked,.Section.ListSection .AddItemsAndLinks .Flex.Links .Link:hover{transform:translateY(-5px);box-shadow:0 5px 1px var(--SpecialColor)}.Section.ListSection .AddItemsAndLinks .Flex.AddItems{display:grid;grid-template-columns:1fr 100px 35px;grid-template-rows:35px;gap:1em}.Section.ListSection .AddItemsAndLinks .Flex.AddItems .Select,.Section.ListSection .AddItemsAndLinks .Flex.AddItems input{border:1px solid var(--SpecialColor);border-radius:5px;padding:2px 10px;width:98%;background-color:transparent;height:40px;font-family:Cairo}.Section.ListSection .AddItemsAndLinks .Flex.AddItems input{height:35px}.Section.ListSection .AddItemsAndLinks .Flex.AddItems .Button.Icon{height:40px;width:40px;transform:none;box-shadow:none;font-size:20px}.Section.ListSection .AddItemsAndLinks .Flex.AddItems .Button.Icon:hover{background-color:var(--SpecialColor);color:var(--MainColor)}.Section.ListSection .AddItemsAndLinks .Flex.AddItems .Button.Icon:hover .fa-plus{rotate:180deg}.Section.ListSection .Body{margin-top:5%}.Section.ListSection .ContentEmpaty{width:600px;height:400px;display:grid;grid-template-columns:1fr;align-content:center;justify-items:center;gap:1em;border-radius:1rem;border:2px dashed grey;color:gray;margin:0 auto;font-size:20px}.Section.ListSection .ContentEmpaty .fa-clipboard{font-size:50px}.Section.ListSection .TaskItem{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid #e0e0e0}.Section.ListSection .TaskItem .TaskContent{flex:1;overflow-wrap:anywhere;position:relative}.Section.ListSection .TaskItem .TaskContent.Done{color:green}.Section.ListSection .TaskItem .TaskContent.Done:after{width:70%;height:1px;background-color:green;content:"";translate:0% -50%;top:55%;left:0%;position:absolute}.Section.ListSection .TaskItem select{padding:5px;border:1px solid var(--SpecialColor);border-radius:5px;background-color:var(--BackgroundColor);color:var(--MainColor);font-family:Cairo}.Section.ListSection .TaskItem .DeleteTask{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--SpecialColor);border-radius:5px;background-color:transparent;color:var(--MainColor);cursor:pointer}@media (max-width : 1000px){.Section.ListSection .ContentEmpaty{width:95%}}@media (max-width : 900px){.FirstSection{display:flex;flex-direction:column;gap:5px}.DialogSetting{width:90%;height:90vh;left:0%}}@media (max-width : 600px){html{font-size:15px}.Section.ListSection .Head .Name{font-size:15px}.Section.ListSection .AddItemsAndLinks .Links{font-size:10px}.Section.ListSection .ContentEmpaty{font-size:15px;height:300px}}@media (max-width : 500px){html{font-size:12.5px}.Header{flex-direction:column;gap:5px}.FirstSection,.Section.ListSection{width:90%;padding:2% 5%}.Section.ListSection .Head .Name{font-size:12.5px}.Section.ListSection .ContentEmpaty{height:250px}.FirstSection .RightSlider .Timer{width:250px;height:250px;font-size:25px}}.Section.Footer{width:85%;background-color:var(--MainColor);color:var(--BackgroundColor);margin:3% auto -1%;height:auto;padding:1% 5%;border-radius:2rem 2rem 0rem 0rem;display:grid;grid-template-rows:1fr;grid-template-columns:1fr 300px 225px;align-items:center}.Section.Footer h1{font-family:Head;color:var(--SpecialColor);font-size:45px}.Section.Footer .Resourse a{color:var(--SpecialColor)}.Section.Footer .Social{display:flex;align-items:center;gap:7.5px}.Section.Footer .Social a .fa-brands{color:var(--Color);font-size:22.5px}@media (max-width: 900px){.Section.Footer{grid-template-columns:1fr 300px;grid-template-rows:1fr 50px}.Section.Footer h1{font-size:30px}.Section.Footer .Social a .fa-brands{font-size:17.5px}}@media (max-width: 670px){.Section.Footer{font-size:12.5px}.Section.Footer h1{font-size:25px}.Section.Footer .Social a .fa-brands{font-size:17.5px}}@media (max-width: 500px){.Section.Footer{font-size:12.5px;grid-template-columns:1fr;text-align:center;grid-template-rows:auto auto auto}.Section.Footer h1{font-size:25px}.Section.Footer .Social{justify-content:center;width:100%}.Section.Footer .Social a .fa-brands{font-size:17.5px}}