/* ----------------- */
/* gabby jay dot com */
/* ----------------- */

* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font-size: 2rem;
	margin: 0;
	padding: 0;
	text-align: center;
}

.main {
	background: transparent url(../img/gabbyjay.png) top center fixed no-repeat;
	background-size: cover;
	height: 100%;
	position: absolute;
	width: 100%;
}

.controls {
	align-items: center;
	background: rgba( 0, 0, 0, .5 );
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

button {
	background: transparent;
	border: .3rem solid #fff;
	border-radius: .5rem;
	box-shadow: .1rem .2rem 0 #000;
	color: #fff;
	cursor: pointer;
	font-family: 'Press Start 2P', sans-serif;
	font-size: clamp(2rem, 15vw, 5rem);
	outline: none;
	padding: 2vh 2vw;
	text-shadow: .1rem .2rem 0 #000;
	text-transform: uppercase;
}

	button:active {
		box-shadow: none;
		text-shadow: none;
		transform: translate( 0, .3rem );
	}

.gabby {
	background: transparent url(../img/yay.gif) right 0 no-repeat;
	background-size: 21vh;
	height: 26vh;
	position: fixed;
		bottom: -26vh;
		right: 3vw;
	-webkit-transition: .2s -webkit-transform ease-in-out;
		 -moz-transition: .2s -moz-transform ease-in-out;
			 -o-transition: .2s -o-transform ease-in-out;
					transition: .2s transform ease-in-out;
	width: 25vh;
}

.jay {
	-webkit-transform: translate( 0, -26vh );
		 -moz-transform: translate( 0, -26vh );
			-ms-transform: translate( 0, -26vh );
					transform: translate( 0, -26vh );
}