html{
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	text-align: left;
	background-color: #AAAAAA;
	color: #161413;
}

body{
	margin: 0px 0px 0px 0px;
}

#cuntainer{
	max-width: fit-content;
	margin: auto;
  }

#menu{
	margin: 0px 8px 8px 8px;
}

#blag{
  margin: 8px 8px 8px 8px;
	padding: 16px 24px 16px 24px;
}

.the-good-stuff{
	background-color: #FFFFFF;
	padding: 16px 16px 16px 16px;
	box-shadow: 0 0 16px 4px rgba(0,0,0,0.45);
	margin: 8px 8px 8px 8px;
}

nav{
	background-color: #36292c; 
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  padding: 0px 16px 0px 16px;
	box-shadow: 0 0 16px 4px rgba(0,0,0,0.45);
}

.nav-section{
	flex: 1;
	font-size: 30px;
	font-family: 'Concert One', sans-serif;
	color: #e1dfba;
	padding: 4px 4px 8px 4px;
	text-align: center;
	text-shadow: 0px 0px 8px black;
	text-decoration-line: none;
}

.nav-section:visited{
	color: #e1dfba;
}

.nav-section:hover, .nav-section:active{
  color: #f2f1e1;
}

@media screen and (min-width: 900px) {
	#cuntainer{
  	display: grid;
  	grid-template-columns: 250px auto;
  	grid-template-rows: auto auto auto;
  	grid-template-areas:
  	'header header'
		'nav nav'
  	'menu blag';
  }
  
  #header{
  	grid-area: header;
  }
	
	.nav-section{
	  font-size: 44px;
	}
	
	nav{
	  grid-area: nav;
  }
  
  #menu{
  	grid-area: menu;
		align-self: start;
		justify-self: center;
		margin: 8px 8px 8px 0px;
  }
  
  #blag{
  	grid-area: blag;
    margin: 8px 0px 8px 0px;
  }
}

img{
	display: inline-block;
	margin: 0 auto;
	max-width: 100%;
}

a{
	color: #0074D9;
}

a:visited{
	color: #001f3f;
}

a:hover, a:active{
	color: #FF4136;
}

p{
  padding: 4px 8px 4px 8px;
}