/* css reset rule */

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

/*
font-family: 'Dosis', sans-serif;
font-family: 'Kanit', sans-serif;

default fonts are 16px in size.
10 / 16 = 62.5%

now wecan use rem to size fonts.
*/

:root, html {
	font-size: 62.5% /* what is this percentage? */
}

body {
	background-color: hsla(200, 80%, 40%, 1);
	color: hsla(200, 80%, 98%, 1);
	font-family: 'Dosis', sans-serif;
}

header {
	height: 525px;
	background-image: linear-gradient(to right, hsla(200, 100%, 1%, .9) 30%, 
					  hsla(200, 100%, 1%, 0)), 
					  url(../images/night.jpg);
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	background-position: center center, 0px -250px; /* hor then vert */
	display: flex; /* makes the header a flexbox container */
	justify-content: left;
	position: relative;
	border-bottom: 6px solid yellow;
}

h1 {
	font-size: 8rem; /* 4rem = 40px; 1rem = 10px; 3.6rem = 36px; */
	align-self: center; /* only works on a flexbox item */
	padding-left: 1%; /* so my text isn't right on the edge */
}

header p {
	font-size: 4rem;
	color: yellow;
	position: absolute;
	align-self: center;
	top: 320px; 
	padding-left: 1%;
	font-weight: bold;	
}

#examples {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	gap: 12px;
	padding: 12px;
}

.exampleitem1 {
	border-radius: 6%;
	min-width: 300px; min-height: 260px;
	background-image: url(../images/island.jpg);
	background-size: cover;
}

.exampleitem2 {
	border-radius: 6%;
	min-width: 300px; min-height: 260px;
	background-image: url(../images/winter.jpg);
	background-size: cover;
}

.exampleitem3 {
	border-radius: 6%;
	min-width: 300px; min-height: 260px;
	background-image: url(../images/mountains.jpg);
	background-size: cover;
}

.exampleitem4 {
	border-radius: 6%;
	min-width: 300px; min-height: 260px;
	background-image: url(../images/waterfall.jpg);
	background-size: cover;
}

.exampleitem5 {
	border-radius: 6%;
	min-width: 300px; min-height: 260px;
	background-image: url(../images/africa.jpg);
	background-size: cover;
}

.exampleitem1:hover {
	border: 4px solid yellow;
}

.exampleitem2:hover {
	border: 4px solid yellow;
}

.exampleitem3:hover {
	border: 4px solid yellow;
}

.exampleitem4:hover {
	border: 4px solid yellow;
}

.exampleitem5:hover {
	border: 4px solid yellow;
}

.exampleitem6:hover {
	border: 4px solid yellow;
}