body {
      font-family: brush script, Cursive;
      display: grid;
      justify-content: center;
      width: 100vw;
    }
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
}

.content {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 132, 71, 0);
  color: #f1f1f1;
  width: 100%;
  padding: 10px;
}
.content-mid {
  position: fixed;
 top: 100px;
  left: 0;
  background: rgba(0, 0, 0, 0);
  color: #f1f1f1;
  width: 100%;
  padding: 30px;
}
.content-bot {
  position: fixed;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0);
  color: #f1f1f1;
  width: 100%;
  padding: 10px;
}
    .main {
      width: 400px;
      height: 400px;
      display: grid;
      justify-content: center;
      align-content: center;
    }

    .main > * {
      grid-column: 1;
      grid-row: 1;
    }

    .theSmiley {
      width: 250px;
      height: 250px;
    }

    .item {
      animation: spinAround 48s linear infinite;
    }

    .main > * > img {
      animation: rotate 60s linear infinite;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes spinAround {
      from {
        transform: rotate(0deg) translate(250px) scale(.7);
      }
      to {
        transform: rotate(360deg) translate(250px) scale(.7);
      }
    }
.verhor {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}