/* Import font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Jaldi:wght@700&display=swap');

/* Set up fonts and font sizes for headings */
h1 {
  font-size: 75px;
  font-family: 'Jaldi', sans-serif;
}

h2 {
  font-size: 50px;
  font-family: 'Jaldi', sans-serif;
}

h3 {
  font-size: 30px;
  font-family: 'Jaldi', sans-serif;
}

h4 {
  font-size: 20px;
  font-family: 'Jaldi', sans-serif;
}

/* fluidPage size and color */
.container-fluid {
  background-color: white;
  margin-top: 50px;
  margin-bottom: 50px;
  border-radius: 10px;
  padding-bottom: 20px;
}

/* Resize and center front page image */
img[src="img/front_page.png"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}

/* Add space between answer image buttons */
.shiny-flow-layout>div {
  width: 200px;
  height: 200px;
}

/* Image answer buttons */

.btn.action-button.img-btn:hover, .btn.action-button.img-btn:focus, .btn.action-button.img-btn:active {
    border-color: #e9aed9;
    border-width: 4px;
}

/* Back and Next buttons normal */
.btn-warning, .btn-warning.focus, .btn-warning:focus  {
  background-color: #e9aed9;
  border-color: #e9aed9;
  font-size: 30px;
  font-family: 'Jaldi', sans-serif;
}

/* Back and Next buttons darker when hovered/clicked on */
.btn-warning:hover, .btn-warning:active, .btn-warning:target, .btn-warning:visited, .btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open>.dropdown-toggle.btn-warning.focus, .open>.dropdown-toggle.btn-warning:focus, .open>.dropdown-toggle.btn-warning:hover{
  background-color: #c170ab;
  border-color: #c170ab;
  font-size: 30px;
  font-family: 'Jaldi', sans-serif;
}

/* Next buttons light when disabled (No input selected yet) */
.btn-warning.disabled.focus, .btn-warning.disabled:focus, .btn-warning.disabled:hover, .btn-warning[disabled].focus, .btn-warning[disabled]:focus, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning.focus, fieldset[disabled] .btn-warning:focus, fieldset[disabled] .btn-warning:hover {
  background-color: #f8e2f2;
  border-color: #f8e2f2;
  font-size: 30px;
  font-family: 'Jaldi', sans-serif;
}

/* 'Give me my answer' button normal */
.btn-result, .btn-result:focus {
  background-color: #e9aed9;
  border-color: #e9aed9;
  font-size: 30px;
  box-shadow: none;
  font-family: 'Jaldi', sans-serif;
  color: white;
  display: block;
  margin: auto;
}

/* 'Give me my answer' button darker when hovered/clicked on */
.btn-result.active.focus, .btn-result.active:focus, .btn-result.active:hover, .btn-result:active.focus, .btn-result:active:focus, .btn-result:active:hover, .open>.dropdown-toggle.btn-result.focus, .open>.dropdown-toggle.btn-result:focus, .open>.dropdown-toggle.btn-result:hover, .btn-result:hover, .btn-rsult:active{
  background-color: #c170ab;
  border-color: #c170ab;
  font-size: 30px;
  box-shadow: none;
  font-family: 'Jaldi', sans-serif;
  color: white;
  display: block;
  margin: auto;
}