/************ Body ***************/

body {
	--white: #ffffff;
	--offwhite: #f3f2eb;
	--ltyellow: #f3f1da;
    --yellow: #ece8ac;
    --dkyellow: #ac8f03;
	--ltbrown: #d6d1c6;
	--brown: #837013;
	--dkbrown: #463a01;
	--black: #1b1700;
	color: var(--dkbrown);
	background-color: var(--ltbrown);
	font-size: 1.2em;
    font-family: "Montserrat", 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	line-height: 1.4em;
}

#container {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	background-color: var(--ltyellow);
	padding: 40px;
}

a {
	text-decoration: none;
}

h1, h2, h3 {
    font-family: "Tektur", 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

h1 {
	font-size: 3em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.3em;
}

a:link, a:visited {
    color: var(--brown);
}

a:hover, a:active {
    color: var(--dkyellow);
}

/************ Header ***************/

ul {
	list-style-type: none;
}

#tag {
	padding-right: 40px;
	padding-left: 40px;
}

#pair {
	display: grid;
	grid-template-columns: 300px 300px;
	justify-content: space-evenly;
	align-items: last baseline;
	padding-right: 60px;
	padding-left: 60px;
}

header img {
	border: solid var(--dkbrown);
	border-radius: 10px;

}

/********* Top *************/

#top {
    padding-bottom: 40px;
}

/********* Middle ************/

#middle {
    padding-bottom: 40px;
}

/************ Card ***************/

#grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	place-items: center;

}

.card {
	width: 340px;
	height: 340px;
	border: solid var(--dkbrown);
	border-radius: 10px;
	background-color: var(--offwhite);
	margin: 20px;
	padding: 20px;
}

.card img {
	margin-top: 15px;
	margin-left: 15px;
	width: 300px;
	border: solid var(--dkbrown);
	border-radius: 10px;
}

.card h3 {
	text-align: center;
}

/********* Footer ***********/

footer {
    padding-bottom: 60px;
	text-align: center;
}