/* ========================================
   Custom sytles for Random Quote Machine
   Michael Atkinson
   ======================================== */

/**************************
    BACKGROUND AND COLORS
**************************/

html {
    height: 100%;
}

body {

  /* IE10+ */
  background-image: -ms-linear-gradient(top, #36D6A1 0%, #3366FF 100%);

  /* Mozilla Firefox */
  background-image: -moz-linear-gradient(top, #36D6A1 0%, #3366FF 100%);

  /* Opera */
  background-image: -o-linear-gradient(top, #36D6A1 0%, #3366FF 100%);

  /* Webkit (Safari/Chrome 10) */
  /*background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #36D6A1), color-stop(100, #3366FF));

  /* Webkit (Chrome 11+) */
  background-image: -webkit-linear-gradient(top, #36D6A1 0%, #3366FF 100%);

  /* W3C Markup */
  background-image: linear-gradient(to bottom, #36D6A1 0%, #3366FF 100%);

  color: white;
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;

}

#quoteBox {
  height: 350px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  overflow: scroll;
}

#quote {
  font-size: 30px;
  font-weight: 150;

}

#quotee {
  font-size: 25px;
  font-weight: 200;
}

#quoteeBox {
  bottom: 36%;
  left: 0;
  right: 0;
  text-align: center;
}


/**************************
    MAIN BUTTONS
**************************/

.buttonBox {
  width: 100%;
  margin: 0 auto;
  position: fixed;
  bottom: 100px;
  height: 20%;
  box-sizing: border-box;
  text-align: center;
}

.buttonBox a, .buttonBox button {
  margin: 1em auto;
  width: 80%;
  max-width: 600px;
  display: block;
  height: 40%;
  box-sizing: inherit;
  font-size: large;
  text-align: center;
  justify-content: center;
  align-items: center;
}

/* Fix for Safari button text alignment */
.buttonBox a {
  display: flex;
}


.buttonBox span {
  padding: 0 0 0 15px;
}

.outline {
  background: none;
  color: white;
  border-color: white;
}

/* Override bootstrap */
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  color: white;
  background-color: transparent;
  border-color: white;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: transparent;
  border-color: #ccc;
}
/* end bootstrap override */

.not-active {
/* copy of bootstrap button:disabled */
pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: .65;
}


/**************************
    FOOTER
**************************/

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 20px;
    text-align: center;
}
footer p {
    display: inline-block;
}
footer button {
    margin-left: 20px;
}

footer a, footer a:visited{
  color: silver;
}

/* Last anchor */
footer .hiddenAnchor {
    margin-left: 20px;
}
/* End footer */

/**************************
    SPINNER
**************************/
#spinner {
  padding: 0;
}

.glyphicon-spin {
    -webkit-animation: spin 1000ms infinite linear;
    animation: spin 1000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
/* End spinner */


/**************************
    MEDIA QUERYS
**************************/

@media (min-width: 576px) {
  /* custom quote box for large screen */
  #quoteBox {
    overflow: visible;
    text-align: center;
    border: 2px solid white;
    margin-top: 100px;
    border-radius: 25px;
    padding: 50px;
  }
}