/**************/
/* CSS REMEDY */
/**************/

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

html{
	margin: 0;
	padding: 0;
	width: 100vw;
}

body, main{
	width: 100%;
	min-height: 100vh;
	margin: 0;
}

/*********************/
/* CUSTOM PROPERTIES */
/*********************/

:root {
	--color-surface1: #f5f5f5;
	--color-on-surface1: #272727;

	--color-surface2: #ffffff;
	--color-on-surface2: #272727;

	--color-surface3: #333333;
	--color-on-surface3: #ffffff;

	--color-accent: #ef6b6b;
	--color-light: rgba(0, 0, 0, 0.5);
	--color-shadow: rgba(0, 0, 0, 0.1);

	--border-radius: 0.2rem;

	--box-shadow: rgba(0, 0, 0, 0.1) 0 0 0.5rem 0;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-surface1: #272727;
		--color-on-surface1: #f5f5f5;

		--color-surface2: #383838;
		--color-on-surface2: #f5f5f5;

		--color-surface3: #f5f5f5;
		--color-on-surface3: #272727;

		--color-accent: #f48686;
		--color-light: rgba(255, 255, 255, 0.7);
		--color-shadow: rgba(255, 255, 255, 0.1);
	}

	svg, .icon{
		filter: invert(1);
	}
}

@font-face {
	font-family: "Futura Bold";
	font-display: swap;
	src: 
		url(../fonts/VFutura-Bold.woff2) format("woff2"),
		url(../fonts/VFutura-Bold.woff) format("woff"),
		url(../fonts/VFutura-Bold.ttf) format("truetype");
}

@font-face {
	font-family: "Futura Heavy";
	font-display: swap;
	src: 
		url(../fonts/VFutura-Heavy.woff2) format("woff2"),
		url(../fonts/VFutura-Heavy.woff) format("woff"),
		url(../fonts/VFutura-Heavy.ttf) format("truetype");
}

@font-face {
	font-family: "Futura Light";
	font-display: swap;
	src: 
		url(../fonts/VFutura-Light.woff2) format("woff2"),
		url(../fonts/VFutura-Light.woff) format("woff"),
		url(../fonts/VFutura-Light.ttf) format("truetype");
}

@font-face {
	font-family: "Futura Medium";
	font-display: swap;
	src: 
		url(../fonts/VFutura-Medium.woff2) format("woff2"),
		url(../fonts/VFutura-Medium.woff) format("woff"),
		url(../fonts/VFutura-Medium.ttf) format("truetype");
}

@font-face {
	font-family: "Futura Regular";
	font-display: swap;
	src: 
		url(../fonts/VFutura-Regular.woff2) format("woff2"),
		url(../fonts/VFutura-Regular.woff) format("woff"),
		url(../fonts/VFutura-Regular.ttf) format("truetype");
}

/***********/
/* STYLING */
/***********/

header{
	padding: 1rem;
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background-color: var(--color-surface2);
}

header img{
	width: 4rem;
}

header button, header a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	background: none;
	border: none;
	gap: 0.5rem;
}

header a:nth-child(2){
	margin: auto;
}

header a:nth-child(3){
	text-align: right;
	align-self: right;
	margin-left: auto;
}

body{
	color: var(--color-on-surface1);
	background-color: var(--color-surface1);
	font-family: "Futura Regular", Futura, sans-serif;
	font-weight: normal;
}

.quiz, .quiz main{
	overflow: hidden;
}

.quiz main{
	padding: 1rem;
	position: relative;
	overflow: hidden;
}

.results main{
	padding: 5rem 1rem;
	background-color: var(--color-surface2);
}

h1, h2, h3, h4, h5, h6{
	font-family: "Futura Medium", Futura, sans-serif;
	font-weight: normal;
}

a{
	color: inherit;
	text-decoration: none;
}

.skip {
	position: absolute;
	top: 1rem;
	left: -999rem;
	opacity: 0;
	background-color: var(--color-surface2);
	padding: 0.5rem 1rem;
	box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
	z-index: 99;
}

.skip:focus {
  	opacity: 1;
	left: 50%;
	transform: translateX(-50%);
}

@keyframes disappear{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}

@keyframes fade-slide-up{
	0%{
		opacity: 0;
		transform: translateY(2rem) scale(0.95);
	}
	100%{
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}


/* Quiz -------------------------------------------------- */

.quiz main section:last-child{
	position: fixed;
	width: calc(100vw - 2rem);
	max-width: 30rem;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);

	background-color: var(--color-surface2);
	z-index: 5;
	box-shadow: var(--box-shadow);
	border-radius: var(--border-radius);
}


.filters{
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: scroll;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	scroll-snap-type:x mandatory;
	position: relative;
}

.filters::-webkit-scrollbar {
  	display: none;
}

.filters fieldset{
	border: none;
	width: 100%;
	padding: 1rem 0;
	flex-basis:100%;
	flex-shrink:0;
  	scroll-snap-align: center;
}

.filters fieldset>div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 1rem;
	position: absolute;
	top: 0;
}

.filters legend{
	text-align: center;
	font-size: 1.2rem;
	font-family: "Futura Medium", Futura, sans-serif;
	font-weight: normal;
	padding: 1rem;
	max-width: 80%;
}

.filters label{
	margin: 0.2rem;
	padding: 0.5rem;
	border: 0.1rem var(--color-shadow) solid;
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}

fieldset{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

small{
	color:var(--color-light);
	margin-left: 0.5rem;
}

/* Chairlist */

.chairlist{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(5vw + 4rem), 1fr));
	margin: 0;
	padding: 0;
}

.chairlist li{
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	width: calc(5vw + 5rem);
	height: calc(5vw + 6rem);
}

.chairlist.circle{
	display: flex;
}

.chairlist.circle li{
	position: initial !important;
}

.chairlist li a{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	transition: all 500ms ease;
	top: 0;
	left: 0;
	transform-origin: center;
	transform: translate(0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.chairlist li a{
		transition: all 2s ease;
	}
}

.chairlist li img{
	width: calc(5vw + 5rem);
	margin: 0;
}

.chairlist.circle li a{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.position0  { top: 30% !important; left: 20%  !important; transform: scale(2)   !important; }
.position1  { top: 30% !important; left: 60%  !important; transform: scale(2)   !important; }
.position2  { top: 50% !important; left: 40%  !important; transform: scale(2)   !important; }

.position3  { top: 15% !important; left: 40%  !important; transform: scale(1)   !important; }
.position4  { top: 18% !important; left: 70%  !important; transform: scale(1)   !important; }
.position5  { top: 30% !important; left: 90%  !important; transform: scale(1)   !important; }
.position6  { top: 50% !important; left: 90%  !important; transform: scale(1)   !important; }
.position7  { top: 65% !important; left: 70%  !important; transform: scale(1)   !important; }
.position8  { top: 70% !important; left: 40%  !important; transform: scale(1)   !important; }
.position9  { top: 65% !important; left: 10%  !important; transform: scale(1)   !important; }
.position10 { top: 50% !important; left: -10% !important; transform: scale(1)   !important; }
.position11 { top: 30% !important; left: -10% !important; transform: scale(1)   !important; }
.position12 { top: 18% !important; left: 10%  !important; transform: scale(1)   !important; }

.position13 { top: 5%  !important; left: 20%  !important; transform: scale(0.8) !important; }
.position14 { top: 5%  !important; left: 60%  !important; transform: scale(0.8) !important; }
.position15 { top: 10% !important; left: 90%  !important; transform: scale(0.8) !important; }
.position16 { top: 73% !important; left: 90%  !important; transform: scale(0.8) !important; }
.position17 { top: 80% !important; left: 60%  !important; transform: scale(0.8) !important; }
.position18 { top: 80% !important; left: 20%  !important; transform: scale(0.8) !important; }
.position19 { top: 73% !important; left: -10% !important; transform: scale(0.8) !important; }
.position20 { top: 10% !important; left: -10% !important; transform: scale(0.8) !important; }

.position21 { top: -3% !important; left: 0%   !important; transform: scale(0.6) !important; }
.position22 { top: -3% !important; left: 75%  !important; transform: scale(0.6) !important; }
.position23 { top: -5% !important; left: 40%  !important; transform: scale(0.6) !important; }

.position24, .position25, .position26, .position27, .position28, .position29 {
              top: -10%!important; left: 40%  !important; transform: scale(0.6) !important; }


/* Start -------------------------------------------------- */

.start main{
	overflow: hidden;
	background-color: var(--color-surface2);
}

.start main > img{
	width: 250vw;
	position: fixed;
	left: 50%;
	top: 50%;
	transform-origin: center;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.9);
	animation: fade-turn 1s forwards 3.5s, rotate 120s linear infinite 3.5s;
	pointer-events: none;
}

.start div{
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 75vw;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

.start div img{
	width: 6rem;
}

.start div a{
	background-color: var(--color-surface3);
	padding: 0.5rem 4rem;
	border-radius: var(--border-radius);
	color: var(--color-on-surface3);
}

.start div:first-of-type{
	background-color: var(--color-surface2);
	z-index: 10;
	width: 100vw;
	height: 100vh;

	opacity: 1;
	pointer-events: none;
	animation: disappear 0.5s forwards 3s;
}

.start div:last-of-type{
	animation: fade-up 2s forwards 3.5s;
	opacity: 0;
}

@keyframes fade-up{
	0%{
		opacity: 0;
		transform: translate(-50%, -40%);
	}
	100%{
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

@keyframes fade-turn{
	0%{
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.8);
	}
	100%{
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes rotate {
  to {
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
	@keyframes fade-up{
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}
	@keyframes fade-turn{
		0%{
			opacity: 0;
		}
		100%{
			opacity: 1;
		}
	}
}

.start div:first-of-type svg {
  width: 6rem;
}

.start div:first-of-type svg path {
  fill: none;
  stroke: black;
  stroke-width: 0.05rem;

  stroke-dasharray: 1062.86;
  stroke-dashoffset: 1062.86;
  animation: draw 3s ease-in forwards 1s;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}


/* Result list--------------------------------------------- */

.results ul{
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	justify-content: center;
}

.results article{
	display: flex;
	flex-direction: column-reverse;
	text-align: center;
	gap: 0.5rem;
}

.results article p{
	color: var(--color-accent);
	margin: 0;
}

.results article h2{
	font-size: large;
	margin: 0;
}

.results ul li div{
	background-color: var(--color-surface1);
	margin-bottom: 1rem;
}

 .results ul li img{
	max-width: 80%;
	max-height: 30rem;
	margin: 5rem auto;
}

/* Details page --------------------------------------------- */

.details main{
	animation: fade-slide-up 0.2s ease-out;
}

.details main > button{
	position: fixed;
	top: 0;
	left: 0;
	padding: 1rem;
	z-index: 20;
	border: none;
	background: none;
}

.details ul{
	list-style: none;
	padding: 0;
	padding-bottom: 20rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.details section{
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: end;
	align-items: center;
	width: 100vw;
	height: 100vh;
	top: 0;
	pointer-events: none;
}

.details label{
	pointer-events: all;
	z-index: 10;
}

.details label:after{
	content: "";
	background-color: black;
	opacity: 0;
	z-index: 5;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	transition: all 500ms ease;
}

.details input{
	display: none;
}

.details section div > div:first-of-type{
	overflow: hidden;
	max-height: 0;
	transition: all 500ms ease;
	opacity: 0;
}

.details ul li img{
	width: 90vw;
}

.details section > div{
	padding: 0.5rem;
	margin: 1rem;
	background-color: var(--color-surface2);
	text-align: center;
	pointer-events: all;
	z-index: 10;
	border-radius: var(--border-radius);
}

.details div > div{
	padding: 1rem;
}

.details h1{
	font-size: 1.2rem;
	transition: all 200ms ease;
}

.details details{
	text-align: left;
	font-size: 0.9rem;
	border-bottom: 0.1rem solid var(--color-shadow);
	padding-bottom: 0.8rem;
}

.details details strong{
	display: block;
}

.details summary{
	display: inline;
	padding: 0 0.5rem;
}

.details details div{
	max-height: 0;
	transition: all 500ms ease;
}

.details summary::after{
	content: "▼";
	position: absolute;
	right: 0;
	transform: translate(-300%, -50%) rotate(0deg);
	transition: all 300ms ease;
}

.details details[open] div{
	max-height: 10rem;
}

.details details[open] summary::after{
	transform: translate(-300%, -50%) rotate(180deg);
}

.details div > div:last-of-type{
	display: flex;
	gap: 0.5rem;
}

.details div > div a{
	box-shadow: var(--box-shadow);
	padding: 0.5rem;
	width: 100%;
	background-color: var(--color-surface1);
	border-radius: var(--border-radius);

	display: flex;
	align-items: center;
	justify-self: center;
	gap: 0.5rem;
}

.details div > div a:last-of-type{
	background-color: var(--color-surface3);
	color: var(--color-on-surface3);
}

.details div > div a svg{
	color: inherit;
	width: 1rem;
}

.details input[type="checkbox"]:checked ~ label,
.details section:focus-within > label{
	background-color: yellow;
}

.details input[type="checkbox"]:checked ~ label:after,
.details section:focus-within > label:after{
	opacity: 0.5;
}

.details input[type="checkbox"]:checked ~ div > div:first-of-type,
.details section:focus-within div > div:first-of-type{ 
	max-height: 60vh;
	opacity: 1;
	overflow: auto;
}

.details input[type="checkbox"]:checked ~ div h1,
.details section:focus-within > div h1{
	font-size: 2rem;
}