* {box-sizing: border-box}

body {
	font-family: "Lato", 
	sans-serif;
	background-color: #8080ff;
	color: white;
}

/* Style the tab */
.tab {
	float: left;
	background-color: #4040B0;
	width: 20%;
	height: 100%;
}

/* Style the buttons inside the tab */
.tab button {
	display: block;
	background-color: inherit;
	color: inherit;
	padding: 8px;
	width: 100%;
	border: none;
	border-top: solid 4px #8080BF;
	outline: none;
	text-align: left;
	cursor: pointer;
	transition: 0.3s;
	font-size: 17px;
}

.tab img {
	width: 40px;
	height: 40px;
	margin: 0 8px 0 0;
	object-fit:contain;
	background-color: inherit;
}

img.home {
	width: 20px;
	height: 20px;
	margin: 0 20px 0 0;
	object-fit:contain;
	background-color: inherit;
}

/* Change background color of buttons on hover */
.tab button:hover {
	color: #60FFFF;
}

/* Create an active/current "tab button" class */
.tab button.active {
	background-color: #8080ff;
}

/* Style the tab content */
.tabcontent {
	float: left;
	padding: 0px 12px;
	width: 80%;
	border-left: none;
	}

.texttabcontent {
	float: left;
	padding: 0px 12px;
	width: 600px;
	height:98vh;
	padding:8px;
	margin:1px 8px 8px 12px;
	border: solid 3px white;
	}

.tabcontent img {
	border: solid 3px white;
	max-height: 98vh;
	max-width: 77vw;
	}