.rule {
  margin-top: 5px;
  border-top-style: dashed;
  border-color: #333;
  border-width: 3px;
}

.double-input .form-control {
  width: 50%;
  border-right-width: 0px;
}

.instructions {
  margin: 15px;
}

input[type=number] {
  -moz-appearance: textfield;
}

::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

input[type=text]:focus,
input[type=number]:focus,
.uneditable-input:focus {
  border-color: #d9534f;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px #d9534f;
  outline: 0 none;
}

.btn-danger:hover, .btn-danger:focus {
  outline: none;
  background-color: #AE423F;
  border-color: #983A37;
}
.btn-danger:active:focus {
  outline: none;
  background-color: #DD6461;
  border-color: #D9534F;
}

.btn-primary {
  background-color: #333;
  border-color: #333;
}
.btn-primary:hover, .btn-primary:focus {
  outline: none;
  background-color: #222;
  border-color: #222;
}
.btn-primary:active:focus {
  outline: none;
  background-color: #333;
  border-color: #333;
}

.alert-success {
  color: #99CC66;
  background-color: #EEE;
  border-color: #99CC66;
}

.alert-danger {
  color: #FF6666;
  background-color: #EEE;
  border-color: #FF6666;
}

body {
  background-color: #FFFF99;
  background-image: url("http://res.cloudinary.com/di1ws96u7/image/upload/v1510873914/hypnotize_liofmk.png");
  height: 100%;
}

.container {
  width: 600px;
  height: 100%;
}

.wide {
  padding: 0px;
}

.title-base, .title {
  color: #FF4444;
  font-family: "Oswald";
  font-size: 6em;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  padding-bottom: 15px;
  text-align: center;
}

.title-lg, .title {
  text-shadow: -2px -1px 0 #992929, 2px -1px 0 #992929, -2px 1px 0 #992929, 2px 1px 0 #992929, 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd, 3px 4px 2px #378ab4, 4px 3px 3px #5dabcd, 4px 5px 3px #378ab4;
}

@media only screen and (min-width: 320px) and (max-width: 360px) {
  .title {
    font-size: 5em;
    text-shadow: -1px -1px 0 #992929, 1px -1px 0 #992929, -1px 1px 0 #992929, 1px 1px 0 #992929, 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd;
  }
}
@media only screen and (min-width: 360px) and (max-width: 600px) {
  .title {
    font-size: 5.5em;
    text-shadow: -2px -1px 0 #992929, 2px -1px 0 #992929, -2px 1px 0 #992929, 2px 1px 0 #992929, 0 1px 0px #378ab4, 1px 0 0px #5dabcd, 1px 2px 1px #378ab4, 2px 1px 1px #5dabcd, 2px 3px 2px #378ab4, 3px 2px 2px #5dabcd;
  }
}
@media only screen and (max-width: 768px) {
  .container {
    width: 100%;
  }

  .btn {
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 768px) {
  .pad-left {
    padding-left: 5px;
  }

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


#article {
  padding: 10% 10% 1%;
}