body {background:#fafafa; font-family: "Manrope", sans-serif;padding-bottom:60px;}
nav.navbar {background:#f1f1f1!important;}
.nav-link {color:#ccc;font-weight: bold;margin:0px 10px 0px 10px;}
.container {max-width:920px;}

#boton-finalizar {position:fixed;top:20px;left:20px;width:80px;height:80px;text-align:center;background:#666;color:#fff;border-radius:40px;padding-top:5px;}

h1, h2, h3, h4, h5 {font-family: "Geist", sans-serif;font-weight:bold;}

#registro-seguir-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width:60%;
    padding: 2rem 3rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    z-index: 10;
    text-align: center;
}
.lectura-registrar {text-align:center;width:100%;}
.lectura-registrar h1 {margin-bottom:60px;}

.circulo {width:120px;height:120px;text-align:center;border-radius:50px;padding-top:20px;margin:0 auto;margin-bottom:15px;border:4px solid #333;font-weight:bold;cursor:pointer;}
.estado-1 .circulo {background:red;}
.estado-2 .circulo {background:#66d3a2;}
.estado-3 .circulo {background:#fecc58;}
.estado-4 .circulo {background:#94cce5;}

.cards-resultados .card {margin-bottom:10px;}
.cards-resultados .card .card-body {text-align:center;} 

#lectura-registrar-pregunta2 row, #lectura-registrar-pregunta2 col {text-align:center;}

.ball {
    position: absolute;
    border-radius: 50%;
}

svg { width:100%; height:inherit; display:block; }
    .label {
      font-weight:600;
      text-anchor: middle;
      dominant-baseline: middle;
      pointer-events: none;
      fill:#2a2a2a;
    }
    .bubble { opacity:.95; }
    .emoji { fill:none; stroke:#111; stroke-width:3; }
    .face { font-size:28px; dominant-baseline: middle; text-anchor: middle; }
    .hint {
      position: fixed; inset:auto 12px 12px auto; background:rgba(255,255,255,.85);
      border:1px solid #e5e7eb; padding:6px 10px; border-radius:10px; font-size:12px;
    }

@media (max-width: 768px) {
  #registro-seguir-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      width:80%;
      padding: 2rem 3rem;
      border-radius: 0.5rem;
      box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
      z-index: 10;
      text-align: center;
  }
}