/* 
      .--..--..--..--..--..--.
    .' \  (`._   (_)     _   \
  .'    |  '._)         (_)  |
  \ _.')\      .----..---.   /
  |(_.'  |    /    .-\-.  \  |
  \     0|    |   ( O| O) | o|
   |  _  |  .--.____.'._.-.  |
   \ (_) | o         -` .-`  |
    |    \   |`-._ _ _ _ _\ /
    \    |   |  `. |_||_|   |
    | o  |    \_      \     |     -.   .-.
    |.-.  \     `--..-'   O |     `.`-' .'
  _.'  .' |     `-.-'      /-.__   ' .-'
.' `-.` '.|='=.='=.='=.='=|._/_ `-'.'
`-._  `.  |________/\_____|    `-.'
   .'   ).| '=' '='\/ '=' |
   `._.`  '---------------'
           //___\   //___\
             ||       ||
             ||_.-.   ||_.-.
            (_.--__) (_.--__)
       

 Insert all your glorious CSS styles below! */

/* crete-round-regular - latin */


body {
  margin: 0;
  border: 0;
  font-family: Helvetica, Arial, sans-serif;
		margin: 0;
}

h1 {
  font-size: 2.44rem;
}

h2 {
  font-size: 2.00rem;
}

p {
  font-size: 1rem;
}

h1,
h2 {
  text-align: center;
}

/* CSS boxes container */
.gridContainer {
  display: grid;
  border: none;
  border-radius: none;
  width: 80%;
 height: 1000px;
 grid-template: repeat(3, 1fr)/*rows*/ / repeat(4, 1fr);/*columns*/
 gap: 15px;
 margin: 0 auto;
	text-align: center;
}

/* CSS Grid Items */
.box {
  background-color: #Dbd0c5; 
  color: black;
  border-radius: 5px;
  border: 3px white solid;
}

.a {

}


.b {
  /*hmmmm*/
}

html {font-size: 16px;
	 background-image: url(paperbackground.jpg)}

nav ul{
  list-style: none;
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: 20px;
}

nav ul li {
  padding: 5px;
  border-radius: 5px;
}

nav a {
	transition: transform .5s;
	background-color: 1s ease-in 1.5s;
}

nav a:hover {
	background-color: #dbd0c5; /* color of the hover*/
	transform: scale(1.2);
}

nav li {
	display: inline;
}

nav a {
	display: inline-block; /* Link Animation*/
	text-decoration: none;
	font-size: 1.2em;
	color: #000000;
	padding: 10px 20px;
	background: #ffffff;
	border-radius: 5px;
	border: 1px solid #000000;
	box-shadow: inset 0px 1px 0px rgba(255,255,255,0.7);
	text-shadow:
		0px -1px 1px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,0.3);
}


.branding {
  display: flex;
  align-items: center; /* put logo next to text*/
  gap: 12px;
}
.branding h1 {
    margin: 0;               
    font-size: 2em;          
}


header { /* moved links to header and made header box white yayyy!!!*/
	display: flex;
	justify-content: space-between;
	align-text: center;
	padding: 15px 35px;
	background-color: #FFFFFF;
	margin-bottom: 50px;
}

.branding img {
    display: block;          
}


footer {
  background-color: #FFFFFF;
  padding: 15px;
  text-align: center;
  margin-top: 15px;    /* white footer box*/
  border-top: none;
  width: 100%;
}

.rounded-image {  /* fixes spacing in gallery boxes*/
	border-radius: 20px;
	margin-top: 25px;
}