hbd.css

body {
  background: black;
  text-align: center;
  font-family: "Times New Roman", Times, serif !important;
}

img {
  display: block;
  margin: 0 auto;
}


.container {
  padding-left: 0px;
  padding-right: 0px;
}

#million {
  height: 100px;
}

#john-pic {
  height: 450px;
  padding: 30px 0;
}

#birthday-text {
  font-size: 50px;
  color: red;
}

/*#hot-single {
  float: left;
  color: blue;
  position: absolute;
}*/

#hot-single img {
  width: 160px;
}

a {
  color: red;
}

#hate {
  right: 20px;
  position: absolute;
  width: 300px;
  color: white;
}

#hate img {
  height: 200px;
}

#hate p {
  margin: 0;
  padding: 0;
}

#hate h2 {
  display: block;
}

#drinking {
  float: left;
}

#dino {
  float: right;
}

.red {
  border-bottom: 1px solid red;
  color: red;
}

.clear {
  clear: both;
  padding-top: 10px;
}

.blink {
  animation: blink 0.8s steps(5, start) infinite;
  -webkit-animation: blink 1s steps(5, start) infinite;
}

.text-white {
  color: white;
}

.spin img {
  /*border-radius: 50%;*/
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
.spin img:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

.row {
  justify-content: center;
  align-items: center;
}

.slidecaption {

    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 2s;
    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 2s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transform-origin: center center;  /* Chrome, Safari */
}

  /* WebKit and Opera browsers */ @-webkit-keyframes spinner {
    from
    {
        -webkit-transform: rotateY(0deg);
    }
    to {
        -webkit-transform: rotateY(-360deg);
    }
} /* all other browsers */
@keyframes spinner {
    from {
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }
    to
    {
        -moz-transform: rotateY(-360deg);
        -ms-transform: rotateY(-360deg);
        transform: rotateY(-360deg);

    }
}

video {
  /*border-radius: 50%;*/
  -webkit-transition: -webkit-transform .8s ease-in-out;
          transition:         transform .8s ease-in-out;
}
video:hover {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}

video {
  height: 200px;
  width: 200px;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink {
  to {
    visibility: hidden;
  }
}