/* This .css file was made by Spencer Maley. For any questions, email swmaley02@gmail.com */

/* Sets website wide font to Arial */
*
{box-sizing: border-box;
font-family: Arial;}

html, body	{height: 100%;
			margin:0;}
			
/* Color of wrapper as well as padding around the wrapper */

#wrapper	{background-color: #702963;
			background-image: linear-gradient(to bottom, #FFFFFF, #cdb4db);
			padding:20px;}


/* Background information, as well as shadow code */

body {
    margin: 0;
    font-family: Arial;
    background-color: #E6E6FA;
    box-shadow: inset 0 0 75px rgba(0, 0, 0, 0.5);
     min-height: calc(100vh + 100px);
}

		


/* Center aligns top of website */

header	{text-align: center;}


/* Main title website wide for mobile */

h1	{font-family: Arial;
	margin-bottom: 0;
	margin-top: 0;
	letter-spacing: .25em;
	padding-top: .5em;
	padding-bottom: .5em;
	color: #800080;
	font-size: 300%;}

/* Nav bar for mobile */

nav {font-weight: bold;
	padding: 0;
	font-size: 133%;
	text-align: center;
	line-height: 1.7em}

nav a	{text-decoration: none;}

h2	{color: #800080;
	font-family: Arial;
	text-shadow: 1px 1px 1px #CCCCCC;
	font-size: 233%}

h3	{font-family: Arial;
	color: #800080;
	font-size: 167%;}
	
p	{font-size: 133%;}

dt {color: #002171; }



footer {font-size: 75%;
		font-style: italic;
		text-align: center;
		font-family: Arial; 
		padding: 2em;}
		


main	{padding-top: 1px;
		padding-right: 20px;
		padding-bottom: 20px;
		padding-left: 30px;
		display: block;
		background-color: #FFFFFF;
		overflow: auto;}

/* Main pictures of the website. url(****) are for all versions of the website. height and margins are changed with different media sizes */
	
#homehero	{height: 125px;
			background-image: url(home.jpeg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top;
			margin-bottom: 5%;
			margin-left: 5%;
			margin-right: 5%;}
			
#aboutushero	{height: 125px;
			background-image: url(aboutus.jpeg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top;
			margin-bottom: 5%;
			margin-left: 5%;
			margin-right: 5%;}

#philanhero {height: 125px;
			background-image: url(philan.jpeg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top;
			margin-bottom: 5%;
			margin-left: 5%;
			margin-right: 5%;}

#ourstoryhero {height: 125px;
			background-image: url(ourstory.jpeg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top;
			margin-bottom: 5%;
			margin-left:5%;
			margin-right: 5%;}

#membershiphero {height: 125px;
			background-image: url(membership.jpeg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top;
			margin-bottom: 5%;
			margin-left:5%;
			margin-right: 5%;}

#contacthero {height: 125px;
			background-image: url(contact.jpeg);
			background-size: contain;
			background-repeat: no-repeat;
			background-position: top;
			margin-bottom: 5%;
			margin-left:5%;
			margin-right: 5%;}
			
/* Links at the bottom of page */

.imageColumn	{display: flex;
				justify-content: space-between;
				max-width: 60%;
				margin: 0 auto;}

.imageColumn img	{width:65px;
					height:auto;
					object-fit: contain;
					border: 3px solid #800080;}


nav ul {list-style-type: none;
		margin: 0;
		padding-left: 0;
		font-size: 1.2em;
		}
		
/* Hyperlink customization */

nav a:link{color: #800080;}
nav a:visited{color: #800080;}
nav a:hover{color: #A52A2A;}




h3 a:link{color: #800080;}
h3 a:visited{color: #800080;}
h3 a	{text-decoration: none;}
h3 a:hover{color: #A52A2A;}

p a:link{color: #800080;}
p a:visited{color: #800080;}
p a	{text-decoration: none;}
p a:hover{color: #A52A2A;}

.text	{text-align: left;}


form	{display: flex;
		flex-flow: column nowrap;}


/* If the screen is greater or equal to 750 pixels long, it will make these changes */

@media only screen and (min-width: 750px) {
	
	form {width: 60%;
        max-width: 40em;
        display: grid;
        grid-gap: 1em;
        gap: 1em;
        grid-template-rows: auto;
        grid-template-columns: 9em 1fr;
    }
	
	
    something {
        grid-column: 2/3;
        width: 9em;
    }
    
	
	
	nav ul {display: flex;
			flex-wrap: none;
			justify-content:space-around;}
			
	nav li {border-bottom: none;
			padding: 1%;}
	
	section	{padding-right: 2em;
				padding-left: 2em;}
						
	.content main {   display: grid;
                  grid-template-rows: auto;
                  grid-template-columns: 1fr 1fr 1fr; }
                  
	.content h2         { grid-row: 1 / 2; grid-column: 1 / 5; }
	
	.content section    { grid-row: 2 / 3; grid-column: auto; }
	
	.content #special   { grid-row: auto; grid-column: 1 / 5; }
	
	.content footer     { grid-row: auto; grid-column: 1 / 5; }
	
	#homehero	{height: 300px;
			margin-bottom: 20px;
			margin-left: 20px;
			margin-right: 20px;}
			
#aboutushero	{height: 300px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#philanhero {height: 300px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#ourstoryhero {height: 300px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#membershiphero {height: 300px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#contacthero {height: 300px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

.imageColumn	{display: flex;
				justify-content: space-between;
				max-width: 60%;
				margin: 0 auto;}

.imageColumn img	{width:150px;
					height:auto;
					object-fit: contain;
					border: 3px solid #800080;}

	
}

/* Same as before but 1500 pixels */

@media only screen and (min-width: 1500px){
	nav	{text-align: left;
			padding-left: 1em;}
			
	nav ul {flex-direction: column;
			padding-top: 1em;}
			
	#wrapper {margin: auto;
				width: 80%;
				border: 1px solid #800080;
				box-shadow: 1px 1px #666666;
				display:grid;
				grid-template-rows: auto;
				grid-template-columns: 180px 1fr;}
				
	#wrapper header	{grid-row: 1/2; grid-column: 1/3;}
	
	#wrapper main {grid-row: 3/4; grid-column: 2/3;}
	
	#wrapper div {grid-row: 2/3; grid-column: 2/3;}
	
	#wrapper nav {grid-row: 2/5; grid-column: 1/2;}
	
	#wrapper section {grid-row: 2/3; grid-column: auto;}
	
	#wrapper footer {grid-row: 4/5; grid-column: 2/3;}
	
	#wrapper	{background-color: #702963;
			background-image: linear-gradient(to bottom, #FFFFFF, #cdb4db);
			padding-right: 180px;
			padding-bottom: 20px;
			padding-top: 20px;}
	
#homehero	{height: 300px;
			margin-bottom: 20px;
			margin-left: 20px;
			margin-right: 20px;}
			
#aboutushero	{height: 300px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#philanhero {height: 300px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#ourstoryhero {height: 300px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#membershiphero {height: 300px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#contacthero {height: 300px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

.imageColumn	{display: flex;
				justify-content: space-between;
				max-width: 40%;
				margin: 0 auto;}

.imageColumn img	{width:200px;
					height:200px;
					object-fit: contain;
					border: 3px solid #800080;}

	

}

/* Finally for screens 1700 pixels or wider */

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

#homehero	{height: 500px;
			margin-bottom: 20px;
			margin-left: 20px;
			margin-right: 20px;}
			
#aboutushero	{height: 500px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#philanhero {height: 500px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#ourstoryhero {height: 500px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#membershiphero {height: 500px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}

#contacthero {height: 500px;
			margin-bottom: 20px;
			margin-left:20px;
			margin-right: 20px;}
}