css-challenge

/*****************************************************
* CSS Mockup Activity - Custom CSS Stylesheet
* @author rlewis37
*
* Some rules have been included here to give you a head start.
* Create your own custom CSS rules below. Have fun!
******************************************************/
html, body {
	margin: 0;
	box-sizing: border-box;
}

.container {
	margin: 0 auto;
	padding: 0 2rem;
}

.clearfix {
	clear:both;
}

/* create a responsive container */
@media only screen and (min-width: 1200px) {
	.container { width: 1170px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.container { width: 970px; }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	.container { width: 750px; }
}

/*****************************************************
* Flexbox Sticky Footer
* http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
******************************************************/

/*corrects IE min-height bug*/
html { display: flex;}
body { width: 100%;}

.sfooter {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.sfooter-content {
	flex: 1 0 auto;
}

/*****************************************************
* ADD YOUR OWN CSS BELOW! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
*
* HINT: You might want to be conversant with the following:
* * Shorthand syntax for padding, margin, and borders
* * Display property and values... and the differences between them.
* * The Box Model
* * Pseudo Classes
* * Attribute Selectors
******************************************************/

/*****************************************************
* Global rules
 ******************************************************/
body {
	font-family: monospace,"Courier New";
}

section {
	padding: 2.5rem 0;
}

/*****************************************************
* Header Rules
 ******************************************************/

header {
	background-color:  #333;
	color: lime;
}

header h1 {
	display: inline-block;
	margin-right: 1.5rem;
	font-size:  2.5rem;
}

/*****************************************************
* Welcome Styles
 ******************************************************/
img[alt="welcome to my homepage"] {
	display:block;
	margin: 0 auto 2rem;
}

.instructions-wrapper {
	display: flex;
	align-items: flex-start;
	border : 3px solid black;
	padding: 20px;
}

.instructions-wrapper img{
	width: 250px;
}

.instructions-content {
	flex: 1;
	padding-right: 2rem;
}

.instructions-content h2{
	margin-top: 0
}
/***************************
about me
****************************/
section.about-me{
	background-color: blue;
	color: #fff;
}

.about-me img {
	width: 300px;
	float: left;
	margin-right: 2rem;
	border: 3px solid white;
}

.about-me p span {
	color: yellow;
	font-style: italic;
}

/****************************
SKILLZ
*****************************/

section:nth-child(4) h2 {
	text-align: right;
	margin-top: 0;
}

section:nth-child(4) table {
	width:100%;
	color: lime;
}

section:nth-child(4) table td,
section:nth-child(4) table tr
{
	background-color: #333;
	padding: 10px;
}

/*****************************************************
* contact styles
******************************************************/
div.sfooter-content section:last-child {
	background-color: #333;
}

.form-wrapper {
	background-color: darkgreen;
	color:lime;
	padding: 20px;
}

label {
	display: flex;
	margin: 15px 0 5px 0;
}

input, textarea {
	width: 30%;
	padding: 8px;
}

button {
	background-color: lime;
	padding: 18px 31px;
	font-weight: bold;
	font-size: 1rem;
	border: none;
}

form div:nth-child(4) {
	margin-bottom: 15px;
}

.form-wrapper h2 {
	margin-top : 0;
}
/*
 Footer
 */

footer {
	background-color : black;
	color: white;
	text-align: center;
}