/* Set border-box sizing, makes things easier to size */
* {
 box-sizing: border-box;
}
/* Set background color on the 'body' of our html file */
body {
  background: #af2b14;
}
/* define float animation */
@keyframes float {
	0% {
		box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
		transform: translatey(0px);
	}
	50% {
		box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
		transform: translatey(-20px);
	}
	100% {
		box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
		transform: translatey(0px);
	}
}
/* Set 'relative' positioning on the container element holding our image, make the container as tall as 100% of the screen and center any text content */
#container {
  position: relative;
  text-align: center;
  height: 100vh;
}
/* This block uses absolute positioning to center your image both vertically and horizontally in the screen; also sizes your mark, also some background stuff for animation and gradient */
#wrapper {
  height: 420px;
  width: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -222px;
  margin-top: -210px;
  padding: 30px;
  overflow: visible;
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
  transform: translatey(0px);
  animation: float 4s ease-in-out infinite;
  border: 1px #4a1006 solid;
  border-radius: 50%;
  background: rgb(26, 188, 156);
  background: -moz-linear-gradient(
    -45deg,
    rgba(103, 24, 10, 1) 0%,
    rgba(76, 18, 7, 1) 100%
  );
  background: -webkit-linear-gradient(
    -45deg,
    rgba(103, 24, 10, 1) 0%,
    rgba(76, 18, 7, 1) 100%
  );
  background: linear-gradient(
    135deg,
    rgba(103, 23, 10, 1) 0%,
    rgba(76, 18, 7, 1) 100%
  );
}
#mark {
  position: relative;
  height: 100%;
  width: auto;
}