* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,body{width: 100%; height:100%;}
div{margin:auto;}

.skeleton {
	border: 2px solid green;
	margin: 0px;
	padding: 4px;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.header {
	border: 2px solid black;
	margin: 4px;
	padding: 0px;
	height: 40px;
	min-height: 50px;
	display: flex;
	background-image: url("bounc.gif");
	flex-direction: row-reverse;
}

.main {
	border: 2px solid black;
	margin: 0px;
	padding: 4px;
	flex: 1;
	display: flex;
	flex-direction: row;
	background-image: url("cat.png");
	background-size: repeat;
}
.sidebar {
	display: flex;
	flex-direction: column;
	border: 4px solid red;
	margin: 2px;
	padding: 4px;
	left: 15px;
	width: 200px;
	overflow-y: auto
}
.content {
	float: left;
	border: 4px solid blue;
	margin: 2px;
	padding: 4px;
	flex: 1;
	overflow-y: auto;
	display: flex;
}
.button {
	margin: 2px;
	padding-top: 2px;
	height: 40px;
	border: 2px solid green;
	text-align: center;
	background-image: url("bounc.gif");
	background-size: cover;
}
.button:hover {
	margin: 2px;
	height: 40px;
	border: 3px solid red;
	text-align: center;
	text-shadow: 1px 1px black;
}
.button:active {
	margin: 2px;
	height: 40px;
	border: 4px solid blue;
	text-align: center;
	text-shadow: 1px 1px black;
	background-color: white;
	background-image: url("cat.png");
}
.lorem {
	height: 200%;
	flex: 1;
}

.social {
	width: 73px;
	border: 3px solid black;
}

.social:hover {
	width: 73px;
	border: 3px solid red;
}
.menu {
	width: 73px;
	border: 3px solid black;
	margin-right: auto;
}
.menu:hover {
	width: 73px;
	border: 3px solid red;
	margin-right: auto;
}