html {

box-sizing: border-box;
--bgColorMenu : #1d1d27;
--duration: .7s;

}

html *,
html *::before,
html *::after {

box-sizing: inherit;

}

body{

margin: 0;
padding: 0;
background-color: var(--bgColorMenu);
transition: background-color var(--duration);

}

html, body {
width: 100%;
height: 100%;
}

iframe {
scrollbar-width: none;
-ms-overflow-style: none; 
}
  
iframe::-webkit-scrollbar {
display: none;

}

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 98%;
border: none;
margin: 0 auto;
background-color: var(--bgColorMenu);
overflow: hidden;

}

.view {
width: 100%;
height: 100%;
border: none;
border-radius: .5em;
background-color: var(--bgColorMenu);
transition: transform var(--duration);

}

.menu{

margin: 0;
width: 28.5em;;
display: flex;
/* Works well with 100% width */
font-size: 1.5em;
padding: 0 2.85em;
position: relative;
align-items: center;
justify-content: center;
background-color: var(--bgColorMenu);

}

.menu__item{

all: unset;
flex-grow: 1;
z-index: 100;
display: flex;
cursor: pointer;
position: relative;
border-radius: 50%;
align-items: center;
will-change: transform;
justify-content: center;
padding: 0.55em 0 0.85em;
transition: transform var(--timeOut , var(--duration));

}

.menu__item::before{

content: "";
z-index: -1;
width: 4.2em;
height: 4.2em;
border-radius: 50%;
position: absolute;
transform: scale(0);
transition: background-color var(--duration), transform var(--duration);

}


.menu__item.active {

transform: translate3d(0, -.8em , 0);

}

.menu__item.active::before{

transform: scale(1);
background-color: var(--bgColorItem);

}

.icon{

width: 2.6em;
height: 2.6em;
stroke: #ffffff;
    fill: transparent;
    stroke-width: 1pt;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;

    }

.menu__item.active .icon {

animation: strok 1.5s reverse;

}

@keyframes strok {

100% {

stroke-dashoffset: 400;

}

}

.menu__border{

left: 0;
bottom: 99%;
width: 10.9em;
height: 2.4em;
position: absolute;
clip-path: url(#menu);
will-change: transform;
background-color: var(--bgColorMenu);
transition: transform var(--timeOut , var(--duration));

}

.svg-container {

width: 0;
height: 0;
}


@media screen and (max-width: 50em) {
.menu{
font-size: .8em;
}
}

@media (prefers-color-scheme: dark) {
body {
background-color: #1d1d27;
    color: #ce0000;
}
}

@media (prefers-color-scheme: dark) {
.statusbar {
background-color: #1d1d27;
    color: #ce0000;
}
}