@charset "utf-8";

/* CSS Document */
#PlayPause {
  position: relative;
  width: 50px; 
  height: 50px; 
  top: 4px;
  left: 4px;
  padding:0;
 /* border:1px solid red;*/
}
.play {
  background-image:url(../graphics/play-3.png);
  background-repeat: no-repeat!important;
  background-position: center;
  background-size: 50px;
  z-index: 100;
}
.pause {
  background-image:url(../graphics/pause-3.png)!important;
  background-repeat: no-repeat!important;
  background-position: center;
  background-size: 50px;
  z-index: 100;
}
.circle1 {
  position: fixed;
  width: 60px;
  height: 60px;
  left: 10px;
  top: 10px;
  background: #009900; /*#4bc475;*/
  border: 1px solid #000;
  border-radius: 50%;
  box-shadow:
  inset 2px 2px 3px rgba(255, 255, 255, 0.6),
  inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  transition: 0.5s;
  /*border:1px solid red;*/
  z-index:100;
}
.circle1:hover { background-color: #00CC00; transition: 0.5s; }

/* flex or display :grid */
.center-h { display: flex; justify-content: center;}
.center-v { display: flex; align-items: center;}
.buttonPod {
  margin: 4px auto;
  padding: 10px 20px;
  text-decoration: none;
  color: #ffffff;
  box-shadow:
  inset 2px 2px 3px rgba(255, 255, 255, 0.6),
  inset -2px -2px 3px rgba(0, 0, 0, 0.6);
  background-color: #009900;
  border: none;
  border-radius: 16px;
  outline: none;
  transition: 0.5s;
}
.buttonPod:hover { background-color: #00CC00; transition: 0.5s; }