body{margin: 100px;
  padding: 10px;
    font-family: 'Inconsolata', monospace;
   font-size: 20px;
   accent-color: red;
}
.btn-3d {
    padding: .6rem 1rem;
    border: 1px solid #995309;
    border-radius: 4px;
    background-color: #d9750b;
    color: #fff;
  
    font-size: 1.5rem;
    text-shadow: 0 -1px 0 rgba(0,0,0,.5);
    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
      0 1px 3px rgba(0,0,0,.2);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#f90),to(#e76a00));
    background-image: linear-gradient(#f90 10%,#e76a00 100%);
  }
  
  .btn-3d:hover, .btn-3d:focus {
    background-color: #e0811b;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#f0a100),to(#f70));
    background-image: linear-gradient(#f0a100 10%,#f70 100%);
  }
  
  .btn-3d:active {
    background-color: #cf6a00;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(10%,#f0a100),to(#f70));
    background-image: linear-gradient(#f0a100 10%,#f70 100%);
  }
  .Contenedor{
    padding: 50px;
    margin: 20px;
    background-image: url(a8.jpg);
    border: #131212 solid 1px;
    
  
  }
  h1{font-family: 'ToscuchetCMRegular'}
.respuesta{
  padding: 5px;
  margin-bottom: 50px;
background-color: aliceblue;
    border: #131212 solid 1px;
    
}
@media (max-width:800px){
  .Contenedor{background-color: #fff;
    margin: auto;
    padding: auto;
    
  background-image: url(a8.jpg);
border: none;}
body{
  font-size: 17px;
  margin: auto;
  padding: auto;
}
}
small {
  font-size: 11px;
  color: #555;
  margin-left: 1rem;
}

section {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

input,
label {
  cursor: pointer;
}

label,
small {
  margin-top: 0.1em;
}

input[type="radio"] {
  height: 1.2rem;
  width: 1.2rem;
  margin-right: 0.5rem;
}

#accent {
  accent-color: orange;
}

.custom-radio {
  /* hiding browser el */
  appearance: none;
  /* Safari support */
  -webkit-appearance: none;
  border: 0.2rem solid #fff;
  background-color: var(--bg-color);
  border-radius: 50%;
}

/* keyboard navigation focus appearance */
.custom-radio:focus-visible {
  outline-offset: 0;
}

#box-shadow {
  box-shadow: 0 0 0 1px var(--color);
}

#box-shadow:hover {
  border-width: 0;
}

#box-shadow:checked {
  box-shadow: 0 0 0 1px var(--checked-color);
  background-color: var(--checked-color);
  border-width: 0.2rem;
}

#outline {
  outline: 1px solid var(--color);
}

#outline:hover {
  outline-color: var(--checked-color);
}

#outline:checked {
  outline-color: var(--checked-color);
  background-color: var(--checked-color);

  animation: outline-checked;
  animation-duration: 0.1s;
  animation-iteration-count: 4;
  animation-direction: alternate;
  animation-timing-function: linear;
}

@keyframes outline-checked {
  0% {
      outline-offset: 0;
  }

  100% {
      outline-offset: -0.2rem;
  }
}
