/*-----------------------------------------------------------------------------------

   Site Name: A Type Supreme
   Theme URL: https://atypesupreme.com
   Description: A survey of student work exploring typography and webdesign at Ball State University.
   Author: Devon Ward
   Author URI: https://devon-ward.design
   License: GNU General Public License version 3.0
   License URI:  http://www.gnu.org/licenses/gpl-3.0.html 

-----------------------------------------------------------------------------------*/

/*-----------------------------------------------------------------------------------
	Table of Content
-------------------------------------------------------------------------------------

	1.0 General Styles
	2.0 Grid Styles
	3.0 Font Styles
	4.0 Media Queries
	
-------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------*/


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

body, html {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	background-color:white;
}
body:after{
    position:absolute; 
    z-index:-1;
    top:-9999px;
    display:block;
    height:1px;
    width:1px;
    left:-9999px;
    content: url("../img/DIN1-hover.png")
		url("../img/DIN2-hover.png")
		url("../img/Baskerville-hover.png")
		url("../img/Bodoni-hover.png")
		url("../img/Caslon-hover.png")
		url("../img/Didot-hover.png")
		url("../img/FranklinGothic-hover.png")
		url("../img/Futura-hover.png")
		url("../img/Garamond-hover.png")
		url("../img/GillSans1-hover.png")
		url("../img/GillSans2-hover.png")
		url("../img/NeueHaasGrotesk1-hover.png")
		url("../img/NeueHaasGrotesk2-hover.png")
		url("../img/Rockwell-hover.png")
}

html {
	
}

.intro-vid-container,
.ihearttype-vid-container {
	width:100%;
	max-width:1200px;
	margin:0 auto;
	
	padding:50px 50px;
}


.intro-vid-container {
	height:90vh;
}

.ihearttype-vid-container {
	height:50vh;
	margin-top:50px;
}

.intro-vid,
.ihearttype-vid {
    position: relative;
    top: 50%;
    transform: translateY(-54%);
}

/*-----------------------------------------------------------------------------------
	2.0 Media Queries
-----------------------------------------------------------------------------------*/

.grid-container { 
	position:relative;
	width:100vw;
	max-width:1200px;
	margin:0 auto;
	margin-top:50px;
	display: grid;
	grid-gap:30px 30px;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(350px, auto);
	
	
	padding:0;
}

.text-grid-container { 
	position:relative;
	width:100vw;
	
	max-width:1200px;
	margin:0 auto;
	margin-top:50px;
	display: grid;
	grid-gap:30px 30px;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: minmax(350px, auto);
	
	padding:0;
}

.grid-item,
.text-grid-item {
	position:relative;
	grid-column: span 1;
	grid-row: span 1;
	
}

p {
	position:relative;
	width:100%;
	margin:0;
	padding:0;
	
	
}

a {
	text-decoration:none;
}
/*-----------------------------------------------------------------------------------
	3.0 Font Styles
-----------------------------------------------------------------------------------*/

h2 a{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	text-align: center;
	font-size:35px;
	text-indent:-9999px;
	cursor: pointer;
}

p {
	font-size:25px;
	color:black;
	line-height:35px;
	
}
p sup, p sub {
	font-size:12px;
	line-height: 0;
	
}

.callout {
	border-top:1px solid black;
	border-bottom:1px solid black;
	margin-top:12px;
	margin-bottom:25px;
	font-size:85px;
	font-style: italic;
	color:black;
	line-height:90px;
	padding-top:10px;
	padding-bottom:20px;
	color: black;
	  -webkit-text-fill-color: white; /* Will override color (regardless of order) */
	  -webkit-text-stroke-width: 1px;
	  -webkit-text-stroke-color: black;
	
}

.text-grid-item {
		margin:10px auto;
		padding:0 10px;
		
	}
a,
a:hover,
a:active,
a:link {
	color:black;
	text-decoration:underline;
}

a:hover {
	color:grey;
}


#din1,
#gill-sans1,
#neue-haas-grotesk1,
#baskerville1,
#rockwell2,
#din2,
#gill-sans2,
#neue-haas-grotesk2,
#garamond2,
#caslon2,
#didot2,
#futura2,
#bodoni2 {
	background-size:contain;
	background-position: center center;
	background-repeat: no-repeat;
}


#din1 {
	background-image: url("../img/DIN1.png");
}

#din1:hover {
	background-image: url("../img/DIN1-hover.png");
}

#gill-sans1 {
	background-image: url("../img/GillSans1.png");
}

#gill-sans1:hover {
	background-image: url("../img/GillSans1-hover.png");
}

#neue-haas-grotesk1 {
	background-image: url("../img/NeueHaasGrotesk1.png");
}

#neue-haas-grotesk1:hover {
	background-image: url("../img/NeueHaasGrotesk1-hover.png");
}

#baskerville1 {
	background-image: url("../img/Baskerville.png");
}

#baskerville1:hover {
	background-image: url("../img/Baskerville-hover.png");
}

#rockwell2 {
	background-image: url("../img/Rockwell.png");
}

#rockwell2:hover {
	background-image: url("../img/Rockwell-hover.png");
}

#din2 {
	background-image: url("../img/DIN2.png");
}

#din2:hover {
	background-image: url("../img/DIN2-hover.png");
}

#gill-sans2 {
	background-image: url("../img/GillSans2.png");
}

#gill-sans2:hover {
	background-image: url("../img/GillSans2-hover.png");
}

#neue-haas-grotesk2 {
	background-image: url("../img/NeueHaasGrotesk2.png");
}

#neue-haas-grotesk2:hover {
	background-image: url("../img/NeueHaasGrotesk2-hover.png");
}

#garamond2 {
	background-image: url("../img/Garamond.png");
}

#garamond2:hover {
	background-image: url("../img/Garamond-hover.png");
}

#caslon2 {
	background-image: url("../img/Caslon.png");
}

#caslon2:hover {
	background-image: url("../img/Caslon-hover.png");
}

#didot2 {
	background-image: url("../img/Didot.png");
}

#didot2:hover {
	background-image: url("../img/Didot-hover.png");
}

#futura2 {
	background-image: url("../img/Futura.png");
}

#futura2:hover {
	background-image: url("../img/Futura-hover.png");
}

#bodoni2 {
	background-image: url("../img/Bodoni.png");
}

#bodoni2:hover {
	background-image: url("../img/Bodoni-hover.png");
}




/*-----------------------------------------------------------------------------------
	4.0 Media Queries
-----------------------------------------------------------------------------------*/
/* 1200px break point */

@media only screen and (max-width: 1200px) {
	

	.grid-container {
		
		
		
		grid-auto-rows: minmax(290px, auto);
		
	}

}

/* 1200px break point */

@media only screen and (max-width: 1000px) {
	

	.grid-container {
		
		
		
		grid-auto-rows: minmax(240px, auto);
		
	}
	.grid-container,
	.text-grid-container {
		padding:0 0;
	}
	.text-grid-item {
		margin:10px auto;
		padding:0 10px;
		
	}
	
	

}

/* 730px break point */

@media only screen and (max-width: 800px) {
	.intro-vid-container {
		height:55vh;
		padding:0;
		padding-top:20px;
		padding-bottom:0;
	}
	.ihearttype-vid-container {
		padding:0;
		padding-bottom:0;
		margin:0;
		margin-top:-20px;
	}
	.intro-vid {
	    position: relative;
	    top: 50%;
	    transform: translateY(-70%);
	}
	.grid-container,
	.text-grid-container {
		grid-gap:30px 30px;
		grid-template-columns: repeat(1, 1fr);
		grid-auto-rows: minmax(350px, auto);
		width:100%;	
	}
	.text-grid-container.footer {
		grid-auto-rows: minmax(auto, auto);
	}
	
	.text-grid-container {
		margin-top:0;
		padding-top:0;
		padding:0;
	}
	
	.footer .text-grid-item {
		margin:10px auto;
		padding:0 10px;
		
	}

}

/* 600px break point */

@media only screen and (max-width: 600px) {
	
		.intro-vid-container {
			margin-top:30px;
			height:50vh;
		}
	
		.grid-container,
		.text-grid-container {
			
		
		
		grid-gap:50px 50px;
		grid-gap:0;
		grid-auto-rows: minmax(290px, auto);
		
		}
		.text-grid-item {
			max-width:90%;
			margin:0 auto;
		}
		.text-grid-item {
		margin:10px auto;
		padding:0 10px;
		
	}
		.callout {
			font-size:70px;
		}
}

/* 400px break point */

@media only screen and (max-width: 400px) {
	
		
		.callout {
			font-size:60px;
		}
}