@import url('https://fonts.googleapis.com/css2?family=Fugaz+One&family=Nunito&display=swap');


/* ||  Reset */

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Thes form elements, by default, these do not inheret font properties */
input, button, textarea {
  font: inherit;
}

/* || VARIABLES */

:root {
  /* FONTS */
  --FF: "Nunito", sans-serif;
  --FF-HEADINGS: "Fugaz One", cursive;
  --FS: clamp(1rem, 2.2vh, 1.5rem);

  /* COLORS */
  --BGCOLOR-FADE: rgb(252, 220, 160);
  --BGCOLOR: orange;
  --BGIMAGE: linear-gradient(to bottom, var(--BGCOLOR), var(--BGCOLOR-FADE));
  --BODY-BGCOLOR: #FFF;
  --BORDER-COLOR: #333;
  --BUTTON-COLOR:#FFF;
  --FONT-COLOR: #000;
  --HEADER-BGCOLOR: #000;
  --HEADER-COLOR:#FFF;
  --HERO-BGCOLOR: rgba(223, 93, 32, 0.76);
  --HERO-COLOR: #FFF;
  --HIGHLIGHT-COLOR: rgb(51, 178, 51);
  --LINK-ACTIVE: orange;
  --LINK-COLOR: #000;
  --LINK-HOVER: hsla(0, 0%, 0%, 0.6);
  --NAV-BGCOLOR:#FFF;
 
  /* BORDERS */
  --BORDERS: 1px solid var(--BORDER-COLOR);
  --BORDER-RADIUS: 15px;

  /* STANDARD PADDING */
  --PADDING-TB: 0.25em;
  --PADDING-SIDE: 2.5%;

  /* STANDARD MARGIN */
  --MARGIN: clamp(1em, 2.5vh, 1.5em) 0;  /* clamp is for top-bottom, 0 is for right-left */

}

@media (prefers-color-scheme: dark) {
  :root {
    --BGCOLOR-FADE: gray;
    --BGCOLOR: #000;
    --BODY-BGCOLOR:#333;
    --BORDER-COLOR: whitesmoke;
    --BUTTON-COLOR: #000;
    --FONT-COLOR: whitesmoke;
    --HEADER-COLOR: whitesmoke;
    --HERO-COLOR: #333;
    --HIGHLIGHT-COLOR: whitesmoke;
    --LINK-ACTIVE: rgb(252, 200, 103);
    --LINK-COLOR: whitesmoke;
    --LINK-HOVER: orange;
    --NAV-BGCOLOR: rgb(20, 20, 20);
  }
}

/* || UTILITY CLASSES */

.offscreen {
  position: absolute;
  left: -10000px;
}

.nowrap {
  white-space: nowrap;
}

.center {
  text-align: center;
}


/* || GENERAL STYLES */

html {
  scroll-behavior: smooth;
  font-size: var(--FS);
  font-family: var(--FF);
  background-color: var(--BGCOLOR);
  background-image:  url(../img/bee-hive_4.png)  /* var(--BGIMAGE);  */
}

body {
  /* Remove this next one for the orange gradient background */
  background-color: var(--BODY-BGCOLOR);
  color: var(--FONT-COLOR);
  min-height: 100vh;
  max-width: 800px;
  margin: 0 auto;
  border-left: var(--BORDERS);
  border-right: var(--BORDERS);
  box-shadow: 0 0 10px var(--BORDER-COLOR);
}


h1, 
h2, 
h3 {
  font-family: var(--FF-HEADINGS);
  letter-spacing: 0.1em;
}

h2, 
h3 {
  margin-bottom: 1em;
  color: var(--HIGHLIGHT-COLOR);
}

p {
  line-height: 1.5;
}

a:any-link {
  color: var(--LINK-COLOR);
}

a:hover, 
a:focus-visible {
  color: var(--LINK-HOVER);
}

a:active {
  color: var(--LINK-ACTIVE);
}


/* || HEADER */

.header {
  position: sticky;
  top: 0;
  z-index: 1;
}

.header__h1 {
  text-align: center;
  background-color: var(--HEADER-BGCOLOR);
  color: var(--HEADER-COLOR);
  padding: var(--PADDING-TB) var(--PADDING-SIDE);
}

.header__nav {
  background-color: var(--NAV-BGCOLOR);
  border-bottom: var(--BORDERS);
  font-weight: bold;
  box-shadow: 0 6px 5px -5px var(--BORDER-COLOR);
}

.header__ul {
  padding: var(--PADDING-TB) var(--PADDING-SIDE);
  list-style-type: none;
  display: flex;
  justify-content: space-evenly;
  gap: 1rem;
}

/* || HERO */

.hero {
  position: relative;
}

.hero__h2 {
  background-color: var(--HERO-BGCOLOR);
  color: var(--HERO-COLOR);
  padding: 0.25em 0.5em;
  /* letter-spacing: 0.1rem; */
  text-shadow: 2px 2px 5px var(--BORDER-COLOR);
  position: absolute;
  top: -100px;
  left: 20px;
  animation: showWelcome 0.5s ease-in-out 1s forwards;
}

@keyframes showWelcome {
  0% {
    top: -20px;
    transform: skew(0deg, -5deg) scaleY(0);
  }

  80% {
    top: 30px;
    transform: skew(10deg, -5deg) scaleY(1.2);
  }

  100% {
    top: 20px;
    transform: skew(-10deg, -5deg) scaleY(1);
  }
}

/* || FOOTER */

.footer {
  position: sticky;
  bottom: 0;
  background-color: var(--HEADER-BGCOLOR);
  color: var(--HEADER-COLOR);
  padding: var(--PADDING-TB) var(--PADDING-SIDE);
  text-align: center;
}

/* || MAIN */

.main {
  padding: var(--PADDING-TB) var(--PADDING-SIDE);
}

.main__article {
  scroll-margin-top: 6.5rem;
  margin: var(--MARGIN);
}

.main__article:first-child {
  margin-top: 1em;
}

.main__article:last-child {
  min-height: calc(100vh - 20rem);
}

/* || ABOUT */

.about__trivia {
  margin: var(--MARGIN);
}

.about__trivia-answer {
  margin-top: 1em;
}

/* || CONTACT */

.contact__h2 {
  margin: 0;
}

.contact__fieldset {
  border: none;
}

.contact__p {
  margin: 1em 0;
}

.contact__label {
  display: block;
  font-weight: bold;
}

.contact__input,
.contact__textarea {
  padding: 0.5em;
  border-radius: var(--BORDER-RADIUS);
  border-width: 2px;
  width: 100%;
}

.contact__button {
  padding: 0.5em;
  border-radius: var(--BORDER-RADIUS);
  background-color: var(--HIGHLIGHT-COLOR);
  color: var(--BUTTON-COLOR);
  font-weight: bold;
}

/* || MENU */

thead, 
tbody, 
tfoot, 
tr {
  display: contents;
}

.menu__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 
        "hd1 hd2 hd3"
        "cr cr1 cr1p"
        "cr cr2 cr2p"
        "cr cr3 cr3p"
        "sf sf1 sf1p"
        "sf sf2 sf2p"
        "sf sf3 sf3p"
        "cs cs cs";
        gap: 0.1em;
        margin-bottom: 1em;
}

.menu__cr {
  grid-area: cr;
}

.menu__sf {
  grid-area: sf;
}

.menu__cs {
  grid-area: cs;
}

.menu__cr, 
.menu__sf, 
.menu__cs, 
.menu__header{
  color: var(--HIGHLIGHT-COLOR);
  font-weight: bold;
  height: 100%;
  display: grid;
  place-content: center;
}

.menu__header {
  border-bottom: var(--BORDERS);
}

.menu__header, 
.menu__item {
  width: 100%;
  padding: 1em;
  border: medium ridge var(--BORDER-COLOR);
}

.menu__item {
  display: grid;
  place-content: center;
}

thead th:first-child {
  border-top-left-radius: var(--BORDER-RADIUS);
}

thead th:last-child {
  border-top-right-radius: var(--BORDER-RADIUS);
}

tfoot td {
  border-bottom-left-radius: var(--BORDER-RADIUS);
  border-bottom-right-radius: var(--BORDER-RADIUS);
}

@media screen and (min-width: 576px) {
  .header__h1::before {
    content: '🐝 '
  }

  .header__h1::after {
    content: ' 🍯'
  }

  .menu__header, 
  .menu__cr,
  .menu__sf,
  .menu__cs {
    font-size: 125%;
  }
}