*{
 margin: 0;
 padding: 0;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}

body{
 background: #282727;
 background-size: cover;
 color: black;

}

.wrap{
 width: 60%;
 max-width: 1000px;
 /*margin:auto;*/
}

.widget{
 width: 80%;
 margin: 0em;
 /*margin:32px;*/
}

.widget p {
 display: inline-block;
 line-height: .4em;
}
.wid{
 width: 62%;
 margin: 0em;
 /*margin:32px;*/
}

.wid p {
 display: inline-block;
 line-height: .4em;
}

.fecha {
 font-family: serif;
 text-align: center;
 font-size: 1em;
 margin-bottom: .4px;
 background: #0a1503d1;
 padding: .1px;
 width: 160%;
 border-radius: 10px;
 margin-top: 0;
 color: white;
}


.reloj{
 font-family: serif;
 width: 160%;
 padding: .1px;
 font-size: 1em;
 text-align: center;
 background: #0a1503d1;
 border-radius: 10px;
  margin-bottom: 0;
   color: white;
}

.muestra {
 font-family: Monospace;
 text-align: center;
 font-size: 1.2em;
 margin-bottom: .2px;
 background: #6BB1FC;
 padding: .1px;
 width: 160%;
 border-radius: 10px;
 margin-top: .2px;
 color: white;
}

.reloj .caja-segundos{
 display: inline-block;
}

.reloj .segundos, .reloj .ampm{
 font-size: 14px;


}

.zona {
   fill: rgba(255, 0, 0, 0.3);
   stroke: red;
   stroke-width: 0.5;
   cursor: pointer;
   transition: fill 0.3s;
 }

 .zona:hover {
   fill: rgba(255, 0, 0, 0.6);
 }

 .svg-container {
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
   font-family: serif;
 }
 
 svg {
   width: 100%;
   height: auto;
   display: block;
   margin: auto;
 }

.pectorales path {
   fill: #8B0000;
   transition: fill 0.2s;
}

.pectorales:hover path {
   fill: #FF0000;
}

.hombros path {
   fill: #8B0000;
   transition: fill 0.2s;
}

.hombros:hover path {
   fill: #FF0000;
}

.triceps path {
   fill: #8B0000;
   transition: fill 0.2s;
}

.triceps:hover path {
   fill: #FF0000;
}

.biceps path {
   fill: #8B0000;
   transition: fill 0.2s;
}

.biceps:hover path {
   fill: #FF0000;
}

.abdomen path {
   fill: #8B0000;
   transition: fill 0.2s;
}

.abdomen:hover path {
   fill: #FF0000;
}

.antebrazo path {
   fill: #8B0000;
   transition: fill 0.2s;
}

.antebrazo:hover path {
   fill: #FF0000;
}

.muslo path {
   fill: #8B0000;
   transition: fill 0.2s;
}

.muslo:hover path {
   fill: #FF0000;
}

.espalda path {
   fill: #8B0000;
   transition: fill 0.2s;
}

.espalda:hover path {
   fill: #FF0000;
}

.pierna path {
   fill: #8B0000;
   transition: fill 0.2s;
}

.pierna:hover path {
   fill: #FF0000;
}

.gluteo path {
   fill: #8B0000;
   transition: fill 0.2s;
}

.gluteo:hover path {
   fill: #FF0000;
}

.main-content {
      flex-grow: 1;
      padding: 1rem;
      overflow-y: auto;
    }
.video-card {
      margin-bottom: 1.5rem;
    }