@charset "UTF-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css? family=Raleway:900&display=swap");
/* giving a lil somtin to Google--> not all bad; Google deserves some credit for the resources that they provide*/ 
*, 
*::before, 
*::after {
    margin:0;
    padding:0;
  	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

body{ 
	
	background:linear-gradient(155deg, #7c15ff 25%, #adeee6 85%);
 	margin: 0;
	backdrop-filter: blur(3px) saturate(150%);
	background-size: cover;
	background-repeat: repeat;
	background-attachment:fixed;
	padding: 0px;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
	-webkit-text-size-adjust:100%;
	-moz-webkit-text-size-adjust:100%;
	-ms-webkit-text-size-adjust:100%;
	-o-webkit-text-size-adjust:100%;
		
}

html{ 
	background-color:#7c15ff;
	backdrop-filter: blur(3px) saturate(150%);
	overflow-x:hidden;
/*ignores browser safe area and cut off	*/
	
	
}

#mttop{ 
	position:relative; 
	left: 0; 
	right: 0; 
	border-radius: 30px;
	margin: 30px 0px 5px 0px;
	padding: 0px;
	width:90%;
	box-shadow: 7px 9px 12px 10px rgba(52, 60, 34, 0.5);
	z-index: -1;
	transform: translate(5%, -40%);
/*
	-moz-webkit-transform: translate(15%, 10%);
	-ms-webkit-transform: translate(15%, 10%);
	-o-webkit-transform: translate(5%, 10%);
*/

}

	[title]:hover::after{ 
	display: block; 
	font-size: 36px; 
	position: absolute; 
	content: attr(tooltip); 
}

.titleText{ 
	height:50vh;
	text-align: center;
	justify-content: center; 
	font-weight: bold;
	font-size:104px;
	right: 100px;
	font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
	text-transform: uppercase;
	color:rgba(244,250,255,1.00);
	text-shadow: -10px -1px 10px #eeeeee;
	animation: intro linear forwards 10s; 
/*	animation-delay: 1s;*/
	transition: 10s;
	z-index: 2;
/*	opacity:1;*/
	transform: translateY(35%);
/*
	-moz-webkit-transform: translateY(20%);
	-ms-webkit-transform: translateY(20%);
	-o-webkit-transform: translateY(20%);
*/
}
@keyframes intro{ 
	from { 
	opacity: 0; 
	}to { 
	opacity: 1; 
	}
	
}
	
	


/*to stitch: needs rwd*/
.wrapper{ 
 	
	font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
	wodth: 90%; 
	margin: 0 auto; 
	max-width: 80rem; 
	align-content: center;
	text-align: center;
	color: rgba(255,255,255,1.00);
/*	width: 75vw; keep as a note on different design*/
	transform: translate(0%, -15%);
/*	stitch this: RWD moves the wrapper to inline-grid*/
	

}

/*to stitch: needs rwd*/

.box{ 
	display: inline-grid;
/*	background-color: rgba(169,152,220,1.00);*/
	font-family: -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 24px;
	color:aliceblue;
	border-radius:  15px;
	padding: 15px;
	margin: 25px;
	width: 20vw; 
	height: 25vh;
	opacity: 0.9; 
/*	backdrop-filter: blur(1px) saturate(120%);*/
	background: rgba(255, 255, 255, 0.05); 
	backdrop-filter: blur(45px); 
	box-shadow: 7px 9px 12px 10px rgba(52, 60, 34, 0.5);
	text-align: center;
	align-content: center;
	transform: translateX(35%);
	}

.box-inner{ 
	position: relative; 
	width: 100%; 
	height: 100%; 
	text-align: center; 
	align-content: center;
	transition: transform 0.6s; 
	transform-style: preserve-3d; 
/*	box-shadow: 7px 9px 12px 10px rgba(52, 60, 34, 0.5);*/
}

.box:hover .box-inner{ 
	transform: rotateY(180deg); 
}

.box-front, .box-back{ 
	position:absolute; 
	width: 100%; 
	height: 100%; 
	-webkit-backface-visibility:hidden; 
	backface-visibility: hidden; 
}

.box-front{ 

	background: rgba(255, 255, 255, 0.5); 
	
}
.box-back{ 
	font-size: 24px;
	background-color: #2980b9; 
	color:white;
	transform: rotateY(180deg);
	
}

#date{
	position: fixed; 
	bottom: 2px; 
	width:100%; 
	color:rgba(255,255,255,1.00);
	font-size:12px;
	text-align:  center;
	z-index: 4;
	
	
}

@media screen and (max-width: 64rem){ 
	#mttop{ 
	 width: calc(85% - 2rem); 
	}
	.titleText{
		 
	 width: calc(110% - 2rem); 
		height: calc(110% - 2rem); 
		}
	}


@media screen and (max-width: 48rem){ 
	#mttop{ 
	 width: calc(90% - 1rem); 
	}
}

@media screen and (max-width: 32rem){ 
	#mttop{ 
	 	width: 100%; 
		margin: 0 0 2rem 0; 
	}
}