@import url("https://fonts.googleapis.com/css?family=Cherry+Cream+Soda|Gaegu:700|Irish+Grover|Signika:600|Special+Elite&display=swap");

.hide-start {
  display: none;
}
/*WHY: Used to prevent first load flicker experienced when jQuery hide() used to hide elements at start.
Bootstrap display classes not working with jQuery hide() so own css written.*/

/*----------MAIN FONTS----------*/
body {
  font-family: "Signika", sans-serif;
  font-size: 1.2rem;
  color: #575778;
}

h1 {
  font-family: "Irish Grover", cursive;
  font-size: 1.8rem;
  line-height: 1.8rem;
  color: #ffffff;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1),
    0px 18px 23px rgba(0, 0, 0, 0.1);
}
/*WHERE: text shadow https://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/*/

h2,
#instruct--mdlg {
  font-family: "Cherry Cream Soda", cursive;
  font-size: 1.1rem;
  color: #e9f0f2;
}

#instruct--xssm {
  font-family: "Irish Grover", cursive;
  font-size: 1.1rem;
  color: #e9f0f2;
}

#sum-check,
#sum-next {
  font-size: 1.2rem;
}
/*WHY: sumCheck and sumNext included to overwrite Bootstrap btn size.*/

.message {
  font-family: "Gaegu", cursive;
  font-size: 1.4rem;
  line-height: 1.2rem;
}

.message.red {
  font-size: 2.7rem;
}
/*WHY: Incorrect answer shown next to thumb image.*/

dt,
dd,
#report-text {
  font-family: "Special Elite", cursive;
  font-size: 0.9rem;
  font-weight: bold;
  color: #7fa5b5;
}

dt {
  color: #b18683;
}

.green {
  color: #009816;
}

.red {
  color: #980036;
}

/*----------LINKS----------*/
a {
  font-family: "Special Elite", cursive;
  font-size: 0.8rem;
  line-height: 0.8rem;
}
/*WHAT: Font size & line height increase for md lg screens in media queries.*/

.bg--trigg > a {
  color: #7fa5b5;
}

.bg-color--darkpink * a {
  color: #ebe1e0;
}

.bg--trigg > a:hover {
  color: #b18683;
  text-decoration: none;
}

/*----------TIMER & ICONS----------*/

i {
  font-size: 1.8rem;
}

i.missing {
  font-size: 1.4rem;
}
/*WHY: Reduce i font size to span size when i is used to highlight missing operator/number to stop keypad from moving.*/

.bg-color--lightpink > .time {
  font-size: 1.6rem;
}
/*WHY: Bg--lightpink md & lg screens.*/

.time,
i {
  color: #b18683;
}

.bg-color--darkblue > i {
  color: #e9f0f2;
}
/*WHY: No time just i displayed on bg--darkblue.*/

.bg-color--darkpink > .time,
.bg-color--darkpink > i {
  color: #ebe1e0;
}

.bg-color--darkpink > i:hover,
.bg-color--lightpink > i:hover {
  color: #ffffff;
}
/*WHY: Placed below other colour css to ensure overwrites.*/

.disable,
.disable:hover {
  color: #b18683 !important;
  opacity: 0.3;
}
/*WHY: Important used to overwrite bg-color--lightpink>i hover.*/

.thumb-height {
  height: 40px;
}

/*----------PROGRESS BAR----------*/

#progress {
  background-color: #009816;
}

.progress {
  width: 217px;
  height: 1.2rem;
}
/*WHY: Width matches pad width.*/

/*----------BUTTONS----------*/

.button-style {
  padding: 0px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 5px;
  color: #b18683;
  background-color: #ffffff;
  vertical-align: top;
  -webkit-box-shadow: 2px 1px 2px #808080;
  box-shadow: 2px 1px 2px #808080;
  margin: 8px 10px 8px 10px;
}
/*WHERE: webkit from https://autoprefixer.github.io/ */

.button-style:active {
  -webkit-box-shadow: 0 0 0 #ffffff;
  box-shadow: 0 0 0 #ffffff;
  margin: 10px 10px 6px 10px;
}
/*WHERE: https://stackoverflow.com/questions/38377062/how-to-make-html-button-look-pressed-in-using-css*/
/*WHERE: webkit from https://autoprefixer.github.io/ */

.button-style--selected {
  background-color: #b18683;
  color: #ffffff;
}

#sum-try,
#sum-check,
#sum-next {
  color: #575778;
}
/*WHY: Bootstrap btn class overwriting body colour.*/

#info-close {
  width: 60px;
  height: 32px;
}

#pick * label,
#pick * button {
  width: 32px;
  height: 32px;
}

#pad * [type="button"] {
  height: 40px;
}

#sum-ask {
  margin-left: 5px;
  margin-top: 10px;
  margin-bottom: 8px;
}

#sum-try {
  margin-top: 10px;
  margin-bottom: 8px;
  padding-top: 5px;
  width: 42px;
  height: 40px;
  border: solid 1px #ccccd6;
  background-color: #ffffff;
}

#sum-check,
#sum-next {
  width: 60px;
}

hr {
  margin: 5px;
}

.pad-num {
  width: 30px;
}

#pad-clear {
  width: 80px;
}

#pad {
  border: 2px solid #ccc;
  border-radius: 10px;
  background-color: #e9f0f2;
  width: 217px;
}

#report-download {
  height: 45px;
  width: 40px;
}

/*----------BACKGROUNDS----------*/
.bg-color--darkpink {
  background-color: #b18683;
}

.bg-color--lightpink {
  background-color: #ebe1e0;
}

.bg-color--darkblue {
  background-color: #7fa5b5;
}

.bg-color--lightblue {
  background-color: #e9f0f2;
}

.bg--trigg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: #e9f0f2;
  background-image: url("../images/hi.svg");
}

.bg-height--10 {
  height: 10vh;
}
/*WHY: vh used so site fits in viewport and limits need for scrolling.*/

.bg-height--15 {
  height: 15vh;
}

.bg-height--20 {
  height: 20vh;
}

.bg-height--30 {
  min-height: 30vh;
}

.bg-height--65 {
  height: 65vh;
}

.bg-height--60px {
  height: 60px;
}

.margin-top--15 {
  margin-top: 15vh;
}

.shade {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
/* WHERE: Shadow code from https://codepen.io/sdthornton/pen/wBZdXq*/

/*----------MEDIA QUERIES----------*/

@media (min-width: 768px) and (max-width: 991px) {
  h1 {
    font-size: 2.75rem;
    line-height: 2.75rem;
  }
  h2 {
    font-size: 1.5rem;
  }
  a {
    font-size: 1rem;
    line-height: 1rem;
  }
}

@media (min-width: 992px) {
  h1 {
    font-size: 3rem;
    line-height: 3rem;
  }
  h2 {
    font-size: 1.7rem;
  }
  a {
    font-size: 1rem;
    line-height: 1rem;
  }
}

/*----------BUG FIXES----------*/

input,
label {
  -webkit-appearance: none;
  border-radius: 0;
}
/*WHERE: https://www.daretothink.co.uk/stop-ios-styling-your-input-fields-and-buttons/*/

input[type="radio"] {
  -webkit-appearance: none;
}

[type="radio"] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/*WHERE: https://www.sitepoint.com/replacing-radio-buttons-without-replacing-radio-buttons/*/
/*WHY: Used to stop iOS styling labels and radios.*/