html {
  background-color: #bbb; }

/* Variables */
/* Extenders */
.center {
  box-sizing: border-box;
/*  position:sticky;
  top: 50%;
  left: 50%; */
  border-radius: 100%; }

.center1, .bezel {
  box-sizing: border-box;
/*  position: fixed;
  top: 29%;
  left: 45%; */
  border-radius: 100%; }

.center_2 {
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 100%; }

.center1_2, .bezel_2 {
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 85%;
  border-radius: 100%; }

.rivet1, .rivet2, .rivet3, .rivet4, .rivet5, .rivet6, .rivet7, .rivet8 {
  position: relative;
  height: 2px;
  width: 2px;
  background-color: #555;
  border-radius: 100%;
  box-shadow: inset 0 0 2px #000, 0 0 1px #000; 
}

/* Keyframes */
@-webkit-keyframes vibrate {
  0% {
    -webkit-filter: blur(2px);
    height: 20px;
    width: 20px;
    /*margin-left: -13px;
    margin-top: -13px; */}
  30% {
    -webkit-filter: blur(0);
    height: 15px;
    width: 15px; }
  50% {
    -webkit-filter: blur(2px);
    height: 20px;
    width: 20px;
    /*margin-left: -13px;
    margin-top: -13px;*/ }
  65% {
    -webkit-filter: blur(0);
    height: 15px;
    width: 15px; }
  70% {
    -webkit-filter: blur(2px);
    height: 20px;
    width: 20px;
   /* margin-left: -13px;
    margin-top: -13px;*/ }
  80% {
    -webkit-filter: blur(2px);
    height: 15px;
    width: 15px; }
  100% {
    -webkit-filter: blur(2px);
    height: 20px;
    width: 20px;
    /*margin-left: -13px;
    margin-top: -13px;*/ } }
@-webkit-keyframes vibrate1 {
  0% {
    -webkit-filter: blur(1px);
    border: 7px solid #333; }
  30% {
    -webkit-filter: blur(0);
    border: 9px solid #333; }
  50% {
    -webkit-filter: blur(1px);
    border: 7px solid #333; }
  65% {
    -webkit-filter: blur(0);
    border: 9px solid #333; }
  70% {
    -webkit-filter: blur(1px);
    border: 7px solid #333; }
  80% {
    -webkit-filter: blur(1px);
    border: 9px solid #333; }
  100% {
    -webkit-filter: blur(1px);
    border: 7px solid #333; } }

.center {
  height: 15px;
  width: 15px;
  margin-top: -8px;
  margin-left: -8px;    
/*  margin-left: -50px;
  margin-top: -50px; */
  background-color: #111;
  -webkit-filter: blur(1px);
  background: -webkit-radial-gradient(60% 60%, ellipse cover, #505050 0%, rgba(20, 20, 20, 0.8) 50%, rgba(20, 20, 20, 0.8) 100%);
  box-shadow: 0 0 10px darkgrey;
  -webkit-animation: vibrate 0.25s linear infinite; 
}

.center_2 {
  height: 18px;
  width: 18px;
  margin-left: -50px;
  margin-top: -50px;
  background-color: #111;
  -webkit-filter: blur(1px);
  background: -webkit-radial-gradient(60% 60%, ellipse cover, #505050 0%, rgba(20, 20, 20, 0.8) 50%, rgba(20, 20, 20, 0.8) 100%);
  box-shadow: 0 0 10px black;
  -webkit-animation: vibrate 0.25s linear infinite; 
}

.center1 {
  height: 20px;
  width: 20px;
  margin-top: -8px;
  margin-left: 7px;
/*  margin-left: -132px;
  margin-top: -133px; */
  border: 6px solid #333;
  box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5);
  background: -webkit-linear-gradient(130deg, #757575 55%, gainsboro 100%);
  -webkit-animation: vibrate1 0.25s linear infinite; 
}

.center1_2 {
  height: 30px;
  width: 30px;
  margin-left: -132px;
  margin-top: -133px;
  border: 15px solid #333;
  box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5);
  background: -webkit-linear-gradient(130deg, #757575 55%, gainsboro 100%);
  -webkit-animation: vibrate1 0.25s linear infinite; 
}

.bezel {
/*  margin-left: -142.5px;
  margin-top: -142.5px; */
  height: 30px;
  width: 30px;
  background-color: #A8A8A8;
  box-shadow: -15px -10px 60px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0px 0px 2px rgba(0, 0, 0, 0.8), inset 0px 0px 30px -5px rgba(0, 0, 0, 0.8); 
}

.bezel_2 {
  margin-left: -142.5px;
  margin-top: -142.5px;
  height: 30px;
  width:  30px;
  background-color: #A8A8A8;
  box-shadow: -15px -10px 60px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0px 0px 2px rgba(0, 0, 0, 0.8), inset 0px 0px 30px -5px rgba(0, 0, 0, 0.8); 
}

.rivet1 {
  top: 4px;
  left: 50%; }

.rivet2 {
  bottom: -25px;
  left: 50%; }

.rivet3 {
  top: 40%;
  left: 27px; }

.rivet4 {
  top: 32%;
  right: -4px; }

.rivet5 {
  top: 0%;
  left: 80.7%; }

.rivet6 {
  top: 48%;
  right: -23.5%; }

.rivet7 {
  bottom: 18%;
  left: 25.5%; }

.rivet8 {
  bottom: -29%;
  right: -80.5%; }

/*html {
  background-color: #bbb; }

Variables 
Extenders 
.center {
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 100%; }

.center1, .bezel {
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 15%;
  border-radius: 100%; }

.center_2 {
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 100%; }

.center1_2, .bezel_2 {
  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 85%;
  border-radius: 100%; }

.rivet1, .rivet2, .rivet3, .rivet4, .rivet5, .rivet6, .rivet7, .rivet8 {
  position: absolute;
  height: 8px;
  width: 8px;
  background-color: #555;
  border-radius: 100%;
  box-shadow: inset 0 0 3px #000, 0 0 2px #000; 
}

 Keyframes
@-webkit-keyframes vibrate {
  0% {
    -webkit-filter: blur(2px);
    height: 106px;
    width: 106px;
    margin-left: -53px;
    margin-top: -53px; }
  30% {
    -webkit-filter: blur(0);
    height: 100px;
    width: 100px; }
  50% {
    -webkit-filter: blur(2px);
    height: 106px;
    width: 106px;
    margin-left: -53px;
    margin-top: -53px; }
  65% {
    -webkit-filter: blur(0);
    height: 100px;
    width: 100px; }
  70% {
    -webkit-filter: blur(2px);
    height: 106px;
    width: 106px;
    margin-left: -53px;
    margin-top: -53px; }
  80% {
    -webkit-filter: blur(2px);
    height: 100px;
    width: 100px; }
  100% {
    -webkit-filter: blur(2px);
    height: 106px;
    width: 106px;
    margin-left: -53px;
    margin-top: -53px; } }
@-webkit-keyframes vibrate1 {
  0% {
    -webkit-filter: blur(1px);
    border: 15px solid #333; }
  30% {
    -webkit-filter: blur(0);
    border: 17px solid #333; }
  50% {
    -webkit-filter: blur(1px);
    border: 15px solid #333; }
  65% {
    -webkit-filter: blur(0);
    border: 17px solid #333; }
  70% {
    -webkit-filter: blur(1px);
    border: 15px solid #333; }
  80% {
    -webkit-filter: blur(1px);
    border: 17px solid #333; }
  100% {
    -webkit-filter: blur(1px);
    border: 15px solid #333; } }
.center {
  height: 100px;
  width: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background-color: #111;
  -webkit-filter: blur(1px);
  background: -webkit-radial-gradient(60% 60%, ellipse cover, #505050 0%, rgba(20, 20, 20, 0.8) 50%, rgba(20, 20, 20, 0.8) 100%);
  box-shadow: 0 0 10px black;
  -webkit-animation: vibrate 0.25s linear infinite; 
}

.center_2 {
  height: 100px;
  width: 100px;
  margin-left: -50px;
  margin-top: -50px;
  background-color: #111;
  -webkit-filter: blur(1px);
  background: -webkit-radial-gradient(60% 60%, ellipse cover, #505050 0%, rgba(20, 20, 20, 0.8) 50%, rgba(20, 20, 20, 0.8) 100%);
  box-shadow: 0 0 10px black;
  -webkit-animation: vibrate 0.25s linear infinite; 
}

.center1 {
  height: 250px;
  width: 250px;
  margin-left: -125px;
  margin-top: -125px;
  border: 15px solid #333;
  box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5);
  background: -webkit-linear-gradient(130deg, #757575 55%, gainsboro 100%);
  -webkit-animation: vibrate1 0.25s linear infinite; 
}

.center1_2 {
  height: 250px;
  width: 250px;
  margin-left: -125px;
  margin-top: -125px;
  border: 15px solid #333;
  box-shadow: -3px -3px 15px rgba(0, 0, 0, 0.4), inset -3px -3px 15px rgba(0, 0, 0, 0.5);
  background: -webkit-linear-gradient(130deg, #757575 55%, gainsboro 100%);
  -webkit-animation: vibrate1 0.25s linear infinite; 
}

.bezel {
  margin-left: -142.5px;
  margin-top: -142.5px;
  height: 285px;
  width: 285px;
  background-color: #A8A8A8;
  box-shadow: -15px -10px 60px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0px 0px 2px rgba(0, 0, 0, 0.8), inset 0px 0px 30px -5px rgba(0, 0, 0, 0.8); 
}

.bezel_2 {
  margin-left: -142.5px;
  margin-top: -142.5px;
  height: 285px;
  width: 285px;
  background-color: #A8A8A8;
  box-shadow: -15px -10px 60px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0px 0px 2px rgba(0, 0, 0, 0.8), inset 0px 0px 30px -5px rgba(0, 0, 0, 0.8); 
}

.rivet1 {
  top: 6px;
  left: 50%; }

.rivet2 {
  bottom: 6px;
  left: 50%; }

.rivet3 {
  top: 50%;
  left: 6px; }

.rivet4 {
  top: 50%;
  right: 6px; }

.rivet5 {
  top: 18%;
  left: 13.7%; }

.rivet6 {
  top: 18%;
  right: 13.5%; }

.rivet7 {
  bottom: 17%;
  left: 13.5%; }

.rivet8 {
  bottom: 17%;
  right: 13.5%; }
*/