#wellness-wheel{--size:350px;--item-size:80px;--offset:110px;--spoke-length:50px;--font-size:0.7rem;display:grid;grid-template-columns:1fr;gap:15px;margin:2rem auto;scroll-margin-block-start:200px;scroll-margin-block-end:200px;}@keyframes fade-in{0%{opacity:0;}80%{opacity:0;}100%{opacity:1;}}@media screen and (min-width:576px){#wellness-wheel{--size:500px;--item-size:100px;--offset:150px;--spoke-length:100px;--font-size:0.9rem;}}@media screen and (min-width:768px){#wellness-wheel{--size:600px;--item-size:120px;--offset:200px;--spoke-length:200px;--font-size:1.1rem;}}@media screen and (min-width:976px){#wellness-wheel{--size:800px;--item-size:170px;--offset:250px;--font-size:1.5rem;}}@media screen and (min-width:1200px){#wellness-wheel{grid-template-columns:1fr 1fr;margin:0;}}#wellness-wheel[data-expansion-state=closed]{grid-template-columns:1fr;}#wellness-wheel[data-expansion-state=closed] #tab-content{width:0;height:0;padding:0;transition:width 1s ease;}#wellness-wheel[data-expansion-state=open] #tab-content{height:100%;transition:height 1s ease;}@media screen and (min-width:1200px){#wellness-wheel[data-expansion-state=open] #tab-content{transition:width 1s ease;max-height:var(--size);}}#wellness-wheel #wheel{--hover-item-size:calc(var(--item-size) * 1.1);aspect-ratio:1;position:relative;width:var(--size);height:var(--size);overflow:hidden;display:flex;align-items:center;justify-content:center;margin:1rem auto;font-family:"rajdhani",sans-serif;}#wellness-wheel #wheel ul{display:block;width:100%;height:100%;padding:0;margin:0;transform-origin:center;position:absolute;display:flex;justify-content:center;align-items:center;}#wellness-wheel #wheel ul .wheel-item{width:0px;height:0px;aspect-ratio:1;border-radius:50%;position:absolute;transition:transform 1.5s;display:flex;justify-content:center;align-items:center;transform-origin:center;overflow:visible;margin:0;cursor:pointer;}#wellness-wheel #wheel ul .wheel-item:hover,#wellness-wheel #wheel ul .wheel-item:focus{width:var(--hover-item-size);height:var(--hover-item-size);}#wellness-wheel #wheel ul .wheel-item span{color:white;text-decoration:none;font-size:var(--font-size);font-weight:bold;width:var(--item-size);height:var(--item-size);display:flex;justify-content:center;align-items:center;position:relative;z-index:2;background-color:inherit;border-radius:50%;}#wellness-wheel #wheel ul .wheel-item span:hover{width:var(--hover-item-size);height:var(--hover-item-size);}#wellness-wheel #wheel ul .wheel-item .spoke{width:3px;height:calc(var(--spoke-length) * 1.5);background-color:black;position:absolute;top:50%;transform-origin:top;z-index:1;opacity:0;}#wellness-wheel #wheel.open .wheel-item{width:var(--item-size);height:var(--item-size);transform:translate(calc(cos(var(--degrees)) * var(--offset)),calc(sin(var(--degrees)) * var(--offset)));}#wellness-wheel #wheel.open .wheel-item .spoke{opacity:1;animation:fade-in 1.5s;}#wellness-wheel #wheel #center{width:var(--item-size);aspect-ratio:1;border-radius:50%;background-color:var(--color-uvu-primary);color:white;border:3px solid black;transition:transform 1.5s;display:flex;justify-content:center;align-items:center;z-index:10;font-size:calc(var(--font-size) * 1.5);font-weight:600;}#wellness-wheel #wheel .wheel-item:nth-of-type(1){--degrees:calc(0 * (360deg / 8));}#wellness-wheel #wheel .wheel-item:nth-of-type(1) .spoke{transform:rotate(calc(90deg + var(--degrees)));}#wellness-wheel #wheel .wheel-item:nth-of-type(2){--degrees:calc(1 * (360deg / 8));}#wellness-wheel #wheel .wheel-item:nth-of-type(2) .spoke{transform:rotate(calc(90deg + var(--degrees)));}#wellness-wheel #wheel .wheel-item:nth-of-type(3){--degrees:calc(2 * (360deg / 8));}#wellness-wheel #wheel .wheel-item:nth-of-type(3) .spoke{transform:rotate(calc(90deg + var(--degrees)));}#wellness-wheel #wheel .wheel-item:nth-of-type(4){--degrees:calc(3 * (360deg / 8));}#wellness-wheel #wheel .wheel-item:nth-of-type(4) .spoke{transform:rotate(calc(90deg + var(--degrees)));}#wellness-wheel #wheel .wheel-item:nth-of-type(5){--degrees:calc(4 * (360deg / 8));}#wellness-wheel #wheel .wheel-item:nth-of-type(5) .spoke{transform:rotate(calc(90deg + var(--degrees)));}#wellness-wheel #wheel .wheel-item:nth-of-type(6){--degrees:calc(5 * (360deg / 8));}#wellness-wheel #wheel .wheel-item:nth-of-type(6) .spoke{transform:rotate(calc(90deg + var(--degrees)));}#wellness-wheel #wheel .wheel-item:nth-of-type(7){--degrees:calc(6 * (360deg / 8));}#wellness-wheel #wheel .wheel-item:nth-of-type(7) .spoke{transform:rotate(calc(90deg + var(--degrees)));}#wellness-wheel #wheel .wheel-item:nth-of-type(8){--degrees:calc(7 * (360deg / 8));}#wellness-wheel #wheel .wheel-item:nth-of-type(8) .spoke{transform:rotate(calc(90deg + var(--degrees)));}#wellness-wheel #tab-content{display:flex;flex-direction:column;overflow:hidden;background-color:white;color:black;box-shadow:0 2px 5px rgba(0,0,0,0.2);border-radius:8px;width:90%;max-height:800px;margin-right:auto;margin-left:auto;padding:1rem;transition:width 1.5s ease;scroll-margin-block-start:400px;scroll-margin-block-end:200px;}@media screen and (min-width:1024px){#wellness-wheel #tab-content{width:90%;}}#wellness-wheel #tab-content:focus{outline:dotted 2px black;}#wellness-wheel #tab-content .content{display:none;padding:0rem 4rem 2rem 4rem;max-height:calc(100% - 0px);overflow-y:auto;}#wellness-wheel #tab-content .content.active{display:block;}#wellness-wheel #tab-content .close{color:black;padding:0.5rem;font-size:1rem;cursor:pointer;align-self:end;border:none;background-color:transparent;}#wellness-wheel #tab-content .title{margin:25px 0;text-align:left;font-size:1.75em;font-weight:900;font-family:"rajdhani",sans-serif;color:var(--color-uvu-primary);}#wellness-wheel #tab-content .description{margin:0;font-size:1.2rem;}#wellness-wheel #tab-content .wellness-resources{font-size:1.25em;font-weight:900;font-family:"rajdhani",sans-serif;color:var(--color-uvu-primary);}#wellness-wheel #tab-content .resources{list-style-type:none;margin:0;}#wellness-wheel #tab-content .resources li{text-align:left;width:100%;padding-inline-start:1em;color:var(--color-uvu-primary);}#wellness-wheel #tab-content .resources li::marker{font-family:"Font Awesome 5 Solid","Font Awesome 5 Pro";content:"\f054";font-size:16px;font-weight:300;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;padding-inline-end:1em;margin-left:-1.5em;color:var(--color-uvu-primary);}