html {
	background-color: rgb(156, 56, 34);
    text-align: center;
}

body {
    padding: 30px;
	margin: 60px;
	height: 100%;

	border: 5px rgba(139, 37, 32, 0.766) solid;
    border-radius: 20px;
	box-shadow: rgb(255, 255, 255) 0px 0px 30px;

	background-color: rgb(237, 200, 194);
}

header {	/* tital */
	font-family: Verdana;
    font-size: 42px;
    color: rgb(237, 200, 194);
    
    padding: 10px;
	margin: 10px;
    
	border-radius: 10px;
	
    background-color: rgb(156, 56, 34);
}

nav {	/* subtital */
	font-family: Verdana;
    font-size: 28px;
    color: rgb(237, 200, 194);

	margin: 10px;
    padding: 10px;
    
	border-radius: 15px;

	background-color: rgb(156, 56, 34);
}

article {	/* text */
    font-size: 20px;
    color: rgb(156, 56, 34);

	margin: auto;
    padding: 10px;
	max-width: 300px;
    
	border: 5px rgb(156, 56, 34) solid;
	border-radius: 10px;

	background-color: rgb(237, 200, 194);
}

a {		/* special text 1 */
	font-size: 18px;
    color: rgb(179, 136, 73);

	margin: 10px;
    padding: 10px;
}

footer {	/* special text 2 */
	font-size: 16px;
	font-family: Times;
    color: rgb(179, 136, 73);

    padding: 10px;
	margin: 0px auto;
}

.show_v {	/* display for vertical image */
	display: flex;
	align-items: center;
	margin: 10px;
    padding: 10px;
	flex-wrap: wrap;
	justify-content: start;
}
	.show_v img {
		width: 280px;
		height: auto;
		margin-right: 20px;
	}
	#box_v {
		display: inline-block;
		max-width: 280px;
		width: auto;
		height: 400px;
		margin: 10px;
	}

.text_show {	/* special text inside 'show' */
	margin: 0px;
	flex-direction: column;
	justify-content: start;
	height: auto;
}
	.text_show nav{
		font-size: 24px;
		margin: 0px;
	}
	.text_show article{
		font-size: 16px;
		border-radius: 21px;
		margin: 0px;
		padding: 0px;
	}

.button {	/* button */
	font-family: Verdana;
	font-size: 24px;
	font-weight: bolder;
	text-decoration: none;
	color: rgb(211, 217, 189);

	padding: 0px;
	margin: 10px;

	border-radius: 15px;
	border: none;
	border: 5px rgb(69, 96, 75) solid;

	background-color: rgb(69, 96, 75);

	cursor: pointer;
}
	.button:hover {	/* change the colour of the button while the cursor is on it */
		color: rgb(69, 96, 75);
		border: 5px rgb(69, 96, 75) solid;
		background-color: rgb(211, 217, 189);
	}
	#water {
		color: rgb(34, 123, 156);
		border: 5px rgb(34, 123, 156) solid;
		background-color: rgb(194, 226, 237);
	}
		#water {
			color: rgb(194, 226, 237);
			background-color: rgb(34, 123, 156);
		}
		#water:hover {
			color: rgb(34, 123, 156);
			border: 5px rgb(34, 123, 156) solid;
			background-color: rgb(194, 226, 237);
		}
	#air {
		color: rgb(34, 156, 148);
		border: 5px rgb(34, 156, 148) solid;
		background-color: rgb(210, 238, 236);
	}
		#air {
			color: rgb(210, 238, 236);
			background-color: rgb(34, 156, 148);
		}
		#air:hover {
			color: rgb(34, 156, 148);
			border: 5px rgb(34, 156, 148) solid;
			background-color: rgb(210, 238, 236);
		}
	#earth {
		color: rgb(129, 96, 56);
		border: 5px rgb(129, 96, 56) solid;
		background-color: rgb(231, 218, 199);
	}
		#earth {
			color: rgb(231, 218, 199);
			background-color: rgb(129, 96, 56);
		}
		#earth:hover {
			color: rgb(129, 96, 56);
			border: 5px rgb(129, 96, 56) solid;
			background-color: rgb(231, 218, 199);
		}