/* apply to all elements on the page */
* {
  margin: 0;
}
html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/* set video as background */
video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
/* style video controls */
video::-webkit-media-controls-panel {
  position: absolute;
  top: 3rem;
  width: 21%;
  background-color: rgba(114, 169, 196, 0.5);
}
/* styles for navigation */
nav {
  background-color: rgba(114, 169, 196, 0.5);
  padding: 0.25rem;
}
nav a:hover {
  color: turquoise;
}
ul {
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
}
a.navLinks {
  font-size: small;
  color: #fff;
}
.bonus {
  color: #000;
}
a.navLinks:active,
a.navLinks:focus {
  color: #000;
}
/* styles for main header */
.g-header {
  color: #72a9c4;
  width: 87%;
  font-size: 5.45rem;
  font-family: Dela Gothic One, cursive;
}
/* styles for main body elements */
details {
  margin-bottom: 2.25rem;
}
details:hover {
  color: #72a9c4;
  transform: scale(1.25);
  transition: ease-in-out 1.5s;
}
summary {
  text-shadow: 0.05rem 0.025rem #000;
}
.v-content {
  position: fixed;
  left: 0;
  bottom: 0;
  background: rgba(114, 169, 196, 0.5);
  color: turquoise;
  font-family: Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 1rem;
  min-width: 100%;
  padding: 2rem;
}
.row {
  margin-left: 5rem;
}
.column {
  float: left;
  width: 50%;
}
p {
  width: 50%;
}
a {
  color: whitesmoke;
  font-size: x-small;
  text-decoration: none;
}
/* styles for button */
#gritBtn {
  width: 50%;
  color: turquoise;
  padding: 0.45rem;
  border: 0.15rem solid #72a9c4;
  border-radius: 0.25rem;
  letter-spacing: 0.15rem;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-family: Dela Gothic One, cursive;
  background-color: transparent;
}
#gritInput {
  border: none;
  background-color: transparent;
}
input[type="button"]:hover {
  transform: scale(1.05);
  transition: ease-in-out 1.3s;
}
.gritLabel {
  color: transparent;
}
/* styles for footer */

footer {
  margin-top: 3.5rem;
  font-size: xx-small;
  text-align: center;
}
.fp-table {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
.fp-header,
.fp-data {
  display: block;
  color: #000;
}
.fp-data {
  width: 40%;
  text-align: justify;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/* media queries */
@media (min-width: 1376px) {
  body {
    display: visible;
  }
  .mq-view {
    display: none;
  }
}
@media (max-width: 1375px) {
  video,
  div > nav,
  h1,
  .row,
  input,
  footer {
    display: none;
  }
  body,
  /* image courtesy markus distelrath at pixabay */
  div {
    background-image: url(images/bottle-by-markus.jpg);
    background-repeat: no-repeat;
    background-position: center top;
  }
  .v-content {
    background-color: rgba(255, 255, 255, 0.3);
  }
  .mq-view {
    display: visible;
    color: #72a9c4;
    text-shadow: 0.05em 0.05em #000;
    font-size: 2em;
    text-align: center;
    width: 100%;
  }
}