body {
    background-color: #ddace3;
    color: #ddace3;
    font-family: sans-serif;
    
}

a {text-decoration: none;
	color:#7083b5;

}

img {
    max-width: 100%;
    max-height: 100%;
    width: auto\9; /* ie8 */
}

h4{
	color: white;
}

.wrapper {
  display: flex;
  flex-flow: row wrap;
  height:100vh;
  background-image: url("images/pinkbackground2.png");
}

.header{
	height: 60px;
	width: 100%;
	background-color:#8b28be;
	margin:0;
	border:0;
	display:inline;
	background-image: url("images/headerfooter.jpg");

}

.container {
	display: flex;
	width:300px;
	height: auto;
	margin: auto;
	flex-direction: column;
	flex-flow: wrap;
	justify-content: center;
	border-color: black;
	border-style: solid;
	border-radius: 10px;
	border-width: 3px;
	/*background-image: url("images/panelbackground.png");*/
	background: rgb(205,0,255);
	background: linear-gradient(0deg, rgba(205,0,255,0.5) 0%, rgba(96,0,186,0.5) 50%, rgba(0,212,255,0.5) 100%);
}

.main {
	float:right;
	background-color:#8b28be;
	width: 70%;
	height: 70%;
	/*margin:40px;*/
	margin-left: 100px;
	padding: 30px;
	background-image: url("images/mainbackground.jpg");
	overflow-y: scroll;
	color: #e997bb;


}



.item {
	flex: none;
	width: 110px;
	height: 40px;
	margin: 5px;
	text-align: center;
	transition: background-color 0.5s ease;
 	background-color: #8ee6dd;
 	 line-height: 40px;

}

.item:hover{
background-color: #4d009c;
}


.maincontent{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	margin:10px;
	min-width:200px;
	min-height:50px;
	background-color: #120027;
	padding:10px;
	text-align: center;

	

}



/*@media all and (max-width: 1000px) {
  .container {
  	min-width:250px;
  	width:80%;
	height:30%;
	margin-left:15%;
	margin-bottom: 5px;
	margin-top: 5px;

    
  }
  .item {
	flex-wrap: row-wrap;
	margin: 5px;
}
	.main{
		padding:10px;
		margin:10px;
		
		width:100%;
	}

}