:root {
    --primaryColor: #ffffff;
    --secondaryColor: #ffffff;
    --tertiaryColor: #ffffff;
    --primaryTextColor: #000000;
    --secondaryTextColor: #ffffff;
    --tertiaryTextColor: #000000;
}
body, html {
    height: 100%;
}

nav {
    background-color: black;
}
nav h1 {
    color: var(--secondaryTextColor);
    font-size: 48px;
    text-align: center;
    
}

.hero-image {

  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./assets/images/headphones-gc57ffae3d_1280.jpg");

  /* Set a specific height */
  height: 50%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

/* CHRIS ZICHKO added this class for testing only*/
.testingContainer {
  color: white;
  background-color: black;
  border-radius: 10px;
  box-shadow: -5px 10px #888888;
  margin-top: 100px;
}