*{
    margin:0;
    padding:0;
    border:0;
}
img{
    display:block;
    max-width:100%;
}
#logo{
    width: 200px;
}

/* Navigation styles */
nav {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	font-size: 1.2em;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
nav li {
	text-align: center;
}
nav ul li{
    font-size:30px
    
}
nav a {
    background-color:#8A4810;
    display: block;
    padding: 0.5em;
    color: #0A100D;
    text-decoration: none;
}
nav a:hover {
	background-color: #e888b1;
	}

/* Style rules for hamburger menu */
.mobile-nav a {
    text-align: center;  
    font-size: 1.5em;
    display: block;
}

.mobile-nav a.menu-icon {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}
.tablet-desktop, #menu-links{ 
    display:none;
}
p.fa {
    float: right;
    margin-top: -320px;
    margin-right: 100px;
    font-size:35px;
}
/*Socials Style Rules */

 .socials {
    float: right;
    margin-top: -200px;
    
    font-size:35px;
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}
 .fa a {
    text-decoration: none;
    color:#0A100D
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #562D0F;
  color: white;
}

.fa-twitter {
  background: #8A4810;
  color: white;
}
.fa-instagram {
  background: #562D0F;
  color: white;
}
.desktop-home {
    display: none;
}
.mobile-home{
    margin: 20px;
}
h1, h2,h3  {
font-family: "Roboto Condensed", sans-serif;
  
}
h1 {
    color: #e888b1
}
h2 {
    color:#562D0F
}
p {
     font-family: Arial, Helvetica, sans-serif
}
.desktop-menu {
    display: none;
}
.intro-gallery {
    display: none;
}
.mobile-menu {
    margin: 20px;
}
.mobile-menu a {
    color: #e888b1;
    font-size: 1.5em;
}
.mobile-gallery {
    display: block;
    margin: 20px;
}
.mobile-gallery p {
    margin: 12px;
}
h3 {
    color:#8A4810;
    font-size: 1.5em
    
}
/*Footer Style Rules */
footer nav {
    display:grid;
    grid-template-columns: auto auto ;
    
}
footer nav a{
    background-color:white;
    text-align:center;
     color:#0A100D
}
footer p{
    text-align:center;
}
footer a {
    color:#562D0F;
}
.contact {
    text-align: center;
    margin:12px;
}
.contact img {
margin:0 auto;
}
.map{
    width:470px;
    margin: 12px;
    
}
/* Navigation styles for tablet/desktop - make the number of autos match the number of nav items */

@media screen and (min-width: 600px) {
    .mobile, .mobile-nav {
		display: none;
	}
    nav a {
    background-color: #8A4810;
    display: block;
    padding: 0.5em;
    color: #0A100D;
    text-decoration: none;
}
nav {
    background-color: #8A4810;
}
nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
nav li {
	text-align: center;
}

	nav ul {
		display: grid;
		grid-template-columns: 200px auto auto auto auto auto;
	}
	
	nav a:hover {
	background-color: #e888b1;
	}
	
	nav ul li:hover  ul {
		display: block;
		
	}
	.top{
        margin-top: 100px;
    }
    .top-social {
        margin-top:80px;
    }
	nav ul ul {
		display: none;
		position: absolute;
	}
	
	nav ul ul li {
		width: 240px;
	}
    .tablet-desktop, #menu-links{ 
    display:block;
}
.fa a:hover {
    background-color: #e888b1;
    width:30px
}
.fa-twitter {
  background: #562D0F;
  color: white;
}
footer nav {
    display:grid;
    grid-template-columns: auto auto auto auto ;
    margin-bottom: 30px;
    
}
footer nav a{
    background-color:white;
    text-align:center;
    color:#0A100D
}
.desktop-home{
    display: block;
    margin:10px;
}
.desktop-home img{
    width: 300px;
}
.home-grid {
    display:grid;
    grid-template-columns: auto auto auto ;
}

.mobile-home {
    display: none;
   
}
.mobile-menu {
    display: none;
}
.desktop-menu  {
    display: block;
    text-align: center;
}
.desktop-menu a {
    color:#e888b1;
    font-size: 2em;
}
#breakfast img {
    display:block;
    margin:0 auto;
    width:400px
}
.mobile-gallery {
    display: none;
}
.intro-gallery {
    display: block;
    text-align: center;
}
.desktop-gallery  {
    display: grid;
    grid-template-columns: auto auto auto;
    margin: 20px;
}

.contact {
    text-align:center;
}
.contact img {
    margin:0 auto
}
footer p{
    text-align:center;
    
}
footer a {
    color:#562D0F;
}

}