@charset "utf-8";
/* CSS Document */
html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

#logo {
	padding-top:2%;
}

header {
	background-image: url("../images/ocean.jpg");
	color:#ffffff;
	text-align:center;
	font-family: 'Handlee',cursive;
	font-size:36px;
}

.wrapper{
	margin: 0;
	text-align:center;
}

body {
	font-family: 'Handlee',cursive;
	background-color:#99b2b9;
}

nav {
	grid-row:1/5;
	grid-column:1/2;
	background-color: #99b2b9;
	font-family: 'Handlee',cursive;
	top:200px;
	text-align: center;
}

nav a {
	display: block;
	padding: 10px;
	border-bottom: 1px solid #000080;
}

nav a:link {
	text-decoration: none;
	color: #000000;
	font-size: 24px;
}

nav a:visited {
	color: #902e59;
}

nav a:hover {
	color: #000080;
	background-color: #eaeaea;
}

.cafe img {
	height:150px;
	border-radius:  10%;
	padding: 0.5%;
}
.cafe {
	grid-row:1/2;
	grid-column:1/5;
	float:center;
	text-align: center;
}

.ocean{
	border-radius:5%;
	box-shadow: 10px 10px 5px gray;
}

.menu{
	border-radius:5%;
	border:thin solid black;
}

.wrapper{
	display:grid;
	text-align:center;
	padding-left:0.1%;
	background-color: #d1dde0;
    margin: 0 auto;
}

pg1{
	font-size:26px;
	text-align:center;
	padding-left:0.1%;
}

.swiper{
	width:80%;
	height:100%;
}

footer{
	grid-row:1/2;
	grid-column:1/6;
	text-align:center;
	background-color:#99b2b9;
	font-weight:50;
	font-size:13px;
	padding-top:1%;
}

.fa{
  	padding: 10px;
  	font-size: 30px;
  	width: 30px;
  	text-align: center;
  	text-decoration: none;
 	 margin: 5px 2px;
  	border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  	background: #3B5998;
  	color: white;
}

.fa-youtube {
  	background: #bb0000;
  	color: white;
}

.fa-instagram {
  	background: #125688;
  	color: white;
}

@media screen and (min-width:961px){
	.wrapper {
		text-align:center;
		}
	nav {
		width:100%; 
	    font-size:2px; 
		float:center; 
		display:flex;
		}
		
	nav a{
		 width:100%;
		 padding-top:1%;
		 padding-right:2.5%;
		 padding-left:2.5%;
		 text-align:center;
		 }
		 
	.welcome {
		text-align:center; 
	    padding-left:0.1%;
		}
		
	.cafe {
		float:center;
		}
		
	.swiper {
		max-width: 70%;
		}
		
@media screen and (max-width:960px){
	
	.wrapper {
		align-content:center;
		}

	nav{
		width:150%; 
	    font-size:2px; 
		float:center; 
		display:flex;
		}
		
	nav a{
		 height:80%;
		 padding-top:0;
		 padding-left:5%;
		 text-align:center;
		 }
		 
	.welcome {
		text-align:center; 
	    padding-left:0.1%;
		}
		
	.cafe {
		float:center;
		}
		
	iframe {
		max-width:80%;
		height:auto;
		}