@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


:root { /* -- base color scheme -- */
  --text: #fff;
  
  --green: rgb(77, 127, 115);
  --orange: rgb(226, 116, 5);
}


html {
  scroll-behavior: smooth;
}

body {
  background-attachment: fixed;
  background-color: #121212;
  background-image: linear-gradient(90deg, rgba(18,18,18,.65) 0%, rgba(18,18,18,.65) 100%), url('img/bkgrnd.jpg');
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  color: var(--text);
  font-family: DM Sans, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  height: 100%;
  line-height: 1.5;
  margin: 0;
  text-align: center;
  width: 100%;
}
body, body * {
  overflow-x: clip;
  transition: all .2s ease-in-out;
}


a {
  color: var(--orange);
  font-weight: 700;
  text-decoration: none;
}
a:active, a:hover {
  text-decoration: underline;
}

div > :first-child {
  margin-top: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Montserrat, sans-serif;
  font-weight: 400;
  line-height: 1.25;
  margin: 1.5em auto .5em 0;
}
h1 {
  font-size: 3rem;
  margin-top: 0;
  text-transform: uppercase;
}
h2 {
  font-size: 2.5rem;
}
h3 {
  color: var(--green);
  font-size: 2rem;
  font-weight: 700;
  text-shadow: 0 0 .5em #000,  0 0 .25em #000;
}
h4 {
  font-size: 1.5rem;
  font-weight: 700;
}
h5 {
  color: var(--orange);
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
}

h1 b, h2 b, h3 b, h4 b, h5 b, h6 b {
  color: var(--orange);
}



/* ---- Header ---- */

#logo      { grid-area: logo; }
#social    { grid-area: social; }
#location  { grid-area: location; }

header {
  align-items: center;
  background: rgba(18,18,18,.65);
  display: grid;
  grid-gap: 1rem;
  grid-template-areas: "logo" "social" "location";
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 1rem;
}
header a img {
  filter: brightness(85%);
}
header a:active img,
header a:hover img {
  filter: brightness(100%);
}

.location,
.location div,
.social {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: max-content max-content;
}
.location img {
  max-height: 64px
}
.location p {
  margin: 0;
}
.logo img {
  max-width: 252px;
}
.social img {
  max-height: 64px;
}



/* ---- Footer ---- */

footer {
  align-items: center;
  background: rgba(18,18,18,.85);
  display: grid;
  justify-content: center;
  padding: 1rem;
  width: 100%;
}

.award {
  display: block;
  margin: auto;
}

.hours {
  box-sizing: border-box;
  display: inline-block;
  margin: 0 auto;
  padding: 1rem 2rem;
  position: relative;
}
.hours p {
  margin: .25em 0;
  text-align: left;
}
.hours p span {
  display: inline-block;
  margin: .25em 0;
  min-width: 7.5rem;
}



/* ---- Lead-in ---- */

.lead {
  margin: 3rem auto;
  padding: 0 1rem;
  max-width: 960px;
  text-shadow: .0625em .0625em .125em #000;
}
.lead p {
  font-size: 1.25em;
}

#intro    { grid-area: intro; }
#kava     { grid-area: kava; }
#video    { grid-area: video; }
#welcome  { grid-area: welcome; }

#video {
  margin: 2rem 0 3rem 0;
  padding: 56.25% 0 0 0;
  position: relative;
}

#welcome p {
  color: var(--green);
  font-size: 1.5em;
  font-weight: 600;
  margin-bottom: .5em;
}



/* ---- Responsiveness ---- */

@media only screen and (min-width: 960px) {
  footer {
    grid-template-columns: max-content max-content max-content;
  }
  
  header {
    grid-template-areas: "social logo location";
    grid-template-columns: 1fr 2fr 1fr;
  }
}