a {
    text-decoration: none;
}

.active {
  background-color: red;
  color: white;
}

body {
    font-family: 'Muli', 'Helvetica', 'Ariel';
    margin:0;
}

.button {
    padding: 40px 0 50px 0;
    text-align:center;
}

.button h1, .button h2 {
    border: 1px solid black;
    border-radius: 5px;
    padding: 20px;
    display: inline;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.5s;
}

.button h1:hover{
    background-color: rgba(221,27,0,0.8);
}

.button h2:hover{
    background-color: rgba(221,27,0,0.8);
}

#calculation-img-1 {
    padding-top:20px;
    width: 100%;
    margin: auto;
}

#calculation-list li{
    padding: 20px 10px;
}

.component {
    display: block;
    height: 100px;
    border: 1px solid black;
    border-radius: 4px;
    margin-right: 30px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.8s;
}

.component:hover{
    height: 180px;
}

#component-agua {
    height: 150px;
    transform: rotate(4deg);
}

#component-agua:hover{
    transform: rotate(0deg);
    height: 250px;
}

#component-blank-game {
    transform: rotate(3deg);
}

#component-blank-game:hover{
    transform: rotate(0deg);
}

#component-frieda {
    height: 150px;
    transform: rotate(-5deg);
}

#component-frieda:hover{
    transform: rotate(0deg);
    height: 250px;
}

#component-railway {
    transform: rotate(-5deg);
}

#component-railway:hover{
    transform: rotate(0deg);
}

#component-tycoon {
    transform: rotate(2deg);
}

#component-tycoon:hover{
    transform: rotate(0deg);
}


#component-weston {
    height: 150px;
    transform: rotate(-5deg);
}

#component-weston:hover{
    transform: rotate(0deg);
    height: 250px;
}

.div49 {
    display:block;
}

.download-button h2 {
  font-size: 18px;
}

.example {
    padding: 5vh 15vw;
    display: flex;
    align-items: center;
    justify-content : center;
}

.example * {
    opacity: 0;
}

.example > p {
    padding: 0 5vw;
}

.example > img {
    display: inline-block;
    position: relative;
    margin-bottom: 3vh;
}

.example:nth-child(odd) {
    flex-wrap: wrap;
}

.example:nth-child(even) {
    flex-wrap: wrap-reverse;
}

#exampleimg1, #exampleimg3 {
    float: left;
    transform: rotate(10deg);
}

#exampleimg2 {
    float: right;
    transform: rotate(-10deg);
    border: 2px solid black;
}

#exampleimg1, #exampleimg2 {
    height: 25vh;
}

#exampleimg3 {
    height: 15vh; /* the coins need to be smaller to look right*/
}

.game-element {
    height: 30px;
    padding: 0 20px;
    position:absolute;
    bottom:5px;
}

h1 {
    font-size: 32px;
    text-align:center;
    color: rgb(22, 6, 17);
}

h2 {
    font-size: 24px;
    font-weight: normal;
    text-align: center;
    color: rgb(22, 6, 17);
}

#hand {
    position:relative;
    padding: 20px 0px;
}

.hand-cards-container {
  display: block;
}

.hand_card {
    border: 1px solid black;
    border-radius: 4px;
}

#hand_card_1 {
    transform: rotate(-100deg);
    height: 80px;
}

#hand_card_2 {
    transform: rotate(-90deg);
    height: 80px;
    margin-left: -50px;
}

#hand_card_3 {
    height: auto;
    width: 80px;
    margin-left: -50px;
    margin-bottom: -20px;
    transform: rotate(10deg);
}

.hand-coins-container {
  display: block;
}

#hand_coin_1 {
    width: 35px;
    margin-left: 50px;
    padding-top: 30px;
    transform: rotate(-1deg);
}

#hand_coin_2 {
    height: auto;
    width: 35px;
    margin-left: -20px;
    margin-bottom: -10px;
    padding-top: 30px;
    transform: rotate(10deg);
}

#hand_specialty {
    height: 100px;
    display: inline
}

hr {
    margin-top: 3vh;
    margin-bottom: 3vh;
    width: 50vw;
}

#icons {
    display:block;
    width: 80vw;
    max-width: 600px;
    margin: auto;
    opacity: 0;
    padding-top: 42vh;
}


.img-caption-below {
    font-size: 14px;
}

.img-caption-side {
    display: block;
    top:10px;
    font-size: 14px;
    position: absolute;
}

#intro {
    padding: 0 10vw;
    line-height: 2;
    margin: 5vh 0 8vh;
}

.invalid-text {
    color: red;
    font-size: 18px;
    padding-left: 30px;
}

#landing {
    height: 100vh;
}

#learn-play-btn {
    padding: 80px 0 100px 0;
    text-align:center;
}

li {
    font-size: 18px;
}

.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar .li-right a {
    display: block;
    padding: 30px;
}

.navbar a {
    display: block;
    text-align: left;
    color: black;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    /* ...and now for the proper property */
    transition:.5s;
}

.navbar a:hover {
    background-color: rgba(221,27,0,0.8);
}

p {
    font-size: 18px;
    color: rgb(22, 6, 17);
}

#round1 {
    width:100%;
}

#rule_section {
    text-align: left;
    padding: 20px 20px;
}

#rule_section h2, #rule_section li, #rule_section p {
    text-align: left;
    line-height: 1.8;
    position: relative;
}

#rules-landing h1{
    padding-top: 80px;
}

#specialty-div {
    padding-top:20px;
    position:relative;
}

.two-card-1 {
    height: 100px;
    transform: rotate(1deg);
}

.two-card-2 {
    height: 100px;
    margin-left: -146px;
    margin-bottom: -50px;
    transform: rotate(0deg);
}

.two-card-3 {
    height: 100px;
    transform: rotate(1deg);
}

.two-card-4 {
    height: 100px;
    margin-left: -146px;
    margin-bottom: -80px;
    transform: rotate(0deg);
}

#two-card-coin-1 {
    height: 45px;
    margin-left: -110px;
    transform: rotate(5deg);
}

.three-card-1 {
    width: 100px;
    margin-left: 20px;
    transform: rotate(89deg);
}

.three-card-2 {
    height: 100px;
    margin-left: -130px;
    margin-bottom: -30px;
    transform: rotate(1deg);
}

.three-card-3 {
    height: 100px;
    margin-left: -140px;
    margin-bottom: -80px;
    transform: rotate(-2deg);
}

.three-card-4 {
    height: 100px;
    transform: rotate(2deg);
    margin-bottom: -110px;

}

.three-card-5 {
    width: 100px;
    margin-left: -125px;
    transform: rotate(89deg);
    margin-bottom: -75px;
}

.three-card-6 {
    height: 100px;
    margin-left: -130px;
    transform: rotate(-2deg);
}

#three-card-coin-1 {
    height: 45px;
    margin-left: -115px;
    margin-bottom: 10px;
    transform: rotate(-5deg);
}

#three-card-coin-2 {
    height: 45px;
    margin-left: -15px;
    margin-bottom: 10px;
    transform: rotate(1deg);
}




.navbar-container {
  background-color: rgba(255,255,255,0.95);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.navbar {
  display: none
}

.navbar.active {
  display: block
}

.menu-button {
  position: absolute;
  right: 15px;
}

.menu-button p {
  padding: 8px 12px;
  border: 0.5px solid rgba(0,0,0,0.8);
  border-radius: 5px;
  background-color: rgba(255,255,255,0.8);
}

#navbar-logo img {
    position: relative;
    height: 40px;
    padding: 20px 30px;
}

.navbar li {
  width:70%;
}

/* for large devices: */

@media (min-width:1068px) {
  .component {
    display:inline;
  }
}

@media (min-width:768px) {
  .menu-button {
    display:none;
  }

  .navbar-container {
    border-bottom: 0.5px solid rgba(0,0,0,0.8);
  }

  .navbar {
    display: block;
  }

  .navbar li {
    width:auto;
  }

  .navbar .li-right {
    float: right;
  }

  #navbar-logo {
    float:left;
  }

  #navbar-logo img {
    height: 62px;
    padding: 10px 20px;
  }

  #calculation-img-1 {
      width: 90%;
  }

  .example {
      height: 25vh;
  }

  .example:nth-child(odd) {
      flex-wrap: nowrap;
  }

  .example:nth-child(even) {
      flex-wrap: nowrap;
      justify-content : flex-end;
  }

  .example > img {
      height: inherit;
  }

  #exampleimg3 {
      transform: scaleY(0.7); /* the coins need to be smaller to look right*/
  }

  .div49 {
      width:49%;
      display:inline-block;
  }

  h1 {
      font-size: 36px;
  }

  h2 {
      font-size: 28px;
  }


  li {
      font-size: 22px;
  }

  p {
      font-size: 22px;
  }

  #rule_section {
      text-align: left;
      padding: 20px 20vw;
  }

  #rules-landing h1{
      padding-top: 150px;
  }

  .navbar a {
    text-align:center
  }

  .hand-cards-container {
    display: inline
  }

  #hand_card_1 {
      transform: rotate(-100deg);
      height: 100px;
  }

  #hand_card_2 {
      transform: rotate(-90deg);
      height: 100px;
      margin-left: -50px;
  }

  #hand_card_3 {
      height: auto;
      width: 100px;
      margin-left: -50px;
      margin-bottom: -20px;
      transform: rotate(10deg);
  }

  .hand-coins-container {
    display: inline
  }

  #hand_coin_1 {
      width: 50px;
      margin-left: 50px;
      padding-bottom: 30px;
      padding-top: 0px;
      transform: rotate(-1deg);
  }

  #hand_coin_2 {
      height: auto;
      width: 50px;
      margin-left: -20px;
      margin-bottom: -10px;
      padding-bottom: 30px;
      padding-top: 0px;
      transform: rotate(10deg);
  }

  .img-caption-side {
    display:inline;
  }

  #specialty-div .img-caption-side {
      position: absolute;
  }

  .div49 {
    text-align: center;
  }

  .invalid-text {
      padding-left: auto;
      text-align: center !important;
  }

}

@media (min-width:468px) {
  .download-button h2 {
    font-size: 24px;
  }