/*importing Global*/
/*Global*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Poppins",sans-serif;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: #0c0c0c;
}

h1 {
  font-size: calc(5rem + 1vw);
}

h2 {
  font-size: calc(4rem + 1vw);
}

h3 {
  font-size: calc(3.2rem + 1vw);
}

p, button, li {
  font-size: calc(2rem + 1vw);
}

h4, .nav-links li {
  font-size: calc(1.2rem + 1vw);
}

#example, #small, #seat {
  font-size: calc(1.6rem + 1vw);
  text-align: center;
}

#example {
  padding: 0 10rem;
  font-style: italic;
}

ol {
  list-style: lower-roman;
}

ul {
  list-style: square;
}

.item ol, .item ul {
  margin: 0 5rem;
}

.item ol li, .item ul li {
  margin: 2rem 0;
}

/*Media Queries*/
/*Desktop @1524px*/
@media screen and (max-width: 1524px) {
  html {
    font-size: 60%;
  }
}

/*Desktop @1368px*/
@media screen and (max-width: 1368px) {
  html {
    font-size: 52.5%;
  }
}

/*Tablet @1024px*/
@media screen and (max-width: 1024px) {
  html {
    font-size: 52.5%;
  }
  .nav-links {
    font-size: calc(2rem + 1vw);
  }
}

/*Phone @768px*/
@media screen and (max-width: 768px) and (orientation: landscape) {
  html {
    font-size: 47.5%;
  }
}

/*Phone @524px*/
@media screen and (max-width: 524px) {
  html {
    font-size: 42.5%;
  }
  #example {
    padding: 0 5rem;
  }
  .item ol, .item ul {
    margin: 0 2.5rem;
  }
}

.picture-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.picture {
  height: 45rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  margin: 3rem 0;
}

.picture img {
  height: 100%;
}

#example {
  margin-bottom: 5rem;
}

.item:nth-child(11) ul, .item:nth-child(10) ul {
  margin-top: 7rem;
  margin-bottom: 7rem;
}

@media screen and (max-width: 1024px) {
  .picture {
    height: 35rem;
  }
}

/*Phone @524px*/
@media screen and (max-width: 524px) {
  .picture-wrapper {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .picture {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .item:nth-child(11) ul, .item:nth-child(10) ul {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
}

@media screen and (max-width: 375px) {
  .picture {
    height: 25rem;
  }
  .item:nth-child(11) ul, .item:nth-child(10) ul {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
}
/*# sourceMappingURL=GamePlay.css.map */