@import url('https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&display=swap');

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

:root {
  --brown: #896833;
  --dark-green: #00463c;
  --green: #69937c;
  --cream: #ead5fa;
  --black: #000;
  --white: #fff;
}

html,body{
  height:100%;
}
body{
    font-family: 'Prompt', sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: var(--green);
    color:white;
    overflow:hidden;
    /*overflow:hidden;*/
}
a{
  text-decoration:none;
  color:white;
}
h1,h2,h3{
  text-transform:uppercase;
  font-weight:normal;
}

/*HEADER*/
#banner{
  background-color: var(--dark-green);
  background-image:url('images/header-bg.svg');
  padding:1rem;
  color: var(--white);
  font-weight:900;
  overflow:auto;
}
#banner ul{
  text-align:right;
  overflow:none;
  position:relative;
}
nav li{
  float:left;
  background-color: var(--green);
	border-radius:50%;
	color: black;
	display:table;
	height: 55px;
	width: auto;
	font-weight: bold;
	font-size: 1.2em;
	margin:0 auto;
	margin-right:2rem;
}
nav li:last-of-type{
  margin-right:0;
}
li.home{
  margin-right:68%; /*Change this when you need to add a new item to the main nav - 74 was default before gallery*/
  margin-left:1%;
}
li.home img{
  width:90%;
  height:auto;
  position:relative;
  top:2px;
}
nav li a{
  color: var(--dark-green);
  font-weight:900;
  display:table-cell;
	vertical-align:middle;
	height:55px;
	width:55px;
	text-align:center;
	padding: 0 15px;
}
#selected{
  background-color: var(--brown);
}

/*BODY*/
main{
  margin:2.5rem;
  margin-top:1.3rem;
}
main h1{
  color: var(--dark-green);
}

h1{
  font-weight:900;
}