/* Import from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito&family=Odibee+Sans&display=swap');

/* Change default margin, padding and border to 0 and none */
* {
  margin: 0;
  padding: 0;
  border: none;
}

/* Style body and headers */
body {
  font-family: Nunito, sans-serif;
  font-weight: 500;
  color: #151311;
  background-color: #789053;
}

/* Style video */
#bg-video {
  display: none;
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

h1,
h2 {
  font-family: "Odibee Sans", cursive;
  font-size: 2em;
  letter-spacing: 1px;
}

/* Style logo */
#logo {
  font-size: 4em;
  text-align: center;
  margin: 20px;
}

/* Style btn class */
.btn {
  font-family: "Odibee Sans", cursive;
  letter-spacing: 1px;
  font-size: 1.5em;
  border-radius: 10px;
  cursor: pointer;
}

/* Style navigation bar */
nav {
  text-align: center;
}

nav li {
  display: inline;
  margin: auto 10px;
}

nav a {
  text-decoration: none;
  padding: 5px;
  background-color: #ffffff;
  color: #151311;
  border: 4px solid #151311;
}

nav a:hover {
  color: #ffffff;
  background-color: #151311;
}

/* Style carousel */
.carousel {
  width: 95vw;
  max-width: 500px;
  margin: auto;
  overflow: hidden;
}

/* Style the sections slides */
.section-slides {
  margin-top: 20px;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.section-slides>section,
.section-slides>div {
  position: relative;
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 95vw;
  max-width: 500px;
  height: 70vh;
  max-height: 600px;
  margin-right: 20px;
  border-radius: 10px;
  background: #ffffff;
}

.section-slides::-webkit-scrollbar {
  height: 0;
}

/* Style footer */
footer {
  text-align: center;
  margin-top: 20px;
}

footer li {
  display: inline;
  padding-right: 20px;
  font-size: 1.5em;
}

footer a {
  text-decoration: none;
  color: #151311;
}

footer p {
  margin-top: 10px;
  font-size: 0.8em;
}

/* Style home section and its content */
#home-section>button {
  font-size: 2em;
  background-color: #789053;
  display: block;
  margin: 25px auto;
  padding: 10px;
  width: 250px;
}

#home-section>button:hover {
  background-color: #bf834a;
}

#main-image {
  width: 100%;
  text-align: center;
}

#main-image img {
  width: 350px;
  height: 350px;
  border-radius: 10px;
}

/* Style pop-ups throught the website*/
.popup {
  width: 250px;
  top: 25px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  position: absolute;
  border-radius: 10px
}

/* Pop up form styling - hidden by deafult */
.form-popup {
  display: none;
}

.form-popup h2 {
  font-size: 2em;
  margin: 15px auto;
}

.form-container {
  padding: 10px;
  color: #ffffff;
  background-color: #151311ef;
  border-radius: 10px;
}

.form-container input,
.form-container textarea {
  display: block;
  padding: 15px;
  margin: 5px auto 15px;
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 10px;
  background: #151311ef;
  opacity: 0.8;
}

.form-container input:focus {
  border-color: #789053;
}

.form-container button {
  width: 80%;
  background-color: #789053;
  color: #151311;
  padding: 10px;
  margin: 0 auto 10px;
  opacity: 1;
}

#close-feedback-btn,
#close-rules-btn {
  background-color: #bf834a;
}

#close-feedback-btn:hover,
#close-rules-btn:hover {
  background-color: #ffffff;
}

.form-container button:hover,
.form-container #cancel-btn:hover {
  background-color: #ffffff;
}

/* Style instructions section and its content */
#instructions-section h2,
#instructions-section h3 {
  text-align: center;
  margin: 20px auto;
}

#instructions-section p {
  text-align: justify;
  margin: 20px;
}

#instructions-section ul {
  text-align: center;
  margin: 20px;
  list-style-type: none;
}

#instructions-section i {
  font-size: 1.5em;
  margin: 0 0 10px 10px;
}

/* Style game section and its content */

/* Style score area */
.user-score-label {
  margin: 20px;
  float: left;
}

.computer-score-label {
  margin: 20px;
  float: right;
}

/* Style game area */
.game-area {
  clear: both;
  text-align: center;
}

.game-area h2 {
  margin-top: 20px;
}

.game-area i {
  font-size: 4em;
}

/* Style feedback and buttons area */
#game-feedback {
  text-align: center;
  margin-top: 20px;
}

#result {
  font-size: 1.25em;
  margin-bottom: 10px;
}

.game-buttons {
  text-align: center;
  margin: 10px;
}

.game-btn {
  background-color: transparent;
  font-size: 2em;
  padding: 5px;
  margin: 10px 10px 0 0;
  border: 3px solid;
  border-radius: 50%;
  cursor: pointer;
}

#open-rules-btn {
  position: absolute;
  bottom: 5px;
  right: 20px;
  background-color: #789053;
  padding: 5px;
  margin: 0 auto 10px;
}

#rock-btn {
  color: #bf834a;
}

#lizard-btn {
  color: #789053;
}

#spock-btn {
  color: #344b99;
}

/* Button hover effects */
#rock-btn:hover {
  color: #ffffff;
  border-color: #bf834a;
  background-color: #bf834a;
  ;
}

#paper-btn:hover {
  color: #ffffff;
  border-color: #151311;
  background-color: #151311;
}

#scissors-btn:hover {
  color: #ffffff;
  border-color: #151311;
  background-color: #151311;
}

#lizard-btn:hover {
  color: #ffffff;
  border-color: #789053;
  background-color: #789053;
}

#spock-btn:hover {
  color: #ffffff;
  border-color: #344b99;
  background-color: #344b99;
}

#rules-btn:hover {
  background-color: #bf834a;
}

/* Pop up rules styling - hidden by deafult */
.rules-popup {
  display: none;
}

.rules-container {
  padding: 10px;
  color: #ffffff;
  background-color: #151311ef;
  border-radius: 10px;
}

.rules-container h2 {
  font-size: 2em;
  margin: 15px auto;
}

.rules-container i {
  font-size: 1.5em;
  margin: 0 10px 10px;
}

.rules-container ul {
  list-style-type: none;
}

.rules-container button {
  width: 80%;
  background-color: #789053;
  color: #151311;
  padding: 10px;
  margin: 20px auto;
  opacity: 1;
}

/* Style fullscreen divs */
.fullscreen-div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  width: 100vw;
  height: 100vh;
}

/* Style block landscape div*/
#block-landscape {
  display: none;
  background-color: #151311;
}

#block-landscape p {
  color: #ffffff;
  font-size: 1.5em;
  margin: 120px 30px;
}

/* Style result div*/
#result-div {
  display: none;
}

#result-message {
  font-size: 3em;
  margin: 100px auto 20px;
}

#gif-wrapper {
  width: 100vw;
}

#result-gif {
  width: 80%;
  max-width: 600px;
  margin-bottom: 20px;
}

#result-div a, #result-div button {
  font-size: 2em;
  text-decoration: none;
  padding: 5px;
  background-color: #ffffff;
  color: #151311;
  border: 4px solid #151311;
  margin: 0 20px;
}

/* Style 404 error page */
#wrapper-404 {
  position: absolute;
  text-align: center;
  width: 90vw;
  height: 90vh;
  max-height: 900px;
  margin: 5%;
  background: #ffffff;
  border-radius: 10px;
}

#title-404 {
  position: relative;
  margin-top: 100px;
}

#title-404 h2 {
  margin: 50px auto 0;
}

#gif-404 {
  margin-top: 50px;
  position: relative;
  text-align: center;
}

#gif-404 img {
  width: 80%;
  max-width: 600px;
}

#text-404 {
  position: relative;
}

#text-404 p {
  margin: 20px;
}

#text-404 a {
  font-size: 1.5em;
  text-decoration: none;
  color: #151311;
  background-color: #789053;
  padding: 10px;
  width: 250px;
}

#text-404 a:hover {
  background-color: #bf834a;
}

/* Style screen sizes from 900px tall and up */
@media screen and (min-height: 900px) {

  body {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  header {
    height: 20vh;
  }

  #logo {
    margin: 30px;
    font-size: 5em;
  }

  nav .btn {
    font-size: 2em;
  }

  .carousel {
    height: 70vh;
    margin-top: 50px;
  }

  footer {
    height: 10vh;
  }

  footer li {
    font-size: 2em;
  }

  footer a:hover {
    color: #ffffff;
  }

  footer p {
    font-size: 1em;
  }

}

/* Style small screen sizes from 800px tall and down */
@media screen and (max-height: 800px) {

  #main-image img {
    width: 300px;
    height: 300px;
    border-radius: 10px;
  }

  .form-popup {
    top: 5px;
  }

  #instructions-section li {
    display: inline;
  }

  #instructions-section i {
    display: inline;
    margin-right: 20px;
  }

  .game-area h2 {
    display: inline;
  }

  #vs-label {
    display: block;
  }

  .rules-popup {
    top: 1px;
  }

}

/* Style small screen sizes 700px tall and down */
@media screen and (max-height: 700px) {

  #logo {
    font-size: 3em;
    margin: 15px;
  }

  .btn {
    font-size: 1em;
  }

  #home-section>button {
    font-size: 1.5em;
    margin: 15px auto;
    width: 200px;
  }

  .popup h2 {
    font-size: 2em;
    margin: 10px auto;
  }

  .form-container input,
  .form-container textarea {
    margin-bottom: 10px;
  }

  .rules-container i {
    margin-bottom: 7px;
  }

  footer {
    margin-top: 10px;
  }

  footer p {
    margin-top: 10px;
  }
}

/* Style small screen sizes from 640px tall or 320px wide and down */
@media screen and (max-height: 640px),
screen and (max-width: 320px) {

  h1,
  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1em;
  }

  #logo {
    font-size: 2em;
  }

  .section-slides>section,
  .section-slides>div {
    height: 65vh;
  }

  #main-image img {
    width: 220px;
    height: 220px;
  }

  .form-popup {
    top: 0.5px;
  }

  .popup h2 {
    font-size: 1.5em;
    margin: 5px auto;
  }

  .form-container input,
  .form-container textarea {
    margin-bottom: 5px;
  }

  .form-container button {
    width: fit-content;
    margin: auto 10px;
  }

  .form-container button {
    font-size: 1em;
  }

  #instructions-section h2,
  #instructions-section h3 {
    margin: 15px auto;
  }

  #instructions-section p {
    font-size: 0.85em;
    margin: 15px;
  }

  #instructions-section ul {
    margin: 15px;
  }

  #instructions-section li {
    font-size: 0.85em;
  }

  #instructions-section i {
    font-size: 1em;
  }

  .user-score-label,
  .computer-score-label {
    margin: 15px;
  }

  .game-area h2 {
    margin-top: 15px;
  }

  .game-area i {
    font-size: 2em;
  }

  #result {
    font-size: 1em;
    margin-bottom: 5px;
  }

  .game-buttons {
    margin-top: 10px;
  }

  .game-btn {
    margin: 5px 30px 0 0;
  }

  .rules-container i {
    font-size: 1.2em;
  }

  .rules-container button {
    margin: 5px auto;
    width: 70%;
  }

  #title-404 {
    margin-top: 0;
  }

  #gif-404 {
    margin-top: 15px;
  }

}

/* Style small screen sizes from 500px tall and down to block landscape on mobiles */
@media screen and (max-height: 500px) {

  html,
  body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #block-landscape {
    display: block;
  }

}

/* Style large screen sizes from 1024px wide and up to show background video */
@media screen and (min-width: 1024px) {

  html,
  body {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  #bg-video {
    display: block;
  }

}