/* Box Model Hack */
* {
  box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}



/*consistent styles*/

a:link {
  color: white;
  text-decoration: none;}

a:visited {
  color: green;
}

a:hover {
  color: hotpink;
}

a:active {
  color: blue;
}

button {
width: px;
background-color:white;
border-radius: 10px;
}

body{
font-family: 'Quicksand', sans-serif;
}







/* Main Styles */





header {
width: 100%;
height: 200px;
background-color:rgb(1, 142, 150);
display: flex;
justify-content: space-between;
align-items: center;
}

header img{
height: 100%;
}

header ul {
display: flex;
justify-content: center;
}

header ul li{
list-style:none;
padding: 20px;
}

main{
width: 100%;
height: 600px;
 background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.60) 100%), 
                url("/Users/b/Desktop/Homework/class11-materials/boardgame cafe/goose-game-g8c68f2ab9_1920.jpg");
background-size: cover; 
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;

}

main h1{
font-size: 4rem;
padding-top: 250px;
color: white;
font-family: 'Source Sans Pro', sans-serif;
  text-shadow: 3px 8px 5px #444;

}

main button{
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
}

.navigation{
width: 100%;
height: 300px;
display: flex;
align-items: center;
}

.navigation section{
  width: 33.3333%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: flex-start;
  padding: 3%;
  color: white;
  text-align: center;
}

.navigation h3{
font-size: 1.5rem;
font-family: 'Source Sans Pro', sans-serif;
margin: 0px;
}

.navigation .one , .navigation .three{ 
background-color:rgb(223,81,69);
}

.navigation .one { 
background-color: rgb(235, 110, 133);
}

.navigation .two{
background-color: rgb(1, 142, 150);
}

.bestSelling{
display: flex;
align-items: center;
justify-content: center;}

.bestSelling h4{
font-size: 2rem;
color: black;
}



.bestsellers{
width: 80%;
height: 500px;
display: flex;
justify-content: space-around;
margin: 0 auto;
}

.bestsellers img{
width: 100%;
}

.bestsellers section{
width: 33.3333%;
display: flex;
align-items: center;
flex-direction: column;
}

.events {
width: 100%;
height: 500px;
display: flex;
justify-content: center;
background-color: rgb(235, 110, 133)

}


.events h3{
font-size: 2rem;
margin: 0px;
}

.events img{
width: 60%;
}

.events section{
display: flex;
justify-content: center;
flex-direction: column;
padding: 40px;
}


.comeplay {
background-image:url('/Users/b/Desktop/Homework/class11-materials/boardgame cafe/competition-3061507__340.jpg');
height: 600px;
background-size: cover; 
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.comeplay h5{
font-size: 4rem;
font-family: 'Source Sans Pro', sans-serif;
color: white;
margin: 10px;
}


footer{
height: 300px;
width: 100%;
background-color: rgb(248 153 30);
display: flex;
justify-content: center;
}

footer section{
width: 25.3333%;
}

footer li {
list-style: none;
}

footer h5{
font-size: 1rem;
}

footer img {
width: 60%;
}

footer p{
margin: 0px;
}

/*	<header>
	<img src= "You Do The Math-logos_white.png" > 
	<nav> 
		<ul>
			<li><a href="#"> Hours </a> </li>
			<li><a href="#"> Online Shop </a> </li>
			<li><a href="#"> Menu </a> </li>
			<li><a href="#"> Events </a> </li>
			<li><a href="#"> About Us </a> </li>
			
		</ul>
	</nav>*/

@media(max-width: 600px){

header {
width: 100%;
display: flex;
flex-direction: column;
}

header img {
width: 150px;

}

header ul{
margin: 0px;
}

header ul li {
padding: 5px;
}


main{
display: flex;
align-items: center;
justify-content: center;
}


main h1{
text-align: center;
font-size: 3rem;
}

.navigation{
width: 100%;
display: flex;
flex-direction: column;
height: 700px;
}

.navigation section{
width: 100%;
}

.bestSelling h4{
text-align: center;
font-size: 1.7rem;
}

.bestsellers{
width: 100%;
display: flex;
flex-direction: column;
height: 500px;
align-items: center;
}

.bestsellers section{
width: 70%;
}

.bestsellers .agricola, .bestsellers .tapestry{
display: none;
}

.events{
width: 100%;
height: 500px;
display: flex;
flex-direction: column;
text-align: center;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%), 
                url("/Users/b/Desktop/Homework/class11-materials/boardgame cafe/jenga-6380184_960_720.jpg");}
.events img{
display: none;
}

.events h3, .events, h4{
color: white;
}


.comeplay{
display: none;
}

footer{
width: 100%;
height: 400px;
display: flex;
flex-direction: column;
text-align: center;}


footer section{
width: 100%;
}

footer ul{
display: flex;
flex-direction: row;
border: solid black 1px;
}

footer li{
padding: 10px;
}

footer> :first-child {
display: none;}

footer section h5{
font-size: 1.2rem;
margin: 0;}
/* 

	</section>

	<section>
		<h5> You Do The Math Boardgame Cafe <h5>	
		<h6> 1172 Westview Main Drive </h6>
		<h5> Monday to Thursday </h5>
		<h6> 3:00 pm to Midnight </h6>
		<h5> Friday to Sunday </h5>
		<h6> 12:00 pm to Midnight </h6>
		
	</section> 
	</footer> */