@charset "utf-8";

body {
	padding: 40px 0px;
	font-size: 1em;
	font-family: 'Montserrat', sans-serif;
	line-height: 1.4em;
}

p {
	margin: 15px 0px;
}

li {
	padding-bottom: 20px;
}

a {
	text-decoration: none;
}

/*****Header*****/
header {
    position: relative;
	margin-top: 40px;
	margin-bottom: 200px;
}

header img {
    position: absolute;
	top: 50px;
	right: 10px;
}

#big-pic-one {
	display: none;
}

#welcome {
	position: absolute;
	top: -20px;
	right: 60px;
	font-size: 2.5em;
	font-family: 'Rock 3D', cursive;
}

header h1 {
	font-size: 1em;
	position: absolute;
	top: 30px;
	right: 70px;
}

#blue-blob {
    position: absolute;
    top: -50px;
	right: 25px;
	z-index: -1;
    width: 300px;
    height: 150px;
    background-color: #A7B1BF;
    border-radius: 200px 80px ;
}

/****Main*****/

main {
	margin-bottom: 60px;
}

/*****Top******/
#top {
	background-color: #A7B1BF;
	padding: 30px 15px 15px 15px;
	margin-bottom: 15px;
}

#top img {
    display: none;
    border-radius: 150px;
}

#top p {
	text-align: center;
}

#bar {
	position: absolute;
	top: 260px;
	left: 0px;
	height: 5px;
	width: 80px;
	background-color: #707070;
	border-radius: 0px 30px 30px 0px;
}

.italic-text {
    font-style: italic;	
}

/****Assignments Section*****/

.assignments {
	position: relative;
	padding: 0px 20px;
}
.assignments h2 {
	font-size: 1.5em;
	font-weight: bold;
	padding: 30px 40px 30px 0px;
}

h3 {
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
    padding-bottom: 40px;
}

.assignments section {
	margin-bottom: 60px;
}


#section-one a:link, a:visited {
    text-decoration: none;
    color: #313131; 
}

#section-one a:hover, a:active {
    text-decoration: none;
    color: #E31414;
}


#section-two a:link, a:visited {
    text-decoration: none;
    color: #313131;
}

#section-two a:hover, a:active {
    text-decoration: none;
    color: #54B500;
}

/*****Footer*****/

footer {
	background-color: #A7B1BF;
	text-align: center;
	padding: 20px 
}

footer section {
	margin-bottom: 20px;
}

footer section:first-of-type {
    border-bottom: 2px solid #707070;
}

.footer-links a:link, a:visited {
	font-weight: bold;
    text-decoration: none;
    color: #313131;
}

 .footer-links a:hover, a:active {
	font-weight: bold;
    text-decoration: none;
    color: #54B500;
}

/****RESPONSIVE DESIGN*****/

@media only screen and (min-width: 500px){
	
	#welcome {
		top: -20px;
		right: 150px;
		font-size: 3.5em;
	}
	
/***Header Circles*****/
	
	#circle-row {
		display: flex;
		position: absolute;
		top: 50px;
		left: 30px;
	}
	#circle-one {
		width: 20px;
		height: 20px;
		margin: 0px 20px;
		border-radius: 150px;
		background-color: #A7B1BF;
	}

	#circle-two {
		width: 20px;
		height: 20px;
		margin: 0px 20px;
		border-radius: 150px;
		background-color: #7A8390;
	}

	#circle-three {
		width: 20px;
		height: 20px;
		margin: 0px 20px;
		border-radius: 150px;
		background-color: #707070;
	}
/*****Top****/
	
	#top {
		display: flex;
		padding-top: 50px;
		padding-bottom: 20px;
	}
	
	#bar {
		width: 120px;
	}
	
	#top img {
		display: block; 
	}
	
	#top p {
		text-align: left;
		padding: 0px 10px 0px 10px;
		width: 90%;
	}
	
	#top p:first-of-type {
		padding-top: 30px; 
	}
	
/****Assignments***/
	.assignments {
		padding-left: 50px;
		padding-right: 50px;
	}
	
@media only screen and (min-width: 600px){
	
/****Header Circles*****/
	#circle-row {
		left: 80px;
	}
	#circle-one {
		margin: 0px 20px;
	}

	#circle-two {
		margin: 0px 35px;
	}

	#circle-three {
		margin: 0px 35px;
	}
}

@media only screen and (min-width: 700px){
	body {
		width: 700px; 
		margin: auto;
		padding: 80px 0px;
	}
	
/*******Header******/
	#welcome {
		right: 300px;
		top: -20px;
		font-size: 4.3em;
	}
	
	header h1 {
		right: 100px;
		top: 35px;
	}

	#blue-blob {
		width: 400px;
	}
	
	header img {
		display: none;
	}
	
	#big-pic-one {
		display: block;
	}
	
/***Main***/
	main {
		position: relative;
	}

/*****Top****/
	#bar {
		top: 20px; 
	}
	
	#top p {
		width: 90%; 
		text-align: center; 
	}
	
/****Assignments*****/

	.assignments section {
		flex: 1;
	}
	
	#section-one {
		position: relative;
		padding-right: 25px;
	}
	
	#section-two {
		position: relative;
		padding-right: 25px; 
	}
	
	.assignments h3 {
		text-align: left;
	}
	
/****Footer****/
	footer {
		display: flex;
		background-color: #FFFFFF;
		border-top: 2px solid #707070;
	}
	
	
	footer section:first-of-type {
		flex: 50%;
		border-bottom: none;
    	border-right: 2px solid #707070;
		padding-right: 20px;
	}
	
	footer section:last-of-type {
		flex: 50%;
		padding-left: 20px; 
	}
}
	
@media only screen and (min-width: 960px){
	
	body {
		width: 960px;
		margin: auto;
		padding: 80px 0px;
	}

/*****Header*****/

	header img {
    	right: 50px;
	}

	#welcome {
		font-size: 6em;
		right: 425px;
		top: -40px;
	}

	header h1 {
		font-size: 1.3em;
		top: 30px;
		right: 115px;
	}

	#blue-blob {
		right: 0px;
  	 	width: 600px;
  		height: 150px;
	}

/***Header Circles*****/

	#circle-one {
		width: 25px;
		height: 25px;
		margin: 0px 35px;
	}

	#circle-two {
		width: 25px;
		height: 25px;
		margin: 0px 35px;
	}

	#circle-three {
		width: 25px;
		height: 25px;
		margin: 0px 35px;
	}

/*****Main*****/
	main {
		display: flex;
	}

/******Top*****/
	#top {
		position: relative;
		flex: .7;
		padding: 300px 20px 20px;
		border-radius: 30px;
	}

	#top img {
		position: absolute;
		top: 20px;
		left: 30px;
	}

	#bar {
		top: 325px;
	}	

	#top p {
		text-align: left;
		margin-left: 8px;
		margin-right: 8px;
	}

/*****Assignments Section******/
	.assignments {
		padding: 30px 0px 0px 70px;
		flex: 2; 
	}

}
	
	
	
	
}