/* Set default font family to Fredoka */
body {
  font-family: 'Fredoka', sans-serif;
}

/* Center text content in header */
.header {
  text-align: center;
}

/* Container div for all images */
#blockHolder {
  background-color: white;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 920px;
  margin: auto;
}

/* Container div for individual image and play button */
.imageHolder {
  position: relative;
  margin: 10px;
}

/* Styling for images in application */
.cardImage {
  height: 200px;
  width: 200px;
  opacity: 0.5;
  border-radius: 10px;
  cursor: pointer;
  border-style: solid;
  border-color: white;
  border-width: 3px;
}

/* Class enabled when image is clicked. Emphasises click but increasing size and opacity */
.cardImage.select {
  opacity: 1 !important;
  transform: scale(1.05) !important;
}

/* Styling for play button on each image. Positions button on the bottom right of the container div */
.playButton {
  position: absolute;
  top: 74%;
  right: 3%;
  border-style: solid;
  border-color: black;
  cursor: pointer;
  background-color: white;
  border-radius: 50px;
  font-size: 24px;
  height: 44px;
  width: 44px;
}

/* Play icon coloured black to override FontAwesome default */
.fa-play {
  color: black !important;
}

/* Centre the Control Set text and make it 24px */
.controlSet {
  text-align: center;
  font-size: 24px;
  padding-bottom: 5px;
}

/* Hide the Control Set div (Hidden by default) */
.controlSetOff {
  display: none;
}

/* Display the Control Set div */
.controlSetOn {
  display: block;
}

/* Blue border added to images and buttons when accesibility is turned on */
.accessImage:hover, .accessButton:hover {
  border-style: solid;
  border-color: blue;
  border-width: 3px;
}

/* Center text and set font size of text section */
.textSection {
  margin: 10px;
  text-align: center;
  font-size: 24px;
}

/* Add space around result text section */
.result {
  padding: 10px;
}

/* Emphasise the test result with bold font weight */
#testResult {
  font-weight: bold;
}

/* Styling for all buttons */
.submitButton,
.newLevelButton,
.bottomButtons, .categorySelectorButton {
  padding: 15px 35px;
  background-color: #4270aa;
  color: white;
  border-radius: 10px;
  border-style: solid;
  border-color: white;
  border-width: 3px;
  cursor: pointer;
  font-size: 24px;
  font-family: 'Fredoka', sans-serif;
}

/* Individually colour newLevelButton */
.newLevelButton {
  background-color: #d76698;
}

/* Individually colour bottomButtons */
.bottomButtons {
  background-color: #f1f1f1;
  color: black;
}

/* Individually colour categorySelectorButton */
.categorySelectorButton {
  background-color: #e7a83f;
}

/* Dim buttons on hover using opacity */
.submitButton:hover,
.newLevelButton:hover,
.bottomButtons:hover {
  opacity: 0.8;
}

/* Container div that positions the categorySelectorButton on the bottom left of the screen */
.categorySelector {
  position: fixed;
  display: inline-block;
  bottom: 0px;
  left: 0px;
  z-index: 1;
}

/* Show the categorySelector-content on hover of categorySelector */
.categorySelector:hover .categorySelector-content {
  display: block;
}

/* Container for categorySelector content which is hidden by default */
.categorySelector-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  bottom: 50px;
  left: 0px;
}

/* Styling for paragraph tags inside categorySelector */
.categorySelector-content p {
  color: black;
  padding: 12px 16px;
  display: block;
  cursor: pointer;
  font-size: 24px;
  text-align: center;
}

/* Change colour of category on hover in categorySelector */
.categorySelector-content p:hover {
  background-color: #ddd;
}

/* Burger menu icon in categorySelector hidden by default */
.burgerMenu {
  display: none !important;
}

/* Container div that positions the accessibility checkbox at the bottom right of the screen */
.accessibilitySection {
  position: fixed;
  bottom: 0px;
  right: 5px;
  background-color: white;
  height: 44px;
  width: 60px;
  border-radius: 10px
}

/* Container that postions the checkbox at the center of the accessibilitySection */
.accessibilityCheckbox {
  margin: 0;
  position: absolute;
  top: 25%;
}

/* Identify the accessibility checkbox as clickable */
#accessCheckBox, .fa-universal-access {
  cursor: pointer;
}

/* Footer content centered and font made smaller */
footer {
  text-align: center;
  font-size: 12px;
  padding-top: 20px;
}

/* When the screen size goes below 700px the text in the categorySelector disapears, the burgerMenu appears and the category button gets smaller */
@media only screen and (max-width: 700px) {
  .burgerMenu {
    display: block !important;
  }
  .menuText {
    display: none;
  }
  .categorySelectorButton {
    padding: 15px 25px;
  }
}