body {
    transition-duration: 0.5s;
}
body:has(#nav-option-wrapper:hover) {
    background-color: #f2ede8;
    transition-duration: 0.5s;
}

nav {
    border-radius: 50%;

    width: 300px;
    aspect-ratio: 1;

    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.25s;
}

#nav-option-wrapper
{
    position: absolute;
    width:300px;
    aspect-ratio: 1;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;
}
#nav-option-wrapper:hover > * {
    transition-duration: 0.5s;
}

#nav-message {
    position: relative;
    z-index: 10;
    color: white;
    mix-blend-mode: normal;
    cursor:default;
}

#nav-option-wrapper:hover #nav-message {
    color: rgba(0, 0, 0, 0);
    transition-duration: 0.5s;
}

.nav-option, .nav-option-bg {
    position: absolute;
    width: 300px;
    aspect-ratio: 1;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: 0.5s;
}

.nav-option {
    opacity: 0.5;

    mix-blend-mode:multiply;
    z-index: 1;
    transition-duration: 0.5s;

    color: rgba(0, 0, 0, 0);
    cursor: pointer;
}
.nav-option-bg {
    background-color: rgb(255, 255, 255, 255);
    box-shadow: 0 0 30px -10px rgb(197, 197, 197) ;
    z-index: -1;
}
#nav-option-wrapper:hover .nav-option {
    color: black;
}


.nav-option:nth-child(1), .nav-option-bg:nth-child(1 of .nav-option-bg)
{
    border-radius: 53% 47% 53% 47%;
    transition-delay: 0.2s;
    /* transition-property: transform; */
    transform:
        translateX(calc(7px * sin(0 * pi / 3)))
        translateY(calc(7px * cos(0 * pi / 3)))
        rotate(0deg);
}
#nav-option-wrapper:hover > .nav-option:nth-child(1), #nav-option-wrapper:hover > .nav-option-bg:nth-child(1 of .nav-option-bg)
{
    transition-delay: 0s;
    transform:
        translateX(calc(250px * sin(0 * pi / 3)))
        translateY(calc(250px * cos(0 * pi / 3)))
        rotate(180deg);
}
.nav-option:nth-child(1) {
    background-color: #d70071;
}
.nav-option:nth-child(1) > p{
    transform: rotate(-180deg);
}
body:has(#nav-option-wrapper:hover):has(.nav-option:nth-child(1):hover) {
    background-color: #fde8ed;
}

.nav-option:nth-child(2), .nav-option-bg:nth-child(2 of .nav-option-bg)
{
    border-radius: 53% 47% 53% 47%;
    transition-delay: 0.15s;
    transform:
        translateX(calc(7px * sin(1 * pi / 3)))
        translateY(calc(7px * cos(1 * pi / 3)))
        rotate(60deg);
}
#nav-option-wrapper:hover > .nav-option:nth-child(2), #nav-option-wrapper:hover > .nav-option-bg:nth-child(2 of .nav-option-bg)
{
    transition-delay: 0.05s;
    transform:
        translateX(calc(250px * sin(1 * pi / 3)))
        translateY(calc(250px * cos(1 * pi / 3)))
        rotate(240deg);
}
.nav-option:nth-child(2) {
    background-color: #9626ff;
}
.nav-option:nth-child(2) > p{
    transform: rotate(-240deg);
}
body:has(#nav-option-wrapper:hover):has(.nav-option:nth-child(2):hover) {
    background-color: #f0ebfc;
}

.nav-option:nth-child(3), .nav-option-bg:nth-child(3 of .nav-option-bg)
{
    border-radius: 53% 47% 53% 47%;
    transition-delay: 0.15s;
    transform:
        translateX(calc(7px * sin(5 * pi / 3)))
        translateY(calc(7px * cos(5 * pi / 3)))
        rotate(120deg);
}
#nav-option-wrapper:hover > .nav-option:nth-child(3), #nav-option-wrapper:hover > .nav-option-bg:nth-child(3 of .nav-option-bg)
{
    transition-delay: 0.05s;
    transform:
        translateX(calc(250px * sin(5 * pi / 3)))
        translateY(calc(250px * cos(5 * pi / 3)))
        rotate(-60deg);
}
.nav-option:nth-child(3) {
    background-color: #af6000;
}
.nav-option:nth-child(3) > p{
    transform: rotate(60deg);
}
body:has(#nav-option-wrapper:hover):has(.nav-option:nth-child(3):hover) {
    background-color: #fbebde;
}

.nav-option:nth-child(4), .nav-option-bg:nth-child(4 of .nav-option-bg)
{
    border-radius: 53% 47% 53% 47%;
    transition-delay: 0.05s;
    transform:
        translateX(calc(7px * sin(2 * pi / 3)))
        translateY(calc(7px * cos(2 * pi / 3)))
        rotate(180deg);
}
#nav-option-wrapper:hover > .nav-option:nth-child(4), #nav-option-wrapper:hover > .nav-option-bg:nth-child(4 of .nav-option-bg)
{
    transition-delay: 0.1s;
    transform:
        translateX(calc(250px * sin(2 * pi / 3)))
        translateY(calc(250px * cos(2 * pi / 3)))
        rotate(360deg);
}
.nav-option:nth-child(4) {
    background-color: #007fbc;
}
.nav-option:nth-child(4) > p{
    transform: rotate(-360deg);
}
body:has(#nav-option-wrapper:hover):has(.nav-option:nth-child(4):hover) {
    background-color: #e0f1fd;
}

.nav-option:nth-child(5), .nav-option-bg:nth-child(5 of .nav-option-bg)
{
    border-radius: 53% 47% 53% 47%;
    transition-delay: 0.05s;
    transform:
        translateX(calc(7px * sin(4 * pi / 3)))
        translateY(calc(7px * cos(4 * pi / 3)))
        rotate(240deg);
}
#nav-option-wrapper:hover > .nav-option:nth-child(5), #nav-option-wrapper:hover > .nav-option-bg:nth-child(5 of .nav-option-bg)
{
    transition-delay: 0.1s;
    transform:
        translateX(calc(250px * sin(4 * pi / 3)))
        translateY(calc(250px * cos(4 * pi / 3)))
        rotate(60deg);
}
.nav-option:nth-child(5) {
    background-color: #6d8200;
}
.nav-option:nth-child(5) > p{
    transform: rotate(-60deg);
}
body:has(#nav-option-wrapper:hover):has(.nav-option:nth-child(5):hover) {
    background-color: #ecf1df;
}

.nav-option:nth-child(6), .nav-option-bg:nth-child(6 of .nav-option-bg)
{
    border-radius: 53% 47% 53% 47%;
    transition-delay: 0.0s;
    transform:
        translateX(calc(7px * sin(3 * pi / 3)))
        translateY(calc(7px * cos(3 * pi / 3)))
        rotate(300deg);
}
#nav-option-wrapper:hover > .nav-option:nth-child(6), #nav-option-wrapper:hover > .nav-option-bg:nth-child(6 of .nav-option-bg) 
{
    transition-delay: 0.15s;
    transform:
        translateX(calc(250px * sin(3 * pi / 3)))
        translateY(calc(250px * cos(3 * pi / 3)))
        rotate(480deg);
}
.nav-option:nth-child(6) {
    background-color: #008b79;
}
.nav-option:nth-child(6) > p {
    transform: rotate(-480deg);
}
body:has(#nav-option-wrapper:hover):has(.nav-option:nth-child(6):hover) {
    background-color: #def4ee;
}