header{width:100%;height:5rem}nav{height:100%;margin-right:10rem}main{grid-template-rows:repeat(2,1fr);grid-template-columns:repeat(4,1fr);align-items:center;width:100%;height:calc(100vh - 5rem);display:grid;position:relative;overflow-x:clip}.hero{flex-direction:column;grid-area:1/1/3/3;align-self:center;gap:1.5rem;width:fit-content;margin-left:clamp(1.5rem,5vw,6rem);display:flex}.hero__title{font-family:Saira;font-size:clamp(2rem,.491rem + 2.716vw,3.75rem);font-weight:400}.hero__title_emphasise{color:var(--color-primary)}.hero__text{color:rgb(from var(--color-text) r g b / .7);text-wrap:balance;font-size:clamp(1rem,.838rem + .864vw,1.875rem)}.cards__container{flex-direction:column;grid-area:1/3/3/4;justify-content:center;align-self:center;align-items:center;gap:4rem;height:80%;display:flex}.incoming{background-color:var(--color-white);z-index:1;border-radius:.3rem;flex-direction:column;gap:1.5rem;width:min(350px,100%);padding:1.4rem 2rem;display:flex;box-shadow:6px 9px 20px #0d132180}.incoming__title{justify-content:space-between;align-items:center;display:flex}.incoming__icon{background-color:rgb(from var(--color-primary) r g b / .2);border-radius:.3rem;justify-content:center;align-items:center;padding:.2rem;display:flex}.incoming__time{color:rgb(from var(--color-text) r g b / .7)}.loading{background-color:var(--color-white);z-index:1;border-radius:4rem;justify-content:center;align-items:center;gap:1rem;width:min(250px,100%);padding:.7rem;display:flex;position:relative;box-shadow:6px 9px 20px #0d132180}.loading:before,.loading:after{content:"";background-color:var(--color-primary);width:50px;height:3.5rem;position:absolute;left:50%;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40'%3E%3Cpath d='M5 8V40' stroke='black' stroke-width='1.2' stroke-dasharray='3 3' fill='none'/%3E%3Cpath d='M1 8L5 2L9 8' stroke='black' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40'%3E%3Cpath d='M5 8V40' stroke='black' stroke-width='1.2' stroke-dasharray='3 3' fill='none'/%3E%3Cpath d='M1 8L5 2L9 8' stroke='black' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 50%/contain no-repeat}.loading:before{bottom:calc(100% + .25rem);transform:translate(-50%)}.loading:after{top:calc(100% + .25rem);transform:translate(-50%)rotate(180deg)}.loading__image{width:30px}.loading__text{color:var(--color-primary);font-family:Saira;font-weight:700}.categories{background-color:var(--color-white);z-index:1;border-radius:.3rem;flex-direction:column;justify-content:center;align-items:center;gap:1rem;width:min(250px,100%);padding:2rem 1rem;display:flex;box-shadow:6px 9px 20px #0d132180}.categories__item{grid-template-columns:2.5rem 1fr;align-items:center;column-gap:1rem;width:75%;display:grid}.icon__background{border-radius:.3rem;justify-content:space-between;align-items:center;padding:.2rem;display:flex}.icon__background[data-variant=blue]{background-color:rgb(from var(--color-primary) r g b / .2)}.icon__background[data-variant=red]{background-color:rgb(from var(--color-red) r g b / .2)}.icon__background[data-variant=green]{background-color:rgb(from var(--color-green) r g b / .2)}.icon{width:30px}.categories__text{flex-direction:column;align-items:start;gap:.2rem;display:flex}.category__type{color:rgb(from var(--color-text) r g b / .7);font-size:14px}.category__result{text-transform:uppercase}.list{background-color:rgb(from var(--color-white) r g b / .5);z-index:1;border-radius:.3rem;flex-direction:column;grid-area:1/4/3/5;gap:1rem;width:clamp(12.5rem,10.185rem + 12.346vw,25rem);padding:2rem 1rem;display:flex;transform:rotate(13deg);box-shadow:6px 9px 20px #0d132180}.list__item{background-color:var(--color-white);border-radius:.3rem;justify-content:space-between;align-items:center;padding:1rem;display:flex}.item__content{flex-direction:column;gap:1rem;display:flex}.item__type{background-color:var(--color-primary);color:var(--color-white);border-radius:1rem;width:fit-content;padding:.2rem 1rem}.item__priority{text-transform:uppercase}.item__priority[data-variant=red]{color:var(--color-red)}.item__priority[data-variant=yellow]{color:var(--color-yellow)}.item__priority[data-variant=green]{color:var(--color-green)}.big-circle{aspect-ratio:1;background-color:rgb(from var(--color-primary) r g b / .1);border-radius:100%;width:clamp(12.5rem,7.87rem + 24.691vw,37.5rem);height:clamp(12.5rem,7.87rem + 24.691vw,37.5rem);position:absolute;top:5rem;right:10rem}.small-circle{aspect-ratio:1;background-color:rgb(from var(--color-primary) r g b / .5);border-radius:100%;width:clamp(1.25rem,1.019rem + 1.235vw,2.5rem);height:clamp(1.25rem,1.019rem + 1.235vw,2.5rem);position:absolute}.small-circle.one{top:5rem;right:5rem}.small-circle.two{bottom:10rem;left:50rem}@media (width<=1450px){main{grid-template-rows:auto auto;grid-template-columns:repeat(2,1fr);row-gap:3rem;padding-block:3rem}.hero{text-align:center;grid-area:auto/1/auto/-1;align-items:center;width:auto;margin-inline:2rem}.cards__container{grid-area:2/1;gap:2rem;height:auto}.list{grid-area:2/2;justify-self:center;width:75%;transform:rotate(0)}.loading:after,.loading:before{height:1.5rem}.small-circle.two{left:10%}}@media (width<=700px){nav{margin-right:0}main{grid-template-columns:1fr}.hero,.cards__container,.list{grid-area:auto/1}.hero{margin-inline:1.5rem}.list{justify-self:center;width:calc(80% - 3rem);transform:none}.big-circle{top:35%;right:2rem}}@media (width<=500px){.big-circle,.small-circle.one,.small-circle.two{display:none}.item__content p{font-size:12px}.incoming{width:min(300px,85%)}}:root{--color-background:#d9d9d9;--color-primary:#3b92f6;--color-text:#0d1321;--color-green:#60ab9a;--color-red:#d1495b;--color-yellow:#faa916;--color-white:#fff}*,:before,:after{box-sizing:border-box}html,body{background:var(--color-background);height:100%;color:var(--color-text);-webkit-font-smoothing:antialiased;margin:0;font-family:Montserrat,sans-serif;font-weight:400}a{color:var(--color-text);text-decoration:none}h1,h2,h3,p,main{margin:0;padding:0}@font-face{font-family:Saira;src:url(/fonts/Saira-Regular.ttf)format("truetype");font-weight:400;font-style:normal}@font-face{font-family:Saira;src:url(/fonts/Saira-Bold.ttf)format("truetype");font-weight:700;font-style:normal}@font-face{font-family:Montserrat;src:url(/fonts/Montserrat-Medium.ttf)format("truetype");font-weight:500;font-style:normal}@font-face{font-family:Montserrat;src:url(/fonts/Montserrat-Regular.ttf)format("truetype");font-weight:400;font-style:normal}