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

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

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

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

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

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

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

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

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

	margin: 10px;
    padding: 10px;
    
	border: 5px rgb(34, 123, 156) solid;
	border-radius: 10px;

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

a {		/* special text 1 */
	font-size: 18px;
    color: rgb(196, 152, 86);

	margin: 10px;
    padding: 10px;
}

footer {	/* special text 2 */
	font-size: 16px;
	font-family: Times;
    color: rgb(196, 152, 86);

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

.show_h, 
.show_v {	/* display for horizontal image */
	display: flex;
	align-items: center;
	margin: 10px;
    padding: 10px;
	flex-wrap: wrap;
	justify-content: center;
}
	

.box{
		display: inline-block;
		padding: 15px;
		border: 5px solid rgb(34, 123, 156);
		border-radius: 15px;
		background-color: rgb(194, 226, 237);

	}

.box nav img {	/* display for vertical image */
	display: block;
	margin: 0 auto;
border-radius:12px ;    
padding: 10px;
border: 5px solid rgb(34, 123, 156);
}
.show_h .box nav img {
		width: 200px;
		height: auto;
	}
.show_v .box nav img{
		width: 350px;
		height: 500px;
		object-fit: cover;
		object-position: center;
	}

.title {
	margin-top:10px ;
	padding: 6px 10px;
	font-size:20px ;
	font-weight: bold;
	color: rgb(34, 123, 156);
	border: 3px solid rgb(34, 123, 156);
	border-radius: 10px;
	background-color: rgb(194, 226, 237);
}

.show_h img{
	width: 1200px;
	height:auto;
}
.button {
	font-family: Verdana;
	font-size: 24px;
	font-weight: bolder;
	text-decoration: none;

	border-radius: 15px;
	border: none;

	cursor: pointer;
}
.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);
	}

.box {
	margin: auto;
    padding: 10px;
	max-width: 1000px;
	height: auto;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}
	.box article {
		font-size: 18px;
		max-width: 450px;
    	padding-bottom: 10px;
	}
	#fire {
		color: rgb(156, 56, 34);
		border: 5px rgb(156, 56, 34) solid;
		background-color: rgb(237, 200, 194);
	}
		#fire {
			color: rgb(237, 200, 194);
			background-color: rgb(156, 56, 34);
		}
		#fire:hover {
			color: rgb(156, 56, 34);
			border: 5px rgb(156, 56, 34) solid;
			background-color: rgb(237, 200, 194);
		}

	#water {
		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);
		}