:root {
	--menu-color: #03f4e1;
	--global-inclinaison: 30;
	--solar-system-inclinaison: calc(90deg - (1deg * var(--global-inclinaison)));
	--time-factor: 50;
	--factor:1;
	--zoom-factor:1;
	--distance-factor: calc(0.015 / var(--factor));
	--size-factor: calc(var(--distance-factor) * 10);
	--real-size-factor:0.0000001;
	--real-distance-factor:0.0000001;
}

@font-face {
  font-family: futur;
  src: url(./CANAVAR.ttf);
}

* {
	user-select: none!important;
}

body {
	overflow: hidden;
	font-size: 10px;
	font-family: 'futur';
	color:#fff;
	background: #001b30 url('./space.jpg') no-repeat center center;
	background-size: cover;
	padding: 0;
	margin: 0;
	height: 100vh;
	width: 100vw;
}

.glass-block {
	padding: 10px;
	border-radius: 6px;
	background: linear-gradient(45deg, #001a2f91, #00618b6e);
	box-shadow: inset 0 0 5px 1px var(--menu-color);
	width: -webkit-fill-available;
	position: relative;
}

.all {
	bottom: 10px;
	width: 210px;
	position: absolute;
	left: 10px;
	top: 10px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 20px;
}

.main {
	display: flex;
	flex-direction: column;
}

.planet-list {
	padding-inline-start: 2em;
	list-style: square;
}

.planet-list li::marker {
    color: var(--menu-color);
}

.command  {
    display: flex;
    font-size: 10px;
    flex-direction: column;
    gap: 15px;
    color: var(--menu-color);
 }

.command .command-widget {
    display: flex;
    flex-direction: column;
}

.index {
    color: var(--menu-color);
    cursor: help;
    padding: .2em .5em;
    z-index: 10;
    position: relative;
}

.index:hover {
    color: #00101d;
    background: #03f4e1;
    border-radius: 2px;
    font-weight: 600;
}

.css-highlight {
}

.index.title {
	font-size: 1.5em;
	z-index: 10;
	padding-bottom: .5em;
}


.index.title .css-highlight {
    margin: 4px 0 0 0;
}

.index.title .css-highlight:first-letter {
    border-radius: 3px;
    padding: 0 .2em;
	border:1px solid var(--menu-color);
	border-radius:2px;
}

.index.title:hover .css-highlight:first-letter {
	border-color:#000000;
}

.info {
    color: #fff;
    font-size: 14px;
    font-family: 'futur';
    font-size: 12px;
    font-family: system-ui;
    text-align: center;
}

a {
    color: #fff!important;
    text-decoration: none;
    font-family: system-ui;
    font-size: 15px;
	padding:0 .5em;
}

a:hover {
    color: #00101d!important;
    background: #03f4e1;
    border-radius: 2px;
}

.logo {
    height: 1em;
    top: .15em;
    position: relative;
}

.title:hover ~ ul .solar-system .ao-group .ao-body:after,
.sun-label:hover ~ .solar-system .ao-group.sun .ao-body:after,
.mercury-label:hover ~ .solar-system .ao-group.mercury .ao-body:after,
.venus-label:hover ~ .solar-system .ao-group.venus .ao-body:after,
.earth-label:hover ~ .solar-system .ao-group.earth .ao-body:after,
.mars-label:hover ~ .solar-system .ao-group.mars .ao-body:after,
.jupiter-label:hover ~ .solar-system .ao-group.jupiter .ao-body:after,
.saturn-label:hover ~ .solar-system .ao-group.saturn .ao-body:after,
.uranus-label:hover ~ .solar-system .ao-group.uranus .ao-body:after,
.neptune-label:hover ~ .solar-system .ao-group.neptune .ao-body:after {
	opacity:1;
}


.mercury-label:hover ~ .solar-system .ao-group.mercury .ao-orbit,
.venus-label:hover ~ .solar-system .ao-group.venus .ao-orbit,
.earth-label:hover ~ .solar-system .ao-group.earth .ao-orbit,
.mars-label:hover ~ .solar-system .ao-group.mars .ao-orbit,
.jupiter-label:hover ~ .solar-system .ao-group.jupiter .ao-orbit,
.saturn-label:hover ~ .solar-system .ao-group.saturn .ao-orbit,
.uranus-label:hover ~ .solar-system .ao-group.uranus .ao-orbit,
.neptune-label:hover ~ .solar-system .ao-group.neptune .ao-orbit {
    opacity: 1;
    box-shadow: inset 0px 0px 1px 3px var(--menu-color);
}

.solar-system {
	position: fixed;
	top: 50%;
	left: calc(50% + 90px);
	transform: rotateX(var(--solar-system-inclinaison));
	transform-style: preserve-3d;
	zoom:var(--zoom-factor);
	z-index: -1;
}

.ao-group {
	--aogp: calc(1s * var(--ao-group-period) / var(--time-factor));
	--aogs: calc(1px * var(--ao-group-size) / var(--size-factor));
	--aogd: calc(1px * var(--ao-group-distance) / var(--distance-factor));
	display: inline-block;
	width: 0;
	height: 0;
	position: absolute;
	right: 0;
	top: 0;
	transform-style: preserve-3d;
	animation: orbitation var(--aogp) infinite linear;
}

.ao-group .ao-orbit {
    content: "";
    opacity: .3;
    display: inline-block;
    width: calc(2* var(--aogd));
    height: calc(2* var(--aogd));
    position: absolute;
    right: calc(-1* var(--aogd));
    top: calc(-1* var(--aogd));
    border-radius: 100%;
    box-shadow: inset 2px -1px 2px 0px #fff;
}

.ao-group .ao-body {
    content: "";
    display: block;
    border-radius: 100%;
    width: var(--aogs);
    height: var(--aogs);
    position: absolute;
    right: calc(var(--aogd) - (var(--aogs) / 2) - 1px);
    top: calc(50% - (var(--aogs) / 2));
    transform-style: preserve-3d;
    background: var(--ao-group-color);
    animation: orbitation-fix var(--aogp) infinite linear;
    /* animation-timing-function: linear( 0 0%, 0 24.99%, 0.25 25%, 0.25 49.99%, 0.5 50%, 0.75 75%, 1 100%); */
}

.ao-lighting {
    content: "";
    display: inline-block;
    width: var(--aogs);
    height: var(--aogs);
    position: relative;
    border-radius: 100%;
    animation: ao-rotation var(--aogp) infinite linear;
    overflow:hidden;
    background: var(--ao-group-color);
    --x: calc(0.25 *((90 - var(--global-inclinaison)) / 90));
    --y: calc(25% *((90 - var(--global-inclinaison)) / 90));
    animation-timing-function: linear(
          0% 0,
          calc(var(--y)) calc(0.25 - var(--x)),
          25% 0.25,
          calc(50% - var(--y)) calc(0.25 + var(--x)),
          50% 0.5,
          calc(50% + var(--y)) calc(0.75 - var(--x)),
          75% 0.75,
          calc(100% - var(--y)) calc(0.75 + var(--x)),
          100% 1
         );
    /* animation-timing-function: linear(
										0% 0,
										25% 0,
										25% 0.5,
										50% 0.5,
										75% 0.5,
										75% 1,
										100% 1
									); */
 }
	
.ao-lighting:before {
	content:"";
	display: inline-block;
	width:100%;
	height:100%;
	position: absolute;
	background: #00000042;
	animation: lighting-shadow var(--aogp) infinite linear, lighting-z var(--aogp) infinite linear;
	z-index: -1;
}

.ao-lighting:after {
	content:"";
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	background: var(--ao-group-color);
	animation: lighting-light var(--aogp) infinite linear;
	z-index: 2;
}

.ao-group .ao-body:after {
    content: var(--ao-group-name);
    color: white;
    height: 100px;
    width: 2px;
    opacity: 0;
    position: absolute;
    top: -110px;
    right: calc(var(--aogs) / 2);
    background: linear-gradient(0deg, white, transparent);
}

@keyframes ao-rotation {
	100% {
		transform: rotateZ(-360deg);
	}
}

@keyframes lighting-z {
	0% {
		z-index: 3;
	}
	49.99% {
		z-index: 3;
	}
	50% {
		z-index: 1;
	}
	99.99% {
		z-index: 1;
	}
}
	
@keyframes lighting-shadow {
	0% {
		left: -50%;
		border-radius: 100% 0% 0% 100% / 100% 100% 100% 100%;
	}
	25% {
		left: calc((50% * ((90 - var(--global-inclinaison)) / 90)) - 50%);
		border-radius: 100% calc(100%*((90 - var(--global-inclinaison)) / 90)) calc(100%*((90 - var(--global-inclinaison)) / 90)) 100% / 100% 100% 100% 100%;
	}
	50% {
		left: -50%;
		border-radius: 100% 0% 0% 100% / 100% 100% 100% 100%;
	}
	100% {
		left: -50%;
		border-radius: 100% 0% 0% 100% / 100% 100% 100% 100%;
	}
}

@keyframes lighting-light {
	0% {
		left: 50%;
		border-radius: 0% 100% 100% 0% / 100% 100% 100% 100%;
	}
	50% {
		left: 50%;
		border-radius: 0% 100% 100% 0% / 100% 100% 100% 100%;
	}
	75% {
		left: calc(50% - (50% * (90 - var(--global-inclinaison)) / 90 ));
		border-radius: calc(100% * ((90 - var(--global-inclinaison)) / 90 )) 100% 100% calc(100% * ((90 - var(--global-inclinaison)) / 90 )) / 100% 100% 100% 100%;
	}
	100% {
		left: 50%;
		border-radius: 0% 100% 100% 0% / 100% 100% 100% 100%;
	}
}

@keyframes portrait-show {
	100% {
		transform:rotateY(2turn);
	}
}

@keyframes orbitation {
	100% {
		transform: rotateZ(-1turn);
	}
}

@keyframes orbitation-fix {
	0% {
		transform: rotateZ(0deg) rotateX(calc(-1 * var(--solar-system-inclinaison)));
	}
	100% {
		transform: rotateZ(360deg) rotateX(calc(-1* var(--solar-system-inclinaison)));
	}
}


@keyframes sunshine {
	100% { box-shadow: 0 0 25px 3px #ffbc00; }
}

.ao-mark {
    top: 50%;
    width: var(--aogd);
    height: 1px;
    position: absolute;
    background: var(--ao-group-color);
}


.slidecontainer {
  width: 100%;
}

.slider {
  accent-color: var(--menu-color);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}


.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: var(--menu-color);
  cursor: pointer;
}

.slider .slider-value {
    color: #02101d;
    background: #03f4e1;
    border-radius: 2px;
    font-weight: 600;
    padding: 0 .5em;
    outline: 1px solid #ffffff38;
    height: 20px;
    display: inline-flex;
    align-items: center;
    /* font-family: sans-serif; */
    width: 3em;
    font-size: 1em;
    justify-content: flex-end;
}

.author {
	display: flex;
	align-items: center;
	flex-direction: column;
	flex-wrap: nowrap;
	font-size: 14px;
	gap: 10px;
	margin-top: auto;
	font-family: 'futur';
	font-size: 10px;
	color: var(--menu-color);
}
.portrait {
	--grid-color: #004a4275;
	border-radius: 50%;
	border: 2px solid #03f4e1;
	width: -webkit-fill-available;
	background: linear-gradient(to top, var(--grid-color) 30%, transparent 30%), linear-gradient(to right, var(--grid-color) 30%, transparent 30%), linear-gradient(to top, #03eddb61, #03eddb61), url(./sallorge.png);
	aspect-ratio: 1;
	background-size: 100% 3px, 3px 100%, cover, cover;
	mix-blend-mode: hard-light;
	width: 150px;
	height: 150px;
/*	animation: shine 4s infinite linear;*/
}

.glass-block:after,
.glass-block:before {
    content: "";
    position: absolute;
    background: linear-gradient(to right, transparent 10%, #90fef5 40%, #90fef5 60%, transparent 90%);
    width: 150px;
    height: 2px;
    left: 6px;
    top: 0;
    /*    animation: shine 5s linear infinite alternate;*/
}

.glass-block:after {
	top: unset;
	bottom: 0;
	right: 6px;
	left: unset;
}

@keyframes shine {
	0%, 10%, 30%, 65% {
		opacity: 0;
	}
	0%, 5%, 50%, 80% {
		opacity: 0.5;
	}
	0.5%, 4.5%, 5.5%, 9.5%, 10.5%, 29.5%, 30.5%, 49.5%, 50.5%, 64.5%, 65.5%, 79.5%, 80.5% {
		opacity: 1;
	}
}