* {
	margin: 0;
	box-sizing: border-box;
}

body {
	font-family: "Pixelify Sans", sans-serif;
	background-color: var(--black);
	overflow-y: hidden;
	overflow-x: hidden;
}

main {
	display: grid;
	justify-content: center;
	place-items: center;
	height: 100vh;
}

article {
	position: relative;
	margin-top: 10em;
}

h1 {
	position: relative;
}

h1 > div {
	z-index: 1;
	position: absolute;
	width: 0;
	height: 0;
	bottom: 10px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 50px solid white;
	animation: --play-move 4s;
	animation-fill-mode: forwards;
  	animation-iteration-count: 1;
}

h1 > span {
	opacity: 0;
	font-size: 2em;
	letter-spacing: -20px;
	color: rgb(0, 255, 60);
	animation: --sensational-type linear 8s infinite, --init-header linear 2s;
	animation-delay: calc(200ms * sibling-index());
}

h2 {
	font-weight: 100;
}

section > section {
	display: grid;
	align-items: center;
	grid-template-columns: 66% 34%;
}

/* all the other buttons */
section {
	position: relative;
	display: grid;
    width: 600px;
    height: 200px;
    background: var(--grey);
    background: linear-gradient(0deg, var(--interface-color-start) 10%, var(--interface-color-end) 100%);
	border-radius: 0 100px 100px 100px;
    form:nth-child(2) {
        display: grid;
		position: relative;
		gap: 10px;
		margin-top: 25px;
    }
}

fieldset {
	display: flex;
    background-color: var(--light-grey);
    border: none;
	padding: 10px;
    border-radius: 25px;
    width: 140px;
    box-shadow: 0 0 5px #00000078, 0 4px 5px #ffffff87;
	color: var(--btn-txt);
    legend {
        display: none;
    }

label {
	display: flex;
	align-items: center;
	justify-content: center;
    margin: 0 5px;
    box-shadow: 0 0 5px #00000078, 0 4px 5px #ffffff87;
    border-radius: 25px;
	width: 50px;
	height: 25px;
	position: relative;
	border: 1px solid var(--btn-outline);
	&:hover {
		cursor: pointer;
	}
	&::before { 
		content: "";
		position: absolute;
		inset-block-start: 5%;
		inset-inline: 5%;
		height: 50%;
		border-radius: 10px 10px 0 0; 
		background: linear-gradient(#fff, #fff2);
	}
}
    input {
        display: none;
    }
}

/* tab */
header {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 200px;
	color: var(--white);
	height: 45px;
	width: 515px;
	border-radius: 20px 10px 0 0;
	background-color: var(--window);
}

/* SCREEN */
dl:not(dl dl) {
	width: 340px;
    height: 120px;
	background-color: var(--screen);
	margin: 0 0 20px 33px;
	border-radius: 15px 15px 15px 48px;
	display: grid;
    justify-items: center;
	grid-template-columns: repeat(auto-fill, 97px);
	text-align: center;
	align-items: center;
	box-shadow: 0 0 5px #000000ae, 0 4px 5px #ffffff90;
	position: relative;
}

dl:not(dl dl)::after {
	content: "";
	position: absolute;
	top: 3px;
    width: 334px;
    height: 60px;
	border-radius: 10px;
	background-image: linear-gradient(to top, transparent, rgb(255 255 255 / 48%));
}

dd {
	color: var(--white);
}

section dl dd {
	grid-area: 1;
}

section dl dd:nth-child(1) > dl > dd {
    color: var(--white);
    font-size: 3em;
}

section dl dd:nth-child(1) > dl > dt {
	background-color: var(--white);
	color: var(--screen);
	width: 60px;
	font-size: 20px;
}

/* wave */
section > dl > dd:nth-child(2)
{
	width: 80px;
    height: 50px;
	margin-top: 20px;
    border-bottom: 1px solid white;
    border-right: 1px solid white;
    border-left: 1px solid white;
}

section dl dd:nth-child(2) > dl > div >  dd {
	font-family: "Linefont", system-ui;
	font-weight: 200;
	animation: --move-wave 15s linear infinite;
}

div {
  position: absolute;
  left: 106px;
  bottom: 40px;
  clip: rect(0px, 79px, 100px, 0px);
}

/* globe */
@function --rotate-globe(--amt, --idx) {
  result: rotateY(calc((360 / var(--amt)) * var(--idx) * 1deg));
}

section dl dd:nth-child(3) > dl > dd > dl {
	display: grid;
	place-items: center;
	perspective: 1000px;
	transform-style: preserve-3d;
	animation: --rotatedeco 15s linear infinite;
}

section dl dd:nth-child(3) > dl > dd > dl > dd {
	grid-area: 1/1;
  	width: 70px;
	margin-top: 5px;
  	aspect-ratio: 1;
  	border: 1px solid white;
  	border-radius: 100px;

	&:nth-child(1) {
		transform: --rotate-globe(sibling-count(), sibling-index());
	}
	&:nth-child(2) {
		transform: --rotate-globe(sibling-count(), sibling-index());
	}
	&:nth-child(3) {
		transform: --rotate-globe(sibling-count(), sibling-index());
	}
	&:nth-child(4) {
		transform: --rotate-globe(sibling-count(), sibling-index());
	}
	&:nth-child(5) {
		transform: --rotate-globe(sibling-count(), sibling-index());
	}
}

/* last deco item screen */
section dl dd:nth-child(4) > dl > dd {
	text-align: right;
	margin: 2px 0;
}

section dl dd:nth-child(4) > dl > dd:nth-child(5) {
	position: relative;
	background-color: var(--white);
	width: 7px;
	height: 10px;
	margin-left: 10px;
	&::before {
		content: "";
		right: 0px;
		position: absolute;
		width: 7px;
		height: 15px;
		background-color: var(--white);
		margin-right: 9px;
	}
	&::after {
		content: "";
		position: absolute;
		width: 7px;
		height: 5px;
		background-color: var(--white);
		margin-left: 2px;
	}
}

/* turn knob */
form:nth-child(2) label:nth-child(4) {
	position: absolute;
	right: 30px;
	background-color: var(--light-grey);
	border-radius: 50px;
	width: 70px;
	aspect-ratio: 1;
	animation: --knob 10s infinite;
	box-shadow: 0 0 5px #000000ae, 0 4px 5px #ffffff90;
	input[type="range"] {
	    position: absolute;
	    opacity: 0;
	    margin: 0;
   }
   > div {
		position: absolute;
		left: 50%;
		top: 70%;
		width: 10px;
        height: 10px;
		border-radius: 10px;
		background: var(--btn);
		cursor: pointer;
   }
}

/* two bottom buttons */
aside
{	position: absolute;
	left: 166px;
	top: 180px;
    background: var(--grey);
	background: linear-gradient(180deg, var(--interface-color-start) 60%,  var(--interface-color-end) 100%);
	width: 200px;
	height: 75px;
	border-radius: 0 0 30px 30px;
    form {
        display: flex;
        justify-content: center;
    }
}

form:nth-child(2) label:nth-child(1) {
    background-color: var(--btn);
	background:  radial-gradient(circle at 50% 115%, var(--clr-one) 10px, var(--clr-two) 41%, var(--clr-three) 62%);
	padding: 5px;
	width: 45px;
	text-align: center;
	border-radius: 40px;
	box-shadow: 0 0 5px #0000007c, 0 4px 5px #ffffff87;
	position: relative;
	border: 1px solid var(--btn-outline);
	color: var(--btn-txt);
	&:hover {
		cursor: pointer;
	}
    input {
        display: none;
    }
	&::before { 
		content: "";
		position: absolute;
		inset-block-start: 5%;
		inset-inline: 5%;
		height: 50%;
		border-radius: 10px 10px 0 0; 
		background: linear-gradient(#fff, #fff2);
	}
}

/* 
input[type="radio"]:checked label {
    background-color: rgb(255, 0, 0);
} */

mark {
    background-color: transparent;
	font-size: 12px;
}

mark::after {
    content: "";
    display: inline-block;
    margin-left: 13px;
    width: 7px;
    aspect-ratio: 1;
    border-radius: 10px;
    background-color: var(--light);
	box-shadow:
		0 0 30px 3px var(--white),
		0 0 10px 1px var(--glow);
}

mark:nth-child(3)::after
{ 
	margin-left: 41.5px;
}

aside label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: var(--btn-txt);

	margin: 0 10px;
	padding: 10px;

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

	width: 55px;
	aspect-ratio: 1;

	position: relative;
	border-radius: 55px;
	border: 2px solid var(--btn-outline);
	background: radial-gradient(circle at 50% 90%, var(--clr-one) 10px, var(--clr-two) 41%, var(--clr-three) 62%);
	box-shadow: 0 0 5px #000000, 0 4px 5px #ffffff;
	&:hover {
		cursor: pointer;
		background: radial-gradient(circle at 50% 90%, var(--clr-one-hover) 10px, var(--clr-two-hover), var(--clr-three-hover) 62%);

	}
    input {
        display: none;
    }
}

aside label::before { 
	content: "";
	position: absolute;
	inset-block-start: 5%;
	inset-inline: 5%;
	height: 50%;
	border-radius: 52% 48% 6% 8% / 75% 73% 18% 16%;
	background: linear-gradient(#fff, #fff2);
}

section ul:nth-child(1) > li:nth-child(1) {
	aspect-ratio: 2/1;
	font-size: 20px;
	color: var(--screen);
	background-color: var(--white);
	width: 50px;
}

section > section ul:nth-child(1) > li {
	border-radius: 0;
	background-color: transparent;
}


/* chain */
ul li {
	margin: 0;
	padding: 0;
}

ul:nth-of-type(1) > li, ul:nth-of-type(2) > li {
	width: 10px;
	aspect-ratio: 1;
	background-color: var(--grey);
	border-radius: 10px;
	list-style-type: none;
}

/* pos of chain */
article > ul:nth-of-type(1) {
	position: relative;
	left: 340px;
    top: 0;
}

article > ul:nth-of-type(2) {
	position: relative;
    left: 400px;
    bottom: 130px;
}

/* charms */
article > ul:nth-of-type(1) > li:last-child {
	position: relative;
	background-color: transparent;
    top: 0;
	right: 37px;

	> ul {
		outline: 2px solid black;
	}

	:first-child, :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :last-child {
		position: absolute;
	}

	:first-child, :nth-child(2)
	{
		z-index: 1;
		aspect-ratio: 1;
		background-color: rgb(0, 0, 0);
		width: 7px;
		top: 33px;
	}

	:nth-child(3), :nth-child(4) {
		z-index: 1;
		top: 45px;
		background-color: rgb(0, 0, 0);
		width: 3px;
		height: 15px;
	}

	:nth-child(5), :nth-child(6)
	{
        top: -33px;
		border-radius: 50px;
		background-color: var(--white);
		height: 80px;
        width: 30px;
	}

	:first-child {
		left: 55px;
	}

	:nth-child(2) {
		left: 20px;
	}

	:nth-child(3) {
		transform: rotateZ(305deg);
	}

	:nth-child(4) {
		transform: rotateZ(55deg);
	}

	:nth-child(5) {
		outline: 2px solid black;
		left: 53px;
	}

	:nth-child(6) {
		outline: 2px solid black;
        left: 2px;
	}

	:last-child {
		top: 0;
		left: 0;
		background-color: var(--white);
		width: 85px;
		height: 75px;
		border-radius: 100px;
	}
}

article > ul:nth-of-type(2) > li:last-child > ul {
	position: relative;
    top: 0;
	right: 70px;
	:nth-child(3), :nth-child(4) {
		position: absolute;
		background-color: var(--fish);
		width: 30px;
		aspect-ratio: 1/1;
		left: 110px;
	}

	:first-child {
		position: absolute;
		top: 10px;
		left: 50px;
		background-color: rgb(0, 0, 0);
		width: 7px;
		aspect-ratio: 1;
	}

	:nth-child(2)
	{
		background-color: var(--fish);
		width: 70px;
		aspect-ratio: 2/1;
		border-radius: 100px;
	}

	:nth-child(3)
	{
		border-radius: 50px 0;
		bottom: 16px;

	}
	:last-child
	{
		border-radius: 0 50px;
		top: 16px;
	}
}

details {
	z-index: 1;
	position: absolute;
	right: 85px;
	text-align: center;
	background-color: var(--window);
	color: var(--white);
	width: 125px;
	height: 35px;
	border-radius: 0 0 20px 20px;
	> details {
		position: revert;
		color: var(--black);
		background-color: var(--grey);
		text-align: left;
	}
}

details > summary {
	list-style: none;
	&::-webkit-details-marker {
	display: none
	}
	&::after {
		content: '▼';
		margin-left: 10px;
	}
}

details[open] {
	color: var(--black);
	background-color: rgb(203, 203, 203);
	height: 160px;
}

ol {
	justify-items: center;
	display: grid;
	position: absolute;
	z-index: -2;
	list-style: none;
}

ol > li {
	grid-area: 1/1;
	perspective: 10px;
	transform-style: preserve-3d;
	width: calc(60px * sibling-index());
	border: 2px solid white;
	aspect-ratio: 1;
}