/* google fonts */

@import url("https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Press+Start+2P&display=swap");

/* css variables */
:root {
  --heading-font: "Press Start 2P", serif;
  --main-font: "Patrick Hand", serif;
}

/* global styles */

body {
  font-family: var(--main-font);
}

h1,
h2 {
  font-family: var(--heading-font);
}

main {
  background-color: #263b44;
  color: white;
}

/* form */

label {
  font-family: var(--heading-font);
}

option {
  font-size: xx-large;
}

/* hide all elements with this class - taken from Web Dev Simplified Build a Quiz App With JavaScript Tutorial: https://www.youtube.com/watch?v=riDzcEQbX6k */

.hidden {
  display: none;
}

/* give all elements with this class 2rem margin */

.space {
  margin: 1rem;
}

.space-top-bottom {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.space-bottom {
  margin-bottom: 2rem;
}

/* navbar */

.navbar {
  background-color: #a5aeb6;
}

.nav-link {
  font-size: xx-large;
}

/* left and right columns */

.bird-col {
  padding-top: 8%;
}

/* buttons */

#start,
#submit,
#get-started,
#next-round {
  font-family: var(--heading-font);
  font-size: xx-large;
}

/* message with reminder enter values into form */

#record-message-port,
#record-message-star {
  margin-top: 10%;
  color: white;
}

/* divs containing content displayed if answer correct or incorrect */

#incorrect,
#correct {
  display: table;
  margin: 0 auto;
}

/* form buttons and messages */

#right,
#next,
#wrong,
#reset {
  font-size: xx-large;
}

#wrong {
  color: red;
}

/* info page */

.info {
  font-size: x-large;
}

.btn-dark {
  background-color: black;
}

/* info cards */

.card {
  background-color: #a5aeb6;
  min-width: 300px;
  max-width: 325px;
  max-height: 570px;
}


/* object-fit: cover; taken from: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio */

.card-img-top {
  height: 350px;
  width: 324px;
  -o-object-fit: cover;
     object-fit: cover;
}

.card-title {
  font-family: var(--heading-font);
  font-size: x-large;
}

.card-body {
  font-size: x-large;
}

/* Media Queries */

/* Small devices (landscape phones and portrait tablets less than 950px width) */

@media screen and (max-width: 950px) {
  #start,
  #submit,
  #get-started,
  #record-message-port,
  #record-message-star,
  #next-round,
  #reset,
  #next,
  #incorrect-results,
  #correct-results,
  #end,
  option,
  label {
    font-size: small;
  }

  #right,
  #wrong {
    font-size: medium;
  }

  .navbar-brand,
  #form-header {
    font-size: small;
  }

  #reset {
    width: 110%;
  }
}

/* Force landscape mode for mobiles - taken from stack overflow: https://stackoverflow.com/questions/14360581/force-landscape-orientation-mode#:~:text=Or%20by%20binding%20a%20JavaScript,in%20portrait%20mode%20*%2F%20%7D%20%7D)%3B */

@media screen and (orientation: portrait) and (max-width: 767px) {
  #start,
  #port-bird,
  #star-bird,
  #boat,
  #footer,
  #record-message-star,
  #record-message-port,
  #next-round,
  #incorrect-results,
  #correct-results,
  #end {
    display: none;
  }

  #turn {
    display: contents;
  }
}