html,
body {
  background: #181818;
  color: white;
  font-family: "Ubuntu Mono", monospace;
  font-weight: normal;
}
.container {
  box-sizing: border-box;
  margin: 0 auto;
  margin-bottom: 2.5em;
  margin-top: 1.5em;
  max-width: 1100px;
  padding: 0 2em;
  position: relative;
  width: 100%;
}
.center {
  text-align: center;
}
.center-object {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
}
@media (max-width: 750px) {
  .buttons {
    align-items: center;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    background: transparent;
  }
}
.card {
  background: #282828 !important;
  border-radius: 10px;
  margin-bottom: 2.5em;
  padding: 1em;
  position: relative;
  filter: drop-shadow(5px 5px 0 rgba(40, 40, 40, 0.6));
}
.card p {
  background: #282828 !important;
}
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.card span {
  background: transparent;
}
.text {
  color: white !important;
  background: transparent;
}
.text.emerald {
  color: #5cf754 !important;
}
.text.ruby {
  color: #eb4034 !important;
}
.text.orange {
  color: #fc8c03 !important;
}
.text.sun-flower {
  color: #f1c40f !important;
}
.text.pink {
  color: #ed74eb !important;
}
.text.diamond {
  color: #44ebe5 !important;
}
.text.lemon {
  color: #ffeaa7 !important;
}
.text.gray {
  color: #99aab5 !important;
}
.text.letterspacing {
  letter-spacing: 1;
}
.text.bold {
  font-weight: bold;
}
.text.code {
  color: whitesmoke;
  background-color: #4d4d4d;
}
.bold {
  font-weight: bold;
  background: transparent;
}
.buttons {
  align-items: center;
  display: flex;
  justify-content: center;
  text-align: center;
  background: transparent;
}
.button {
  position: relative;
  color: white !important;
  background: transparent;
  margin: 0.5em;
  padding: 0.5em 0.8em;
  border-radius: 5px;
  border: 3px solid white;
  display: block;
  font-size: 17px;
  outline: none;
  cursor: pointer;
  text-decoration: none;
  transition: 0.7s;
}
.button.emerald {
  border: 3px solid #5cf754;
}
.button.ruby {
  border: 3px solid #eb4034;
}
.button.orange {
  border: 3px solid #fc8c03;
}
.button.sun-flower {
  border: 3px solid #f1c40f;
}
.button.pink {
  border: 3px solid #ed74eb;
}
.button.diamond {
  border: 3px solid #44ebe5;
}
.button.lemon {
  border: 3px solid #ffeaa7;
}
.button.gray {
  border: 3px solid #99aab5;
}
.button.hover:hover {
  border: 3px solid white;
  background-color: white;
  color: #fff;
}
.button.emerald.hover:hover {
  border: 3px solid #5cf754;
  background-color: #5cf754;
  color: #fff;
}
.button.ruby.hover:hover {
  border: 3px solid #eb4034;
  background-color: #eb4034;
  color: #fff;
}
.button.orange.hover:hover {
  border: 3px solid #fc8c03;
  background-color: #fc8c03;
  color: #fff;
}
.button.sun-flower.hover:hover {
  border: 3px solid #f1c40f;
  background-color: #f1c40f;
  color: #fff;
}
.button.pink.hover:hover {
  border: 3px solid #ed74eb;
  background-color: #ed74eb;
  color: #fff;
}
.button.diamond.hover:hover {
  border: 3px solid #44ebe5;
  background-color: #44ebe5;
  color: #fff;
}
.button.lemon.hover:hover {
  border: 3px solid #ffeaa7;
  background-color: #ffeaa7;
  color: #fff;
}
.button.gray.hover:hover {
  border: 3px solid #99aab5;
  background-color: #99aab5;
  color: #fff;
}
.button.border:hover {
  border: 3px solid #b0abab;
}
.button.emerald.border:hover {
  border: 3px solid #216b1d;
}
.button.ruby.border:hover {
  border: 3px solid #a32c24;
}
.button.orange.border:hover {
  border: 3px solid #8f5003;
}
.button.sun-flower.border:hover {
  border: 3px solid #856c0b;
}
.button.pink.border:hover {
  border: 3px solid #9c439a;
}
.button.diamond.border:hover {
  border: 3px solid #2c9e9a;
}
.button.lemon.border:hover {
  border: 3px solid #ab9d71;
}
.button.gray.border:hover {
  border: 3px solid #485157;
}

.form {
  position: relative;
  padding: 0.5em 0.8em;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.form .form.control {
  position: relative;
  height: 40px;
}
.form .form.control input {
  height: 100%;
  width: 100%;
  border: none;
  font-size: 17px;
}
.form.control input:valid {
  font-size: 15px;
  color: #4158d0;
  border: 1px solid #4158d0;
}
.alert .alert-title {
  font-weight: 600;
  font-size: 23px;
  margin-bottom: -0.4rem;
  background: transparent;
}
.alert.danger,
.alert.tip,
.alert.warning {
  padding: 0.1rem 1.5rem;
  border-left-width: 0.5rem;
  border-left-style: solid;
}
.alert.danger {
  color: #f66;
  background: rgba(204, 0, 0, 0.25);
}
.alert.danger p {
  color: #f66;
  background: transparent;
}
.alert.danger .alert-title {
  color: #ff2929;
  background: transparent;
}
.alert.danger a {
  color: #ff0a0a;
  background: transparent;
}
.alert.tip {
  color: #215d42;
  background: #12261d;
}
.alert.tip p {
  color: #359469;
  background: transparent;
}
.alert.tip .alert-title {
  color: #359469;
  background: transparent;
}
.alert.tip a {
  color: #42b983;
  background: transparent;
}
.alert.warning {
  color: #6b5900;
  background: rgba(255, 229, 100, 0.3);
}
.alert.warning p {
  color: #b29400;
  background: transparent;
}
.alert.warning .alert-title {
  color: #b29400;
  background: transparent;
}
.alert.warning a {
  color: #d5b100;
  background: transparent;
}


code {
  font-family: Consolas,"courier new";
  color: #a6a6a6;
}
a {
  color: #696a6b;
  background: transparent;
}
a:link {
  color: #696a6b;
  background: transparent;
}
a:hover {
 color: #acadad;
}