output_styles.css

/* I've heard that Sass is rather helpful, especially when it comes to colors in one's styles, because you can modularize your CSS with partials. */
/*! Great place to figure out gradiets: https://cssgradient.io/ */
/* Mixins making my life easier */
body {
  font-family: "Baloo", cursive;
  font-size: 16px;
  margin: 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: rgba(154, 8, 81, 0.85);
  background: linear-gradient(225deg, rgba(154, 8, 82, 0.85) 27%, rgba(187, 95, 10, 0.85) 67%);
}

h1 {
  font-size: 3.2rem;
}

/*! Trying to put some space between the numbered markers of ordered list and the ordered list items themselves. Figured it would make things easier to read  */
li {
  margin: 0.5rem;
  font-size: 1.75rem;
}

li::before {
  content: "";
  width: 1.5rem;
  display: inline-block;
}

ol.listy2 {
  margin: 2.5rem;
}

select {
  height: 2.75rem;
  min-width: 4.95rem;
  margin: 0 0.313rem;
  padding: 0 0 0 0.5rem;
  background: #3db953;
  border: none;
  font-size: 1.5rem;
  vertical-align: middle;
  font-family: inherit;
  outline: none;
}

select#difficulty {
  padding: 0 0 0 1rem;
}

select:hover, select:focus {
  outline: solid 0.2rem #ff9c3f;
}

select#dix {
  margin: 0 0.59rem 0 0;
}

option {
  margin: 0;
  background: #3db953;
}

button {
  font-size: 1.5rem;
  font-weight: 300;
  font-family: inherit;
  border: 0;
  vertical-align: middle;
  position: relative;
  display: inline-block;
  outline: none;
  background: transparent;
  margin: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

button.rolly {
  background: #bb150a;
  border-radius: 100%;
  border: none;
  padding: 2.5rem;
  box-shadow: 0 1rem 0 0 #6e6f70;
}

button.rolly:hover, button.rolly:focus {
  background: #bb150a;
  background: radial-gradient(circle, #bb150a 49%, #535353 90%);
  box-shadow: 0 1rem 0 0 #313131;
  color: #313131;
}

button.rolly:active {
  background: #c71d11;
  box-shadow: 0 0.2rem 0 0 #272727;
  -webkit-transform: translate(0em, 0.75em);
  transform: translate(0em, 0.75em);
}

.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 970;
}

.modal .overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 973;
  background-color: rgba(124, 124, 124, 0.521);
}

.modal .modal_content {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 975;
  position: absolute;
  top: 50%;
  left: 50%;
  max-height: 90%;
  overflow: auto;
  background: linear-gradient(225deg, rgba(154, 8, 82, 0.85) 27%, rgba(187, 95, 10, 0.85) 67%);
  padding: 1.25rem;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
  text-align: center;
  border-radius: 12px;
  /*height: 25%;*/
}

.modal .modal_content > h1 {
  margin: 50% 50%;
  text-align: center;
}

#botch > h1 {
  font-size: 3.5rem;
  width: 35%;
}

#num > h1 {
  font-size: 5rem;
  width: 20%;
  border-radius: 25%;
}

@media only screen and (max-width: 750px) {
  #botch > h1 {
    font-size: 2.75rem;
  }
}
@media only screen and (max-width: 635px) {
  #botch > h1 {
    width: 50%;
  }

  #num > h1 {
    width: 35%;
  }
}
@media only screen and (max-width: 440px) {
  #botch > h1 {
    width: 75%;
  }

  #num > h1 {
    width: 50%;
  }
}
@media only screen and (max-width: 320px) {
  body {
    flex-direction: column;
  }

  select {
    margin: 1rem;
  }

  select#dix {
    margin: 1rem;
  }

  li::before {
    width: 0.75rem;
  }

  li {
    margin: 0 0 0 -0.5rem;
  }

  #botch > h1 {
    width: 100%;
  }

  #num > h1 {
    width: 80%;
  }
}

/*# sourceMappingURL=output_styles.css.map */