/*Fonts*/
/*Colors*/
h1, h2, h3, h4, .nav-links {
  font-family: "mr-eaves-modern", sans-serif;
  font-weight: 400;
}

p {
  font-family: "p22-underground", sans-serif;
  font-weight: 300;
}

h1 {
  font-size: 48px;
}

h2 {
  font-size: 42px;
}

h3 {
  font-size: 36px;
}

h4 {
  font-size: 30px;
}

p {
  font-size: 22px;
}

.page-bg {
  border: 3px black ridge;
  background-color: #949494;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23303030' fill-opacity='.5'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/*Resets Body Style*/
* {
  margin: 0;
  padding: 0;
}

/*Scroll Bar*/
::-webkit-scrollbar {
  height: 10px;
}

::-webkit-scrollbar-track {
  background-color: black;
}

::-webkit-scrollbar-thumb {
  background: white;
}

::-webkit-scrollbar-thumb:hover {
  background: #fcbc03;
}

nav {
  height: 120px;
  width: 100%;
  background-color: black;
  position: relative;
}

nav > a > img {
  position: absolute;
  height: 100px;
  top: 10px;
  left: 10px;
}

@media screen and (max-width: 1200px) {
  .nav-links-mobile {
    display: none;
  }
  .nav-links-mobile-show {
    display: block;
  }
  .nav-links-mobile > a {
    display: block;
    color: white;
    text-decoration: none;
    background-color: black;
    position: relative;
    top: 120px;
    padding-left: 10px;
    font-size: 30px;
  }
  /**Hamburger Menu**/
  .menu-btn {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50px;
    right: 0;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
  }
  .menu-btn_burger {
    width: 50px;
    height: 6px;
    background-color: white;
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
  }
  .menu-btn_burger::before, .menu-btn_burger::after {
    content: "";
    position: absolute;
    width: 50px;
    height: 6px;
    background-color: white;
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
  }
  .menu-btn_burger::before {
    transform: translateY(-16px);
  }
  .menu-btn_burger::after {
    transform: translateY(16px);
  }
  /* ANIMATION */
  .menu-btn.open .menu-btn_burger {
    transform: translateX(-50px);
    background: transparent;
  }
  .menu-btn.open .menu-btn_burger::before {
    transform: rotate(45deg) translate(35px, -35px);
  }
  .menu-btn.open .menu-btn_burger::after {
    transform: rotate(-45deg) translate(35px, 35px);
  }
  .nav-links {
    display: none;
  }
}
@media screen and (min-width: 1200px) {
  .nav-links {
    position: absolute;
    top: 45px;
    right: 0;
  }
  .nav-links > a {
    color: white;
    font-size: 18px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-decoration: none;
    padding-inline: 10px;
  }
  .nav-links-mobile, .nav-links-mobile-show {
    display: none;
  }
  .menu-btn {
    display: none;
  }
}
/*Footer Styling*/
footer > section {
  padding-block: 5px;
}

footer > section > p {
  margin: 0;
}

footer > section > a {
  color: white;
  text-decoration: none;
  font-family: "mr-eaves-modern", sans-serif;
  font-weight: 400;
  font-size: 20px;
  margin-right: 10px;
  padding-block: 5px;
}

footer > section > a:hover {
  color: #fcbc03;
}

footer > hr {
  grid-column: 1/span 3;
}

.social-links {
  text-decoration: none;
  color: white;
}

.social-links:hover {
  color: #fcbc03;
}

/*Grid Items*/
@media screen and (max-width: 1000px) {
  footer {
    color: white;
    background-color: black;
    padding-block: 10px;
    padding-inline: 5%;
  }
  .contact-info {
    text-align: center;
  }
  .hours {
    text-align: center;
  }
  .socials {
    text-align: center;
  }
  .long-item {
    text-align: center;
  }
}
@media screen and (min-width: 1000px) {
  footer {
    color: white;
    background-color: black;
    display: grid;
    padding-inline: 5%;
    padding-block: 10px;
    grid-template-columns: 1fr 1fr 1fr;
  }
  .contact-info {
    grid-column: 1/span 1;
    display: block;
    margin: auto;
  }
  .hours {
    grid-column: 2/span 1;
    display: block;
    margin: auto;
  }
  .socials {
    grid-column: 3/span 1;
    display: block;
    margin: auto;
  }
  .long-item {
    grid-column: 1/span 3;
    display: block;
    margin: auto;
  }
}
@media screen and (max-width: 1000px) {
  .content {
    width: 90%;
    margin-inline: 5%;
  }
  .content-grid {
    display: grid;
    grid-template-columns: 100%;
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    margin-block: 15px;
    margin-inline: 10%;
  }
  .events-img {
    display: block;
    width: 100%;
    border: 1px solid black;
    background-color: white;
  }
}
@media screen and (min-width: 1000px) {
  .content-grid {
    display: grid;
    grid-template-columns: 50% 50%;
    background-color: white;
    border: 2px solid black;
    border-radius: 5px;
    margin-block: 15px;
    margin-inline: 10%;
  }
  .content {
    grid-column: auto/span 1;
    display: block;
    margin: auto;
  }
  .iframe-container {
    grid-column: auto/span 2;
  }
  .events-img {
    display: block;
    margin-inline: 10%;
    margin-block: 25px;
    width: 80%;
    border: 2px solid black;
    border-radius: 10px;
    background-color: white;
  }
}
.iframe-container {
  width: 95%;
  margin: auto;
}

.content {
  margin-block: 25px;
}

.content-img {
  display: block;
  margin-inline: auto;
  margin-block: 10px;
  width: 90%;
  border-radius: 5px;
  border: 1px solid black;
}

.content-text {
  padding-inline: 5%;
}

.content-text > h2 {
  text-align: center;
}

.content-text > h2 > a {
  text-decoration: none;
  color: black;
}

.content-text > h2 > a:hover {
  color: #fcbc03;
}

.centered-text {
  display: table-cell;
  vertical-align: middle;
  justify-content: center;
  margin: auto;
}

.iframe-map {
  width: 100%;
}

#drinks > button {
  background-color: whitesmoke;
  border: 2px solid black;
  border-radius: 5px;
  width: 200px;
  height: 50px;
  display: block;
  margin: auto;
  font-size: 22px;
  margin-top: 25px;
}

#drinks > button > a {
  color: black;
  text-decoration: none;
}

.menu-grid {
  display: grid;
  grid-template-columns: 10% 80% 10%;
}

/*Menu Navigation*/
.menu-nav {
  text-align: center;
  background-color: black;
  overflow-x: scroll;
  white-space: nowrap;
  padding-top: 15px;
  padding-bottom: 5px;
  margin-top: 25px;
  grid-column: 2/span 1;
  border-radius: 5px;
  border: 2px solid white;
}

.menu-nav > a > button {
  margin: 0;
  padding-inline: 15px;
  border: none;
  background: none;
  cursor: pointer;
  color: white;
  font-size: 24px;
}

.menu-nav > a {
  font-size: 22px;
  color: black;
  text-decoration: none;
}

.menu-nav > a > button:hover {
  color: #fcbc03;
}

/*Menu Section*/
.menu-bg {
  margin-top: 25px;
  grid-column: 2/span 1;
  background-color: white;
  border: 2px solid black;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 15px;
}

.menu-bg > section > h2 {
  text-align: center;
  text-shadow: 1px 1px black;
}

.menu-bg > section > h3 {
  color: #fcbc03;
  text-shadow: 1px 1px black;
}

.menu-bg > section > h3, .menu-bg > section > p {
  padding-inline: 15px;
}

.back-to-top {
  text-align: right;
}

.back-to-top > a {
  text-decoration: underline;
  color: black;
}

.back-to-top > a:hover {
  color: #fcbc03;
}

.sub-heading {
  text-align: center;
}

a:hover {
  color: gold;
}/*# sourceMappingURL=main.css.map */