@font-face {
    font-family: 'roboto-light';
    src: local('roboto-light'), url(../fonts/Roboto-Light.woff2) format('woff2');
    font-family: 'roboto-thin';
    src: local('roboto-thin'), url(../fonts/Roboto-Thin.woff2) format('woff2');
    font-family: 'roboto-bold';
    src: local('roboto-bold'), url(../fonts/Roboto-Bold.woff2) format('woff2');
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

ul[role=list],
ol[role=list] {
    list-style: none;
}

body {
    display: flex;
    align-items: center;
    min-width: 500px;
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

a,
a:hover,
a:focus,
a:active,
a:target,
a:link {
    text-decoration: none;
    color: inherit;
}

img,
picture {
    max-width: 100%;
    display: block;
}

.video-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.viewer {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 0;
}

iframe {
    position: absolute;
    top: -10%;
    width: 100vw;
    height: 117vh;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:root {
    --echarger: #667effff;
    --edouble: #667effff;
    --estorage: #ff558aff;
    --customer: #ff6b00ff;
    --installer: #667effff;
    --service: #a16141ff;
    --green-light: hsl(123deg, 47%, 74%);
    --green-dark: #2e7f32;
    --blue-light: hsl(210deg, 47%, 74%);
    --blue-dark: #2e577f;
    --orange-light: hsl(34, 100%, 71%);
    --orange-dark: #c26e01;
    --purple-light: hsl(231deg, 44%, 76%);
    --purple-dark: #334084;
    --yellow-light: hsl(54, 100%, 70%);
    --yellow-dark: #beab00;
    --brown-light: hsl(20deg, 41%, 69%);
    --brown-dark: #a16141;
    --red-light: hsl(0, 79%, 72%);
    --red-dark: #df3434;
    --pink-light: hsl(295deg, 42%, 72%);
    --pink-dark: #6e2f74;
    --white-light: hsl(0deg, 0%, 100%);
    --white-dark: #999999;
}

body {
    font-family: 'roboto-light', sans-serif;
    display: grid;
    min-height: 100vh;
    place-content: center;
    overflow: hidden;
    background-color: #0e1b35;
}

.orbit {
    --size: 17rem;
    --speed: 60s;
    z-index: 0;
}

.orbit .center-image {
    width: var(--size);
    position: absolute;

}

.orbit ul {
    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    position: relative;
    list-style: none;
    --icon-bg: var(--green-light);
    --text-bg: var(--green-dark);
    transform-origin: center;
    animation: orbit var(--speed) linear infinite;
}

.orbit ul:hover {
    animation-play-state: paused;
    --orbit-play-state: paused;
}

.orbit li {
    --icon-bg: pink;
    --text-bg: blue;
    position: absolute;
    /*width: 8rem;*/
    width: 9rem;
    aspect-ratio: 1/1;
    border-radius: 50%;
    font-weight: 500;
    color: var(--white-light);
    text-align: center;
    line-height: 1;
    display: grid;
    place-items: center;
}

.orbit li:hover {
    --throb-play-state: paused;
    cursor: pointer;
}

.orbit li:nth-child(1) {
    --throb-delay: 0ms;
}

.orbit li:nth-child(2) {
    --throb-delay: 500ms;
}

.orbit li:nth-child(3) {
    --throb-delay: 1000ms;
}

.orbit li:nth-child(4) {
    --throb-delay: 1500ms;
}

.orbit li:nth-child(5) {
    --throb-delay: 2000ms;
}

.orbit li:nth-child(6) {
    --throb-delay: 2500ms;
}

.orbit li>* {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    border-radius: inherit;
    position: absolute;
    animation: orbit var(--speed) linear reverse infinite, throb 1s var(--throb-delay) ease-in-out infinite alternate;
    animation-play-state: var(--orbit-play-state, running), var(--throb-play-state, running);
}

.orbit li>div {
    background-color: var(--icon-bg);
}

.orbit li>p {
    background: var(--text-bg);
    transition: opacity 500ms;
    opacity: 0;
}

.orbit li:hover>p {
    opacity: 1;
}

.orbit li:nth-child(1) {
    --icon-bg: var(--green-light);
    --text-bg: var(--echarger);
    transform: translate(10rem, -17rem);
}

.orbit li:nth-child(2) {
    --icon-bg: var(--red-light);
    --text-bg: var(--edouble);
    transform: translate(-10rem, -17rem);
}

.orbit li:nth-child(3) {
    --icon-bg: var(--yellow-light);
    --text-bg: var(--estorage);
    transform: translate(-20rem, 0rem);
}

.orbit li:nth-child(4) {
    --icon-bg: var(--orange-light);
    --text-bg: var(--customer);
    transform: translate(-10rem, 17rem);
}

.orbit li:nth-child(5) {
    --icon-bg: var(--purple-light);
    --text-bg: var(--installer);
    transform: translate(10rem, 17rem);
}

.orbit li:nth-child(6) {
    --icon-bg: var(--brown-light);
    --text-bg: var(--service);
    transform: translate(20rem, 0rem);
}

/*
.orbit li:nth-child(1) {
    --icon-bg: var(--green-light);
    --text-bg: var(--echarger);
    transform: translate(7rem, -13rem);
}

.orbit li:nth-child(2) {
    --icon-bg: var(--red-light);
    --text-bg: var(--edouble);
    transform: translate(-8rem, -13rem);
}

.orbit li:nth-child(3) {
    --icon-bg: var(--yellow-light);
    --text-bg: var(--estorage);
    transform: translate(-15rem, 0rem);
}

.orbit li:nth-child(4) {
    --icon-bg: var(--orange-light);
    --text-bg: var(--customer);
    transform: translate(-7rem, 13rem);
}

.orbit li:nth-child(5) {
    --icon-bg: var(--purple-light);
    --text-bg: var(--installer);
    transform: translate(7rem, 13rem);
}

.orbit li:nth-child(6) {
    --icon-bg: var(--brown-light);
    --text-bg: var(--service);
    transform: translate(15rem, 0rem);
}
*/

@keyframes orbit {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes hold-position {
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes throb {
    100% {
        scale: 1.05;
    }
}

#loading-overlay {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.950);
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 10;
    display: block;
    overflow-y: hidden;
    overflow-x: hidden;
}