@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: oracle;
  src: url(oracle.ttf);
}

* {box-sizing: border-box;}

body {
	margin: 0;
	padding: 0;
	font-family: 'Playfair Display', serif;
	color: #fff;
	min-height: 100%;
	overflow: hidden;
    background: linear-gradient(141deg, #3d0083, #003d83, #036744);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    -o-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:11% 0%}
    50%{background-position:90% 100%}
    100%{background-position:11% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:11% 0%}
    50%{background-position:90% 100%}
    100%{background-position:11% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:11% 0%}
    50%{background-position:90% 100%}
    100%{background-position:11% 0%}
}
@keyframes AnimationName { 
    0%{background-position:11% 0%}
    50%{background-position:90% 100%}
    100%{background-position:11% 0%}
}


/* IE hack */
* body {margin: 0 auto 0 auto;}
/* end */

#logo {
	position: fixed;
	top: 9vmin;
	left: 9vmin;
	transition: 0,3s;
}

#logo svg {
	height: 14.5vw;
	transition: 0,3s;	
}

#cicrlce {
	fill: rgba(0,0,0,0.3);
}

#photo {
	z-index: 6;
	position: fixed;
	top: 38%;
	left: 50%;
	margin-left: -19vmin;
	margin-top:  -19vmin;
	height: 38vmin;
	width: 38vmin;
	mix-blend-mode: screen;
}

#photo:hover {
	mix-blend-mode: normal;
}

#photo img {
	height: 38vmin;
	border-radius: 19vmin;
	box-shadow:  1vmin 1vmin 4vmin black,
				-1vmin -1vmin 6vmin rgba(255, 255, 255, 0.3);
}

#text {
	box-shadow:  0.5vmin 0.5vmin 2vmin black,
				-0.5vmin -0.5vmin 2vmin rgba(255, 255, 255, 0.3);}

#main {
	z-index: 9;
	position: fixed;
	position: fixed;
	top: 38%;
	left: 50%;
	margin-top: 6.333vmin;
}

#main h1 {
	margin: 0;
	padding: 0;
	color: #fff;
	font-size: 4.86vmin;
	line-height: 6.33vmin;
	font-weight: 100;
	text-shadow: 0.3vmin 0.3vmin 1vmin black,
	
}

#mice {
	height: 38vh;
	position: fixed;
	bottom: 0;
	right: 0;
	mix-blend-mode: screen;
}

#spotlight {
	height: 100vh;	bottom: 0;
	left: auto;
	mix-blend-mode: overlay;
	opacity: 0.68;
}

#contact {
	z-index: 9;
	position: fixed;
	width: 100%;
	bottom: 0;
	left: 0;
	margin: 6vmin 0;
	text-align: center;
	transition: 0.3s;
}

#contact a, input[type=submit] {
	display: inline-block;
	padding: 2.25vmin 4.5vmin;
	font-weight: bold;
	font-size: 2.8vmin;
	line-height: 4.5vmin;
	color: #fff;
	text-decoration: none;
	border-radius: 4.5vmin;
	border: 0.3vmin solid #fff;
	background: rgba(255,255,255,0.2);
	box-shadow:  0.5vmin 0.5vmin 2vmin rgba(0, 0, 0, 0.5),
				-0.5vmin -0.5vmin 2vmin rgba(255, 255, 255, 0.3);
	transition: 0.3s;
}

#contact a:hover, input[type=submit]:hover, #formClose:hover {
	transform-origin: center;
	transform: scale(1.2);
	background: rgba(255,255,255,0.5);
	box-shadow:  0.5vmin 0.5vmin 4vmin rgba(0, 0, 0, 0.5),
				-0.5vmin -0.5vmin 4vmin rgba(255, 255, 255, 0.5);	
}

#contact a:active, input[type=submit]:active, #formClose:active {
	background: rgba(255,255,255,0.1);
	box-shadow:  0.1vmin 0.1vmin 1vmin rgba(0, 0, 0, 0.5),
				-0.1vmin -0.1vmin 1vmin rgba(255, 255, 255, 0.5);
	transition: 0.1s;	
}

form {
	margin: 0;
	padding: 0;
	display: block;
}

#formBox {
	z-index: 10;
	display: none;
	position: fixed;
	bottom: 0;
	width: 82vw;
	margin: 6vmin 9vmin;
	padding: 6vmin;
	border-radius: 4.5vmin;
	border: 0.3vmin solid #fff;
	color: #fff;
	background: rgba(0,0,0,0.5);
	box-shadow:  0.5vmin 0.5vmin 2vmin rgba(0, 0, 0, 0.5);
	transition: 0.3s;
	animation-name: formIn;
	animation-duration: 0.3s;
	transform-origin: bottom;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

@keyframes formIn {
	from { transform: scale(0); }
	to { transform: scale(1.0); }
}

#formBox .antispam {display: none;	
}

#formBox h3 {
	margin: 0 0 4.5vmin 0;
	padding: 0;
	font-size: 4.5vmin;
	line-height: 4.5vmin;
}

#formBox label {
	margin: 0;
	padding: 0;
	font-style: normal;
	font-size: 2.8vmin;
	line-height: 4.5vmin;
}

input[type=email], input[type=text], textarea {
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 2.8vmin;
	line-height: 4.5vmin;
	margin: 0;
	padding: 2.25vmin 3vmin;
	-webkit-appearance: none;
    border-radius: 3vmin;
	border: 0.3vmin solid #fff;
	-webkit-appearance: none;
    -moz-appearance: none;
	}
	
input[type=email], input[type=text], textarea {
	width: calc(100%);
	color: #000;
	border: 1px solid #ccc;
	background: #eee;
}

input[type=submit] {
	font-family: 'Playfair Display', serif;
	-webkit-appearance: none;
    -moz-appearance: none;
}

.submitHolder {
	text-align: center;
}

#formClose {
	font-family: sans-serif;
	font-style: normal;
	display: inline-block;
	position: absolute;
	top: 4.5vmin;
	right: 4.5vmin;
	text-decoration: none;
	color: #fff;
	font-size: 2.8vmin;
	line-height: 2.8vmin;
	padding: 2.9vmin;
	text-align: center;
	border-radius: 4.3vmin;
	background: rgba(0,0,0,0.2);
	box-shadow:  0.5vmin 0.5vmin 2vmin rgba(0, 0, 0, 0.5),
				-0.5vmin -0.5vmin 2vmin rgba(255, 255, 255, 0.3);
	transition: 0.3s;
}


@media only screen and (min-width: 768px) {
	#contact a, input[type=submit] {
		padding: 1.125vmin 2.25vmin;
		font-size: 1.4vmin;
		line-height: 2.25vmin;
		border-radius: 2.25vmin;
	}
	
	#formBox {
		width: 62vw;
		left: 50%;
		margin-left: -31vw;
		z-index: 10;
		bottom: 0;
		padding: 3vmin;
		border-radius: 2.25vmin;
	}
	
	#formBox h3 {
		margin: 0 0 2.25vmin 0;
		font-size: 2.25vmin;
		line-height: 2.25vmin;
	}
	
	#formBox label {
		font-size: 1.4vmin;
		line-height: 2.25vmin;
	}
	
	input[type=email], input[type=text], textarea {
		font-size: 1.4vmin;
		line-height: 2.25vmin;
		padding: 1.125vmin 1.5vmin;
	    border-radius: 2.25vmin;
	}
	
	input[type=email], input[type=text] {
		width: calc(62%);
	}
	
	#formClose {
		top: 3vmin;
		right: 3vmin;
		font-size: 1.4vmin;
		line-height: 1.4vmin;
		padding: 0.7vmin;
		text-align: center;
		border-radius: 2.25vmin;
	}
	
	#logo {
		top: 6vmin;
		left: 6vmin;
	}
}

@media only screen and (min-width: 1280px) {
	#formBox {
		width: 38vw;
		margin-left: -19vw;
	}
	
	#logo svg {
		height: 9vw;
	}
}