* {

}

body {
	background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(./pictures/brickwall.jpg);
 	font-family: "segoe ui", helvetica;
 	margin: 0;
 	color: white;
}


h1, h2, h3, h4, h5, h6{
	line-height: 30px;
}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr; 
	grid-template-rows: 150px 220px 140px 140px 140px 140px 140px 140px 140px 140px 140px;
	grid-template-areas: 
	"linklogo title title title"
	"menu menu menu menu"
	"jmT jmT jminfo jminfo"
	"cRod cRod cRodinfo cRodinfo"
	"tony tony tinfo tinfo"
	"jdT jdT jdinfo jdinfo"
	"fmT fmT fminfo fminfo"
	"jPI jPI JPinfo JPinfo"
	"DanV DanV DanVinfo DanVinfo"
	"ChaC ChaC ChaCinfo ChaCinfo"
	"TanE TanE TanEinfo TanEinfo"
}


.linklogo {
	grid-area: linklogo;
	align-self: center;
	padding: 5px;
}

.title {
	grid-area: title;
	display: grid;
	justify-content: center;
	align-self: center;
	color: white;

}

P { 
    text-align: center;
    
}

.menu{
	grid-area: menu;
	background: #ac3939;
	align-self: center;
	justify-content: start;
	display: grid;
}	

.main-nav{
	list-style: none;
}

.main-nav li {
	margin: 0 0 10px 0;
}

.main-nav li a{
	text-decoration: none;
	padding: 5px 0px;
	font-weight: 600;
	font-family: "segoe ui", helvetica;
	font-size: 20px;
	color: white;
}

/* .COVID19 {
    grid-area: COVID19;
    align-self: center;
    padding: 5px;
    justify-content: center;
    
} */

.jmT {
	background: #FDF5E6;
	display: grid;
	grid-area: jmT;
	justify-content: left;
	padding-left: 30px;
 	padding-top: 15px;
	color: black;

}

.jminfo {
	background: #FDF5E6;
	display: grid;
	grid-area: jminfo;
	justify-content: left;
	padding-left: 30px;
	color: black;
	-webkit-box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.5);
}

.cRod {
	background: #DCDCDC;
	grid-area: cRod;
	display: grid;
	justify-content: left;
	padding-left: 30px;
 	padding-top: 15px;
	color: black;
}

.cRodinfo {
	background: #DCDCDC;
	grid-area: cRodinfo;
	display: grid;
	justify-content: left;
	padding-left: 30px;
	color: black;
	-webkit-box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.5);
	box-shadow: 10px 5px 10px rgba(0, 0, 0, 0.5);
}

.tony {
	background: #FDF5E6;
	padding: 0px 0px 0px 0px;
	display: grid;
	grid-area: tony;
	justify-content: left;
	color: black;
	padding-left: 30px;
 	padding-top: 15px;
}

.tinfo {
	background:#FDF5E6;
	display: grid;
	grid-area: tinfo;
	justify-content: left;
	padding-left: 30px;
	color: black;
	
}


.fmT {
	background: #FDF5E6;
	grid-area: fmT;
	display: grid;
	justify-content: left;
	color: black;
	padding-left: 30px;
 	padding-top: 15px;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
}

.fminfo {
	background: #FDF5E6;
	grid-area: fminfo;
	display: grid;
	justify-content: left;
	padding-left: 30px;
	color: black;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 

}

/* .jPI {
	background: #DCDCDC;
	grid-area: jPI;
	display: grid;
	justify-content: left;
	color: black;
	padding-left: 30px;
 	padding-top: 15px;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
}

.JPinfo {
	background: #DCDCDC;
	grid-area: JPinfo;
	display: grid;
	justify-content: left;
	padding-left: 30px;
	color: black;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 

} */

.cPr {
	background: #FDF5E6;
	grid-area: cPr;
	display: grid;
	justify-content: left;
	color: black;
	padding-left: 30px;
 	padding-top: 15px;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
}

.CPinfo {
	background: #FDF5E6;
	grid-area: CPinfo;
	display: grid;
	justify-content: left;
	padding-left: 30px;
	color: black;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 

}


.jdT {
        background: #DCDCDC;
	grid-area: jdT;
	display: grid;
	justify-content: left;
	color: black;
	padding-left: 30px;
 	padding-top: 15px;

}

.jdinfo {
	background: #DCDCDC;
	grid-area: jdinfo;
	display: grid;
	justify-content: left;
	padding-left: 30px;
	color: black;

}


.TanE {
	background: #FDF5E6;
	grid-area: TanE;
	display: grid;
	justify-content: left;
	color: black;
	padding-left: 30px;
 	padding-top: 15px;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
}

.TanEinfo {
	background: #FDF5E6;
	grid-area: TanEinfo;
	display: grid;
	justify-content: left;
	padding-left: 30px;
	color: black;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
}

.ChaC {
	background: #DCDCDC;
	grid-area: ChaC;
	display: grid;
	justify-content: left;
	color: black;
	padding-left: 30px;
 	padding-top: 15px;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
}

.ChaCinfo {
	background: #DCDCDC;
	grid-area: ChaCinfo;
	display: grid;
	justify-content: left;
	padding-left: 30px;
	color: black;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
}

.DanV {
	background: #DCDCDC;
	grid-area: DanV;
	display: grid;
	justify-content: left;
	color: black;
	padding-left: 30px;
 	padding-top: 15px;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
}

.DanVinfo {
	background: #DCDCDC;
	grid-area: DanVinfo;
	display: grid;
	justify-content: left;
	padding-left: 30px;
	color: black;
	-webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
	box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); 
}

.tony h3 {
	margin-top: -25px;
}

.jmT h3 {
	margin-top: -25px;
}
.cRod h3 {
	margin-top: -25px;
}

.fmT h3 {
	margin-top: -25px;
}

.jdT h3 {
	margin-top: -25px;
}

@media screen and (min-width: 769px){

	.grid{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 100px 120px 130px 130px 130px 130px 130px 130px;
		grid-template-areas:
			"linklogo menu menu menu"
			". title title ."
			". jmT jminfo ."
			". cRod cRodinfo ."
			". tony tinfo ."
			". jdT jdinfo ."
			". fmT fminfo ."
			". DanV DanVinfo ."
			". cPr CPinfo ."
			". ChaC ChaCinfo ."
			". TanE TanEinfo .";
	}

	.menu {
		grid-area: menu;
		display: grid;
		background: none;
		justify-content: flex-end;
	}

	.main-nav {
		margin-top: 20px
	}

	.main-nav li {
		display: inline-block;
		border-left: 1px solid white;
	}

	.main-nav li a{
		padding: 5px 25px;
		font-weight: 600;
		font-family: "segoe ui", helvetica;
		font-size: 20px;
		color: white;
	}

	.main-nav li a:hover {
		border: 3px solid white;
	}

	.tony h3 {
		margin-top: -50px;
		justify-content: center;
	}

	.jmT h3 {
		margin-top: -50px;
	}
	.cRod h3 {
		margin-top: -50px;
	}
	
	.jdT h3 {
		margin-top: -50px;
	}

	.fmT h3 {
		margin-top: -50px;
	}
	/* .jPI h3 {
		margin-top: -50px;
	} */
	
	.cPr h3 {
		margin-top: -50px;
	}
	
	.TanE h3 {
	    margin-top: -50px;
    }

    
    .ChaC h3 {
    	margin-top: -50px;
    }
    
    
    .DanV h3 {
    	margin-top: -50px;
    }
    
}