/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	
}



ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}



/* DESKTOP */
#container {

	background: rgb(37,55,76);
	background: radial-gradient(circle, rgba(37,55,76,1) 0%, rgba(21,37,55,1) 100%);

}

		#logo {
			width: 18.819444444%;
			position: relative;
			top: -143px;
		}
		

		nav {
			width: 100%;
			background-color: #ffffff;
		 /* flex goes in the parent div not the children */
			display: flex;
			justify-content: space-around;
			font-size:30px;
			font-family: 'DM Serif Display', serif;
			color: #343e67;
			/* align-items: center; */
			height: 90px;
		}

		a {
			color:#343e67;
			padding-top: 10px;
		}

		#header {
			/* surrounding div gets flex box! */
			display:flex;
			justify-content:space-between;
			/* justify-content is right and left
			align-items is up and down */
			align-items: center;
		}

		.col {
			width: 33%;
			padding: 10px;
		}
		
		#columns {
			/* flexbox goes hereeeee!!! */
			display: flex;
			justify-content: space-around;
			padding: 10px
			width: 33%
		}

		h1 {
			color: #ffffff;
			text-align: center;
			font-family: 'DM Serif Display', serif;
			font-size: 30px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			padding-top: 10px;
		}

		h2 {
			color: #ffffff;
			text-align: center;
			font-family: 'DM Serif Display', serif;
			font-family: 'Gabarito', sans-serif;
			font-size: 25px;
			font-style: normal;
			font-weight: 700;
			line-height: normal;
			padding-top: 15%;
		}

		h3 {
			color: #ffffff;
			font-family: 'DM Serif Display', serif;
			font-family: 'Gabarito', sans-serif;
			font-size: 25px;
			paddin
		}

		p {
			color: #ffffff;
			font-family: 'DM Serif Display', serif;
			font-family: 'Gabarito', sans-serif;
			font-size: 20px;
			padding: 10px
		}

		#footer {
			background-image: 
			url(treasuretavernbgmap-10.png);
			padding: 30px;
			/* display flex on surrounding div */
			display: flex;
			justify-content:space-between;
		}

		.col img {
			width: 100%;
		}

		.navbar {
			display:none;
		}
		.nav-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 62px;
		  }
		  
		  .navbar .menu-items {
			display: flex;
		
		  }
		  
		  .navbar .nav-container li {
			list-style: none;
		  }
		  
		  .navbar .nav-container a {
			text-decoration: none;
			color: #0e2431;
			font-weight: 500;
			font-size: 1.2rem;
			padding: 0.7rem;
		  }
		  
		  .navbar .nav-container a:hover{
			  font-weight: bolder;
		  }
		  
		  .nav-container {
			display: block;
			position: relative;
			height: 60px;
		  }
		  
		  .nav-container .checkbox {
			position: absolute;
			display: block;
			height: 32px;
			width: 32px;
			top: 20px;
			left: 20px;
			z-index: 5;
			opacity: 0;
			cursor: pointer;
		  }
		  
		  .nav-container .hamburger-lines {
			display: block;
			height: 26px;
			width: 32px;
			position: absolute;
			top: 17px;
			left: 20px;
			z-index: 2;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		  }
		  
		  .nav-container .hamburger-lines .line {
			display: block;
			height: 4px;
			width: 100%;
			border-radius: 10px;
			background: #d4dce1;
		  }
		  
		  .nav-container .hamburger-lines .line1 {
			transform-origin: 0% 0%;
			transition: transform 0.4s ease-in-out;
		  }
		  
		  .nav-container .hamburger-lines .line2 {
			transition: transform 0.2s ease-in-out;
		  }
		  
		  .nav-container .hamburger-lines .line3 {
			transform-origin: 0% 100%;
			transition: transform 0.4s ease-in-out;
		  }
		  
		  .navbar .menu-items {
			padding-top: 120px;
			box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
			height: 100vh;
			width: 100%;
			transform: translate(-150%);
			display: flex;
			flex-direction: column;
			margin-left: -40px;
			padding-left: 50px;
			transition: transform 0.5s ease-in-out;
			text-align: center;
		  }
		  
		  .navbar .menu-items li {
			margin-bottom: 1.2rem;
			font-size: 1.5rem;
			font-weight: 500;
		  }
		  
		  .logo {
			position: absolute;
			top: 5px;
			right: 15px;
			font-size: 1.2rem;
			color: #0e2431;
		  }
		  
		  .nav-container input[type="checkbox"]:checked ~ .menu-items {
			transform: translateX(0);
		  }
		  
		  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
			transform: rotate(45deg);
		  }
		  
		  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
			transform: scaleY(0);
		  }
		  
		  .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
			transform: rotate(-45deg);
		  }
		  
		  .nav-container input[type="checkbox"]:checked ~ .logo{
			display: none;
		  }
	
		  @media screen and (max-width: 600px) {
			nav {
			  display:none;
			}
			.navbar {
			  display: block;
			}
		  }

/* tablet size stuff */

@media screen and (max-width: 900px) {

    /* #container 
http://127.0.0.1:5500/treasuretavernimages-09.png */
    #header {
        /* display block turns off flexbox */
        display: block;
    }

    #logo {
        width: 33.875%;
        /* margin auto centers div */
        /* margin:auto; */
    }

    nav {
		box-sizing: border-box;
		width: 100%;
		background-color: #ffffff;
	 /* flex goes in the parent div not the children */
		display: flex;
		justify-content: space-between;
		font-size:30px;
		font-family: 'DM Serif Display', serif;
		color: #343e67;
		align-items: center;
		height: 90px;
		padding: 20px;
		align-items:center ;
	}
http://127.0.0.1:5500/index.html
    .col {
        width: 45.25%;
        padding: 10px;
		justify-content: space-around;
    }

    #columns {
        /* flexbox stuff goes in surrounding div */
        /* allow flexbox to wrap to different lines */
        flex-wrap:wrap;
		padding: 10px;
    }

    #footer {
        flex-wrap: wrap;
		font-size: 20px;
		padding-top: 20px;
    }

    #left, #right {
        width: 100%
    }

	h1 {
		font-size: 25px;

	}

	h2 {
		font-size: 20px;
		padding: 10px
	}

	p {
		font-size: 15px;

	}

	
}


/* phone stuff */
@media screen and (max-width: 550px) {
    #container {
        
    }



    nav {
        display: none;
		box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
    }
}

@media screen and (max-width: 600px) {
	nav {
		display:none;
	}
	.navbar {
		display: block;
	}
	
	.col {
	width: 100%;
	}
}