/* color of header/nav bar */
head{
	background-color: #F9ECCC;
}

/* color of the rest of the page */
body{
	font-family: 'Nunito';
    background-color: #F9ECCC;
	color: #00120B;/* text color */
}

/* spacer directly underneath nav bar, to push everything on the page down the width of the nav bar */
#spacer{
	position: relative;
	top: 0;
	width: 100%;
	height: 5em;
	background-color: white;
	opacity: 0;
	z-index: 1;
}

/* put responsive page elements here (e.g. navbar...) */


/* div.teamprofiles { */
/*     box-sizing: border-box; */
/* } */

/* div.sponsorprofiles { */
/*     box-sizing: border-box; */
/* } */




div.card {
    box-sizing: border-box;
    border: none;
    border-radius: 10px;
    color: white;
    background-color: #35605A;
    z-index: 2;
}

div.card:hover {
    background-color: #35CE8D;
    color: white;
}


div.card img {
    box-sizing: border-box;
    width: 100%;
    height: calc(calc(100vw - 41px) / 5);
    height: auto;
    object-fit: cover;
    height: auto;    
}

div.blurb {
    font-size: 13px;
    padding-bottom: 5px;
    padding-top: 3px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}

div.card_name{
    font-weight: bold;
    font-size: 15px;
    padding: 15px;
    text-align: center;
}


.page_title{
    font-size: 30px;
    text-align: center;
}

.page_title_blurb{
    font-size: 15px;
    text-align: center;

}


div.title_chunk{
    text-align: center;
    text-decoration: none;
    position: relative;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.responsive {
    padding: 6px;
    float: left;
    width: 33.3333%;
    box-sizing: border-box;
    z-index: 3;
}



@media only screen and (max-width: 1200px){
    .responsive{
        width: 49.88%;
    }
}

@media only screen and (max-width: 650px){
    .responsive{
        width: 100%;
        
    }
}

#navmenu{
transform: translate(-100%, 0);
}
#navtoggle{
	top: 2em;
}
#navtoggle input:checked ~ ul{
transform: none;
}
#navtoggle span{
background: #3AB64B;
}


/* #topher { */
/* 	float: right; */
/* } */
/* #luke { */
/* 	float: right; */
/* } */
/* #joe{ */
/* 	float: right; */
/* } */

/* @media screen and (min-width:1600px){ */
/* 	.responsive{ */
/* 		width: calc(var(--screenwidth) / 6); */
/* 	} */
/* } */
/* @media screen and (min-width: 750px) and (max-width: 1600px){ */
/* 	.responsive{ */
/* 		width: calc(var(--screenwidth) / 3); */
/* 	} */
/* } */
/* @media screen and (max-width: 750px){ */
/* 	.responsive{ */
/* 		width: var(--screenwidth); */
/* 	} */
/* } */