/* Default Styles */

html
{
  /* Prevent font scaling in landscape while allowing user zoom */
  -webkit-text-size-adjust: 100%;
}

body
{
  font-family:
    -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Open Sans', 'Helvetica Neue', sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 2vw;
  line-height: 1.4em;

  margin: 0;
  padding: 0;

  background-color: #000;
}

/* Header */

header
{
  background-color: rgba(0, 0, 0, 0.5);
  color: #FFF;

  padding: 2vw;
  margin: 0;
  width: calc(100% - 4vw);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  position: fixed;
  top: 0;
  left: 0;
  height: 3vw;

  z-index: 100;
  cursor: default;
}

header h1
{
  font-weight: 100;
  font-size: 4vw;

  padding: 0;
  margin: 0;
  line-height: 3vw;
}

/* Nav Grid */

nav
{
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 7vw;
}

nav a
{
  position: relative;

  font-size: 3vw;
  font-weight: 200;
  text-decoration: none;

  height: 30vw;
  overflow: hidden;

  color: #FFF;
  text-shadow: 2px 2px 10px #000;
}

nav img
{
  display: block;
  width: 100%;
  position: absolute;

  transition: 1.0s all ease-in-out;
}

nav a:hover img
{
  transform: scale(1.15);
}

nav span
{
  position: absolute;
  bottom: 2vw;
  right: 2vw;
  z-index: 50;
}

@media (max-width: 600px)
{
  header
  {
    height: 6vw;
  }

  header h1
  {
    line-height: 5vw;
    font-size: 6vw;
  }

  nav
  {
    grid-template-columns: 1fr;
  }

  nav a
  {
    height: 50vw;
    font-size: 6vw;
  }

  nav span
  {
    bottom: 4vw;
  }
}

@media (hover: none)
{
  nav a:hover img
  {
    transform: none;
  }
}