:root{--color-purple-600: hsl(246, 80%, 60%);--color-orange-300: hsl(15, 100%, 70%);--color-blue-300: hsl(195, 74%, 62%);--color-pink-400: hsl(348, 100%, 68%);--color-green-400: hsl(145, 58%, 55%);--color-purple-700: hsl(264, 64%, 52%);--color-yellow-300: hsl(43, 84%, 65%);--color-navy-950: hsl(226, 43%, 10%);--color-navy-900: hsl(235, 46%, 20%);--color-navy-800: hsl(235, 41%, 34%);--color-purple-500: hsl(235, 45%, 61%);--color-navy-200: hsl(236, 100%, 87%);--color-grey-200: #D8D8D8;--font-size-body: 16px;--font-family: "Rubik", sans-serif;--spacing-500: 40px;--spacing-400: 32px;--spacing-300: 24px;--spacing-200: 16px;--spacing-100: 8px;--spacing-0: 0px}*{margin:0 auto;padding:0;box-sizing:border-box}.text-preset-1{font-weight:300;font-size:3.5rem;line-height:4.125rem;letter-spacing:0%}.text-preset-2{font-weight:300;font-size:2.5rem;line-height:2.9375rem;letter-spacing:0%}.text-preset-3{font-weight:300;font-size:2rem;line-height:2.375rem;letter-spacing:0%}.text-preset-4{font-weight:300;font-size:1.5rem;line-height:1.75rem;letter-spacing:0%}.text-preset-5-medium{font-weight:500;font-size:1.125rem;line-height:1.3125rem;letter-spacing:0%}.text-preset-5-regular{font-weight:400;font-size:1.125rem;line-height:1.3125rem;letter-spacing:0%}.text-preset-6-regular{font-weight:400;font-size:.9375rem;line-height:1.125rem;letter-spacing:0%}body{font-family:var(--font-family);font-size:var(--font-size-body);color:var(--color-navy-200);background-color:var(--color-navy-950);display:block;margin:var(--spacing-500) auto}.dashboard{width:69.75rem;height:32.5rem;display:grid;place-items:center;grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--spacing-400)}.main-card{grid-column:1 / 2;grid-row:1 / 3;width:16rem;height:34rem;border-radius:1.55rem;background-color:var(--color-navy-900)}.card{width:16rem;height:15.25rem;border-radius:1.55rem;background-color:var(--color-navy-900)}.card-content{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:var(--spacing-100);width:100%;height:22.125rem;background-color:var(--color-purple-600);border-radius:1.55rem;padding:var(--spacing-400) var(--spacing-400);margin:0}.card-content img{width:5rem;height:5rem;border:2px solid white;border-radius:50%;display:block;margin-left:0;margin-bottom:var(--spacing-500)}.card-content p{color:var(--color-navy-200);margin-left:0}.card-content h1{color:#fff}.button-container{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;width:100%;margin:var(--spacing-200) auto var(--spacing-200) var(--spacing-200);padding-left:0}.button-container button{text-align:left;background-color:var(--color-navy-900);color:var(--color-navy-200);border:none;margin:var(--spacing-100) var(--spacing-300)}.button-container button:active{background-color:var(--color-purple-900);color:#fff}.button-container button:hover{background-color:var(--color-purple-900);color:#fff;cursor:pointer}#card-1{grid-column:2 / 3;grid-row:1 / 2}#card-2{grid-column:3 / 4;grid-row:1 / 2}#card-3{grid-column:4 / 5;grid-row:1 / 2}#card-4{grid-column:2 / 3;grid-row:2 / 3}#card-5{grid-column:3 / 4;grid-row:2 / 3}#card-6{grid-column:4 / 5;grid-row:2 / 3}.card-1-header,.card-2-header,.card-3-header,.card-4-header,.card-5-header,.card-6-header{width:100%;height:5rem;display:flex;align-items:center;justify-content:center;color:var(--color-navy-200);border-radius:25px 25px 0 0;z-index:1}.card-1-header{background-color:var(--color-orange-300);overflow:hidden}.card-2-header{background-color:var(--color-blue-300);overflow:hidden}.card-3-header{background-color:var(--color-pink-400);overflow:hidden}.card-4-header{background-color:var(--color-green-400);overflow:hidden}.card-5-header{background-color:var(--color-purple-700);overflow:hidden}.card-6-header{background-color:var(--color-yellow-300);overflow:hidden}.card-1-header img,.card-2-header img,.card-3-header img,.card-4-header img,.card-5-header img,.card-6-header img{position:relative;top:-1rem;right:.625rem;width:3.125rem;height:3.125rem;margin-right:var(--spacing-100)}.text-content{height:12.75rem;position:relative;top:-1.875rem;border-radius:1.55rem;background-color:var(--color-navy-900);color:#fff;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--spacing-200)}.text-content:hover{background-color:var(--color-navy-800);color:#fff}.content-title{display:flex;flex-direction:row;justify-content:space-between;width:80%;align-items:center}.content-title h2,.text-content p{text-align:left;width:80%}@media screen and (max-width: 64rem){.dashboard{max-width:96vw;min-width:40rem;height:fit-content;width:96vw;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr;margin:var(--spacing-200) auto;gap:var(--spacing-300)}.main-card{width:100%;grid-column:1 / 4;grid-row:1 / 2;height:fit-content}.card-content{width:100%;height:13.25rem;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--spacing-200);padding:var(--spacing-400);margin-left:0}.card-content img{margin:1.25rem;align-self:center;width:4.25rem;height:4.25rem;display:block}.person-name{margin-left:var(--spacing-200);width:auto;height:auto;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.card{width:100%;min-width:11.75rem;height:fit-content}.card:hover{background-color:var(--color-navy-800);color:#fff}#card-1{grid-column:1 / 2;grid-row:2 / 3}#card-2{grid-column:2 / 3;grid-row:2 / 3}#card-3{grid-column:3 / 4;grid-row:2 / 3}#card-4{grid-column:1 / 2;grid-row:3 / 4}#card-5{grid-column:2 / 3;grid-row:3 / 4}#card-6{grid-column:3 / 4;grid-row:3 / 4}.button-container{width:90%;margin:var(--spacing-200) var(--spacing-400);padding:0 var(--spacing-200);flex-direction:row}}@media screen and (max-width: 40rem){.dashboard{max-width:38rem;width:96%;height:fit-content;margin:var(--spacing-100) auto;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--spacing-300)}.main-card{width:20.25rem;height:auto}.card-content{gap:var(--spacing-100);padding:var(--spacing-400)}.card-content img{width:5rem;height:5rem;margin:0 .5rem}.person-name{width:100%;height:auto}.card-content h1{font-weight:300;font-size:1.5rem;line-height:1.75rem;letter-spacing:0%}.card{width:20.25rem;height:auto}.card-content:hover{background-color:var(--color-navy-800);color:#fff}.button-container{width:20.25rem;margin:var(--spacing-100) auto;padding:0;flex-direction:row;justify-content:space-evenly;gap:var(--spacing-100)}}