@charset "UTF-8";

@font-face {
    src: url(../fonts/SuisseIntl-SemiBold-WebXL.woff2);
    font-family: suisse;
}

@font-face {
  src: url(../fonts/Akkurat\ Pro-Mono.otf);
  font-family: akkuratmono;
}

@font-face {
  src: url(../fonts/GT-Alpina-Medium-Trial.otf);
  font-family: gtalpinamedium;
}

@font-face {
  src: url(../fonts/GT-Alpina-Typewriter-Medium-Trial.otf);
  font-family: gtalpinatype;
}

@font-face {
	src: url(../fonts/WhyteInktrap-Medium.otf);
	font-family: whyte;
  }

  body {
	font-size: 2vh;
	font-family: whyte;
	background-color: black;
  }

  *{
	  scroll-behavior: smooth;
	  text-decoration:none;
  }

h2{
	color: white;
	text-align: left;
}

h3{
	color: white;
	text-align: center;
	padding-top: .3em;
}

.ice{
	position: fixed;
	width: 100vw;
	height: 100%;
	transform: translateZ(400vh);
	z-index: 3;
	background: radial-gradient(transparent 0%, white 70%);
	opacity: 100%;
}

.ice-no{
	opacity: 0%;
	transition: opacity ease-out 3s;
	pointer-events: none;
}

.navbar{
	width: 100%;
	height: 100vh;
	background-color: none;
	position: absolute;
	z-index: 1;
	font-size: 1.5em;
}

.button1850{
	position: relative;
	background-color: none;
	border-radius: 0 0 2rem 2rem;
	height: 2rem;
	display: inline-block;
	transform: translateZ(40vh);
	text-align: center;
	color: white;
	width: calc(100%/4 - 1em/4);
	padding-top: .3em;
}
.button1973{
	position: relative;
	background-color: none;
	border-radius: 0 0 2rem 2rem;
	height: 2rem;
	display: inline-block;
	transform: translateZ(40vh);
	text-align: center;
	color: white;
	width: calc(100%/4 - 1em/4);
	padding-top: .3em;
}
.button2010{
	position: relative;
	background-color: none;
	border-radius: 0 0 2rem 2rem;
	/* padding: .5em 2rem .5em 2rem; */
	width: calc(100%/4 - 1em/4);
	height: 2rem;
	display: inline-block;
	transform: translateZ(40vh);
	text-align: center;
	color: white;
	padding-top: .3em;
}

.button2050{
	position: relative;
	background-color: none;
	border-radius: 0 0 2rem 2rem;
	width: calc(100%/4 - 1em/4);
	height: 2rem;
	display: inline-block;
	transform: translateZ(40vh);
	text-align: center;
	color: white;
	padding-top: .3em;
}

.buttoni{
	position: absolute;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%,0%) translateZ(40vh);
	background-color: white;
	border-radius: 2rem 2rem 0 0;
	padding-top: 0.3em;
	height: 2rem;
	overflow: hidden;
	width: 6rem;
	text-align: center;
}

.buttoni a:link {
	color: black; 
	background-color: transparent; 
	text-decoration: none;
  }
  
  .buttoni a:visited {
	color: black;
	background-color: transparent;
	text-decoration: none;
  }

.backtotop{
	position: sticky;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%,0%) translateZ(40vh);
	background-color: black;
	border-radius: 2rem 2rem 0 0;
	padding-top: 0.3em;
	height: 2rem;
	overflow: hidden;
	width: 6rem;
	text-align: center;
	font-size: 1.5em;
}

.backtotop a:link {
	color: white; 
	background-color: transparent; 
	text-decoration: none;
  }

  .backtotop a:visited {
	color: white;
	background-color: transparent;
	text-decoration: none;
  }

.area {          
	padding: 2em;     
	margin: -2em; 
 }

.switch-hide-1850 .button1850,
.switch-hide-1973 .button1973,
.switch-hide-2010 .button2010, 
.switch-hide-2050 .button2050{
	background-color: white;
	color: black;
	text-align: center;
}

.switch-hide-1850 .display2010 ,
.switch-hide-1850 .display1973 ,
.switch-hide-1973 .display2010 ,
.switch-hide-1973 .display1850 ,
.switch-hide-2010 .display2010 ,
.switch-hide-2010 .display1973 ,
.switch-hide-2010 .display1850 ,
.switch-hide-2050 .display2050 {
	display: none;
}

.switch-hide-2010 .display2010 {
	display: block;
}


.turn{
	top: 0%;
	display: flex;
	position: relative;
	flex-direction: column;
	height: 100vh;
	width: 100%;
	background-color: none;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	background-color: transparent;
	pointer-events:none;
}

.container{
	position: absolute;
	width: 200px;
	height: 200px;
	transform-style: preserve-3d;
	animation: animate 60s linear infinite;
	pointer-events: all;
	z-index: 2;
}

.container-switch{
display: none;
}

.containerfuture{
	display: none;
	position: absolute;
	width: 50%;
	height: auto;
	transform-style: preserve-3d;
	animation: animate 60s linear infinite;
	pointer-events: all;
	background-color: rgb(189, 189, 189);
	padding: 1em 1em 1em 1em;
	border-radius: 2rem 2rem 2rem 2rem;
}

.containerfuture-switch{
	display:block;
}

@keyframes animate{
	0%{
		transform: perspective(1200px) rotateX(0deg);
	}
	100%{
		transform: perspective(1200px) rotateX(360deg);
	}
}

.container span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform-origin: center;
	transform-style: preserve-3d;
	transform: rotateX(calc(var(--i)*45deg)) translateZ(40vh);
	background-color: rgb(189, 189, 189);
	border-radius: 2rem 2rem 2rem 2rem;
	
}

.container span img{
	position: absolute;
	top:0%;
	left:0%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.container h1{
	position: absolute;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	font-size: 6em;
	line-height: .8em;
	color: white;
	pointer-events: none;
}

hr{
	border: 1px solid black;
	margin: 0;
}

	.information{
		width: 100%;
		height: auto;
		background-color: transparent;
	}
	.containerinfo{
		background-color: white;
			width: calc(100%-1em);
			height: auto;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: .5em .5em 0em .5em;
		}
	.containerinfointro{
			background-color: white;
			width: calc(100%-1em);
			height: auto;
			display: flex;
			padding: 1em .5em 0em .5em;
			border-radius: 2rem 2rem 0rem 0rem;
			overflow: none;
			flex-direction: column;
		}

		.containerinfointro p{
			padding: 0em 0em 1em 0em;
		}

	.infosection{
		width: calc(100%/2);
		height: 100%;
		background-color: transparent;
	}
	.infosectionfoto{
		width: 100%;
		height: 30vh;
		background-color: transparent;
		flex-direction: column;
		overflow: hidden;
	}
	.infosectionfoto img{
		width: 100%;
		align-items: center;
	}
	.infosectiontext{
		width: 100%;
		height: auto;
		background-color: transparent;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		padding: 0.5em 0em 0em 0em;
	}

	#valtorta{
		border-radius: 0rem 0rem 2rem 2rem;
		background-color: white;
		padding: 0.5em 0em 0.5em 0.5em;
	}

	sup {
		vertical-align: super;
		font-size: .5em;
	}
	

	@media screen and (min-width: 800px) {
		.container span{
			transform: rotateY(calc(var(--i)*45deg)) translateZ(35vw);
		}
	
		.container{
			animation: animate2 60s linear infinite;
		}

		.containerinfo{
			flex-direction: column;
			flex-wrap: wrap;
			height: 50vh;
			}

		.infosectionfoto{
			width: calc(50vw - 1em);
			height: 100%;
			margin-bottom: .5em;
		}
		.infosectiontext{
			width: calc(50vw - 1em);
			height: 100%;
			padding: 0em 0em 0em .5em;
		}
	
		@keyframes animate2{
			0%{
				transform: perspective(1200px) rotateY(0deg);
			}
			100%{
				transform: perspective(1200px) rotateY(360deg);
			}
		}

		.containerinfointro{
			flex-direction: row;
		}
		.containerinfointro p{
			padding: 0em 1em 1em 0em;
		}

		.container h1{
			font-size: 15em;
		}
	
		}