/*

Table of Contents
  1.0 Setup
    1.1 Hide the scrollbars
  2.0 The navigation bar
  3.0 Main Content
    3.1 Image grid
    3.2 Blue Info Box

*/

/* 1.0 Setup */

/* BioRhyme */
@font-face {
  font-family: 'BioRhyme';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/styles/biorhyme-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Condensed */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/styles/roboto-condensed-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Condensed latin-ext */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/styles/roboto-condensed-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  margin: 0px;
  background-color: hsl(205, 100%, 33%);
}

/* 1.1 Hide the scrollbars */

*::-webkit-scrollbar {
  width: 0;
}

*::-webkit-scrollbar-track, *::-webkit-scrollbar-thumb {
  background: transparent;
}

/* 2.0 Top navigation bar */

nav {
  /* Un-comment the next two lines to make top bar follow down */
  /* background-color: hsl(205, 100%, 33%); */
  /* position: sticky; */ 
  top: 0;
  width: 100%;
}

.nav-container {
  align-items: center;
  display: flex;
  flex-flow: row;
  gap: 0.5rem;
}

h1 {
  font-family: 'BioRhyme', serif;
  color: #fff;
  font-size: 6vw;
  margin: 0;
}

.logo {
  height: 6rem;
  margin: 0.5rem;
}

/* 3.0 Main Content */

/* 3.1 The blue info box */

.info {
  position: fixed;
  bottom: 0px;
  padding: 1.5em;
  background-color: hsla(205, 100%, 33%, 0.85);
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  text-align: center;
}

@media (min-width: 1273px) { /* 1 more px than the media query below */
  .info {
    width: 44%;
    left: calc(28% - 1.5em); /* the extra width / 2 - padding-left */
  }
}

@media (max-width: 1272px) { /* min-width before .info looks bad (560px) / .info's set width */
  .info {
    width: 100%;
    padding: 1em 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

@media (max-width: 409px) { /* when the phone and email breaks into 2 lines */
  #contact-line-break {
    visibility: hidden;
  }
}

@media (max-width: 442px) { /* when the address breaks into 2 lines */
  #address-line-break {
    visibility: hidden;
  }
}

a, address, h2, p {
  font-family: 'Roboto Condensed', sans-serif;
  color: #fff;
}

.info h2 {
  margin: 0.5rem;
  font-weight: 500;
}

address {
  font-style: normal;
  line-height: calc(1.5em + 3vmin);
}

address a {
  text-decoration: none;
}

.no-breaks {
  white-space: nowrap;
}

.top-half {
  font-size: calc(0.75em + 2.8vmin);
  font-weight: 800;
}

.bottom-half {
  font-size: calc(0.75em + 2vmin);
  font-weight: 600;
}

/* 3.2 The image grid */

img {
  max-width: 100%;
}

.img_grid {
  display: grid;
  gap: 0px;
  grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 2560px) {
  .img_grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1280px) {
  .img_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .img_grid {
    grid-template-columns: repeat(1, 1fr);
  }
}