/* Fonts */
@font-face {
  font-family: 'Harry Potter';
  src: url('https://cdn2.hubspot.net/hubfs/678613/Projects/Harry%20Potter%20Battle%20Game/ParryHotter.ttf') format('truetype')
}
@import url('https://fonts.googleapis.com/css?family=EB+Garamond:400,700&display=swap');







body {
  background: #000;
  text-align: center;
  font-family: cursive;
  color: #fff;
  font-size: 25px;
}
h1{
  font-size: 50px;
  font-family: "Harry Potter";
}

h2{
  font-size: 25px;
  font-family: "Harry Potter";
}


#cloak {
  width:180px;
  height:180px;
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,#fff 50% calc(50% + 5px),
      transparent calc(50% + 11px)) right/50% 100%,
    /* right side */
    linear-gradient(to bottom right,
      transparent 49.5%,#fff 50% calc(50% + 5px),
      transparent calc(50% + 11px)) left/50% 100%,
    /* bottom side*/
    linear-gradient(#fff,#fff) bottom/calc(100% - 20px) 5px;
  background-repeat:no-repeat;

  display: inline-block;
    position: relative;
    top: 50px;
   left: 75px;



 -webkit-animation: rotateY 1s infinite linear;
  animation: rotateY 25s infinite linear;


}

#wand {
  width: 5px;
  height: 168px;
  background: #fff;
  position: relative;
  top: 50px;
  left: -136px;
  display: inline-block;
   -webkit-animation: shine 1s ease-in-out infinite alternate;
  -moz-animation: shine 1s ease-in-out infinite alternate;
  animation: shine 1s ease-in-out infinite alternate;

}

#stone {
  width: 96px;
  height: 96px;
  border: 5px solid #fff;
  border-radius: 50%;
  position: relative;
  top: 50px;
  left: -74px;
  display: inline-block;
 -webkit-animation: rotateY 1s infinite linear;
  animation: rotateY 2s infinite linear;

}

@-webkit-keyframes rotateY {
  to { -webkit-transform: rotateY(360deg); }
}
@keyframes rotateY {
  to { transform: rotateY(360deg); }
}


.glow {

  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow:  0 0 20px #fff, 0 0 30px #ffffcc, 0 0 40px #ffffcc;
  }

  to {
    text-shadow:  0 0 30px #ffffb3, 0 0 40px #ffffb3, 0 0 50px #ffffb3;
  }
}

@-webkit-keyframes shine{
  from {
    box-shadow:  0 0 10px #fff, 0 0 20px #ffffcc, 0 0 30px #ffffcc;
  }

  to {
    box-shadow:  0 0 0px #ffffb3, 0 0 30px #ffffb3, 0 0 40px #ffffb3;
  }