:root{
  --primary: #578FCA;
  --secondary: #3674B5;
  --a-color:#A1E3F9;
  --b-color: #858e95;
  --c-color:#e8f9ff;


}
.header-threesixty{
  background-color: var(--secondary);
}
.gracias-container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.gracias{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  width: 20rem;
}

@import url("https://fonts.googleapis.com/css?family=Roboto+Condensed");
.home-wrapper {
  background: linear-gradient(to bottom right, var(--c-color), var(--a-color));
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -10; }
  input[type="checkbox"] {
    accent-color: var(--secondary); /* Cambia el color del check */
}
/*bg de los cuadros*/
.card-threesixty{
  background-color: rgb(245, 250, 255);
  border-radius:10px 50px 10px 50px;
  
 
}
.btn-color{
  background-color: var(--secondary);
  color:white;
  margin-bottom: 20px;
}
.btn-color:hover{
  background-color: var(--primary) !important;
  color:white !important
}
::selection {
    background-color: var(--primary);
    color: #ffffff;
}

::-moz-selection { /* Para Firefox */
    background-color:  var(--primary);
    color: #ffffff;
}
.brand-logo {
  font-family: 'Roboto Condensed', sans-serif; }

.question-wrapper {
  touch-action: None;
  position: fixed;
  top: 64px;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0;
  margin: 0;
  width: 100%; }
  .question-wrapper .question {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; }
  .question-wrapper .question h1 {
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    padding: 4rem 0; }
  .question-wrapper .yes, .question-wrapper .no {
    height: 0;
    width: 100%; }
  .question-wrapper .yes, .question-wrapper .no, .question-wrapper .skip, .question-wrapper .undo {
    position: absolute;
    overflow: hidden;
    color: white;
    margin: 0;
    line-height: 1.5em;
    text-align: center;
    z-index: 100; }
  .question-wrapper .yes, .question-wrapper .no, .question-wrapper .skip, .question-wrapper .undo {
    text-transform: uppercase; }
    .question-wrapper .yes:after, .question-wrapper .no:after, .question-wrapper .skip:after, .question-wrapper .undo:after {
      content: '!'; }
  .question-wrapper .yes {
    background: yellowgreen;
    background: linear-gradient(to bottom right, yellowgreen, yellow);
    bottom: 0; }
  .question-wrapper .no {
    background-color: orangered;
    background: linear-gradient(to bottom right, orangered, orange);
    top: 0; }
  .question-wrapper .skip {
    height: 100%;
    width: 0;
    background-color: lightgray;
    background: linear-gradient(to bottom right, lightgray, gray);
    left: 100%;
    top: 0; }
  .question-wrapper .undo {
    height: 100%;
    width: 0;
    background-color: lightseagreen;
    background: linear-gradient(to bottom right, lightseagreen, lightgray);
    top: 0; }

@media screen and (max-width: 600px) {
  .question-wrapper {
    top: 56px; } }

.key {
  margin: 15px;
  vertical-align: bottom; }

.key.up {
  color: green; }

.key.down {
  color: orangered; }

.key.left {
  color: lightseagreen; }

.key:before {
  color: #999;
  margin-right: 10px;
  display: inline-block;
  width: 30px;
  height: 30px;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.2);
  background-color: white; }

.key.left:before {
  content: '\2190'; }

.key.up:before {
  content: '\2191'; }

.key.down:before {
  content: '\2193'; }

.key.right:before {
  content: '\2192'; }

.help {
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
  color: #999; }

@media screen and (max-width: 600px) {
  .key {
    display: none; }
  .desktop {
    display: none; } }

@media screen and (min-width: 600px) {
  .mobile {
    display: none; } }