/* CSS Document */

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

html, body{
	height: 100%;
	font-family: sans-serif;
} 

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

.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: white;
	background: url("../img/leftsharkgif.gif") center no-repeat #fff;
	background-size: 30vmin;
}

.scream{
	position: fixed;
	font-size: 15vmin;
	width: 100%;
	height: 100%;
	color: aqua;
	padding-left: 5px;
}

.logo img{
	width: 5%;
	position: fixed;
	left: 5%;
	top: 7%;
}

.content{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* === CUBE SIZING === */

.scene {
  width: 51vmin;
  height: 51vmin;
  perspective: 51vmin;
}

.cube {
  width: 51vmin;
  height: 51vmin;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.cube.show-front  { transform: translateZ(-100px) rotateY(   0deg); }
.cube.show-right  { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-back   { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left   { transform: translateZ(-100px) rotateY(  90deg); }
.cube.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }

.cube__face {
  	position: absolute;
  	width: 51vmin;
  	height: 51vmin;
	border: 0.2vmin solid;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cube__face--front  { background: hsla(0,100%,99%,0.8); }
.cube__face--right  { background: hsla(0,100%,99%,0.9); }
.cube__face--back   { background: hsla(0,100%,99%,0.9); }
.cube__face--left   { background: hsla(0,100%,99%,0.9); }
.cube__face--top    { background: hsla(0,100%,99%,0.9); }
.cube__face--bottom { background: hsla(0,100%,99%,0.9); }

.cube__face--front  { transform: rotateY(  0deg) translateZ(25.5vmin); }
.cube__face--right  { transform: rotateY( 90deg) translateZ(25.5vmin); }
.cube__face--back   { transform: rotateY(180deg) translateZ(25.5vmin); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(25.5vmin); }
.cube__face--top    { transform: rotateX( 90deg) translateZ(25.5vmin); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(25.5vmin); }

/* === BUTTONS === */

.radio-group label span {
    text-align: right;
    font-size: 2vmin;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	display: block;
	color: black;
}

.radio-group label span:hover {
	color: hsla(52,100%,65%,1.0);;
	text-shadow: 
    3px 3px        lightcoral,
    2.75px 2.75px  lightcoral,
    2.5px 2.5px    lightcoral,
    2.25px 2.25px  lightcoral,
    2px 2px        lightcoral,
    1.75px 1.75px  lightcoral,
    1.5px 1.5px    lightcoral,
    1.25px 1.25px  lightcoral,
    1px 1px        lightcoral,
    0.75px 0.75px  lightcoral,
    0.5px 0.5px    lightcoral,
    0.25px 0.25px  lightcoral;
}

.radio-group label input {
	display: none;
}

.radio-group input:checked + span {
	color: hsla(52,100%,65%,1.0);;
	text-shadow: 
    3px 3px        lightcoral,
    2.75px 2.75px  lightcoral,
    2.5px 2.5px    lightcoral,
    2.25px 2.25px  lightcoral,
    2px 2px        lightcoral,
    1.75px 1.75px  lightcoral,
    1.5px 1.5px    lightcoral,
    1.25px 1.25px  lightcoral,
    1px 1px        lightcoral,
    0.75px 0.75px  lightcoral,
    0.5px 0.5px    lightcoral,
    0.25px 0.25px  lightcoral;

}

.topright{
	position: fixed;
	top: 7%;
	right: 5%;
}

.topright label span{
	margin-bottom: 1vmin;
}

.bottomright{
	position: fixed;
	bottom: 7%;
	right: 5%;
}

.bottomright label span{
	margin-top: 1vmin;
	text-align: right;
}

/* === CUBE TEXT CONTENT === */

.box{
	width: 40vmin;
	height: 40vmin;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

#name{
	font-family: sans-serif;
	font-style: italic;
	font-size: 5vmin;
	text-transform: uppercase;
	font-weight: 700;
 	-webkit-text-stroke-width: 0.25vmin;
  	-webkit-text-stroke-color: black;
	color: white;
	text-shadow: 0.4vmin 0.4vmin 0 #000;
	text-align: center;
}


.text h2{
	font-size: 2.3vmin;
	text-align: left;
	font-weight: 400;
	margin-bottom: 0.8vmin;
}

.text h3{
	font-size: 1.4vmin;
	font-weight: 400;
	margin-bottom: 0.8vmin;
}

.text p{
	font-size: 1.8vmin;
	text-align: justify;
}

.link{
	font-size: 1.4vmin;
	color: black;
	font-weight: 700;
}

.link:hover{
	color: lightcoral;
	text-decoration: line-through;
}

.paragraph h2{
	font-family: sans-serif;
	font-weight: 400;
	font-size: 2vmin;
	text-align: left;
}

.paragraph a{
	color: black;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 2.1vmin;
}

.paragraph a:hover{
	color: lightcoral;
	text-decoration: line-through;
}

.surprise{
	text-align: center;
	font-size: 2.5vmin;
}

.surprise a{
	color: black;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 2.1vmin;
}

.surprise a:hover{
	color: lightcoral;
	text-decoration: line-through;
}

.contact{
	font-size: 2.5vmin;
}

.contact a{
	color: black;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 2.1vmin;
}

.contact a:hover{
	color: lightcoral;
	text-decoration: line-through;
}

.email{
	color: black;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 2.1vmin;
	text-align: center;
}

.email:hover{
	color: lightcoral;
	text-decoration: line-through;
}

/* === MEDIA QUERIES === */

@media (max-width: 767px){
	.radio-group label span:hover {
		text-shadow: 
		1.5px 1.5px    lightcoral,
		1.25px 1.25px  lightcoral,
		1px 1px        lightcoral,
		0.75px 0.75px  lightcoral,
		0.5px 0.5px    lightcoral,
		0.25px 0.25px  lightcoral;
	}

	.radio-group label input {
		display: none;
	}

	.radio-group input:checked + span {
		text-shadow: 
		1.5px 1.5px    lightcoral,
		1.25px 1.25px  lightcoral,
		1px 1px        lightcoral,
		0.75px 0.75px  lightcoral,
		0.5px 0.5px    lightcoral,
		0.25px 0.25px  lightcoral;
	}
	
	.scream{
		font-size: 20vmin;
	}
	
	.scene {
		width: 56vmin;
		height: 56vmin;
		perspective: 56vmin;
	}

	.cube {
		width: 56vmin;
		height: 56vmin;
	}


	.cube__face {
		width: 56vmin;
		height: 56vmin;
	}

	.cube__face--front  { transform: rotateY(  0deg) translateZ(28vmin); }
	.cube__face--right  { transform: rotateY( 90deg) translateZ(28vmin); }
	.cube__face--back   { transform: rotateY(180deg) translateZ(28vmin); }
	.cube__face--left   { transform: rotateY(-90deg) translateZ(28vmin); }
	.cube__face--top    { transform: rotateX( 90deg) translateZ(28vmin); }
	.cube__face--bottom { transform: rotateX(-90deg) translateZ(28vmin); }
	
	.box{
		width: 50vmin;
		height: 50vmin;
	}
	
	.logo img{
		width: 10%;
	}
	
	#name{
		font-size: 5.5vmin;
	}

	.text h2{
		font-size: 2.5vmin;
	}

	.text h3{
		font-size: 1.6vmin;
	}

	.text p{
		font-size: 2.0vmin;
	}

	.link{
		font-size: 1.6vmin;
	}

	.paragraph h2{
		font-size: 2.2vmin;
	}

	.surprise{
		font-size: 2.7vmin;
	}

	.surprise a{
		font-size: 2.3vmin;
	}

	.contact{
		font-size: 2.7vmin;
	}

	.email{
		font-size: 2.3vmin;
	}
}