/* full resets */
* {
    padding: 0;
    margin: 0;
  }

/* styling entire page */
#container {
  height: 100vh;
  width: 100vw;
}

/* styling top half */
#top-half {
  height: 40vh;
  width: 100vw;
  background-image: url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1075&q=80');
  background-size: cover;
  background-position: center;
  align-items: center;
}

#top-half .btn {
  border: 1px solid white;
  background-color: black;
  box-shadow: 0 0 10px white;
}

#top-half select {
  margin-top: 5px;
  width: 300px;
}

.mask {
  height: 50%;
  width: 75%;
  text-align: center;
  color: white;
  background-color: rgba(0,0,0,0.4);
  padding: 20px;
  border-radius: 50px;
}

/* styling bottom half */
#bottom-half {
  height: 60vh;
  width: 100vw;
  background-image: url('https://images.unsplash.com/photo-1544033527-b192daee1f5b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
  background-size: cover;
  background-position: center;
}

/* making selections invisible */
/* back */
#exercise-selection-back-barbell, #exercise-selection-back-dumbbells, #exercise-selection-back-calisthenics {
  display: none;
}
/* legs */
#exercise-selection-legs-barbell, #exercise-selection-legs-dumbbells, #exercise-selection-legs-calisthenics {
  display: none;
}
/* chest */
#exercise-selection-chest-barbell, #exercise-selection-chest-dumbbells, #exercise-selection-chest-calisthenics {
  display: none;
}
/* shoulders */
#exercise-selection-shoulders-barbell, #exercise-selection-shoulders-dumbbells, #exercise-selection-shoulders-calisthenics {
  display: none;
}

/* equipment used for all */
#equipment-used-for-back, #equipment-used-for-chest, #equipment-used-for-legs, #equipment-used-for-shoulders {
  display: none;
}

/* organizing bottom half content */
#content-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


/* styling the changed bottom half content */

#target-muscle-content, #equipment-used-content {
      text-align: center;
  color: black;
  height: 40px;
  width: 100%;
  text-shadow: 0 0 10px #555;
}

#target-muscle-content:focus, #equipment-used-content:focus {
        text-align: center;
  color: black;
  background-color: rgba(255,255,255,.6);
  height: 40px;
  width: 100%;
  text-shadow: 0 0 10px #555;
}


#exercise-image {
  display: none;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  box-shadow: 0 0 10px black, 0 0 20px white;
}

#exercise-description-content {
    text-align: center;
  color: black;
  background-color: rgba(255,255,255,.6);
  width: 100%;
  text-shadow: 0 0 10px #555;
}