@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700&family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,600;1,700;1,900&family=Source+Sans+Pro:ital,wght@0,200;0,400;0,700;1,200;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text&display=swap');

@font-face {
    font-family: 'Publico Headline', 'DM Serif Text';
    src: url("../fonts/PublicoHeadline-Bold.otf") format("opentype");
    font-weight: 700;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Public Sans';
  -webkit-font-smoothing: antialiased;

  /* Media Queries */
  --sm: 540px;
  --md: 720px;
  --lg: 960px;
  --xl: 1140px;
  --xxl: 1320px;


  /* Paddings */
  --padding-1: 0.25rem;
  --padding-2: 0.5rem;
  --padding-3: 0.75rem;
  --padding-4: 1rem;
  --padding-5: 1.25rem;
  --padding-6: 1.5rem;
  --padding-7: 1.75rem;
  --padding-8: 2rem;

  /* Margins */
  --margin-1: 0.25rem;
  --margin-2: 0.5rem;
  --margin-3: 0.75rem;
  --margin-4: 1rem;
  --margin-5: 1.25rem;
  --margin-6: 1.5rem;
  --margin-7: 1.75rem;
  --margin-8: 2rem;

  /* Colors */
  --primary-blue: #00008F;
  --primary-red: #FF1721;
  --igloo: #B5D0EE;
  --cotton-candy: #FAD6DE; 
  --azalea: #F1AFC6;
  --aqua-green: #9FD9B4;
  --greyjoy: #9FBEAF;
  --viridian-green: #668980;
  --pacific: #00ADC6;
  --teal: #027180;
  --acid: #F0FF93;
  --dune: #FCD385;
  --apache: #DDBE65;
  --tosca: #914146;
  --logan: #9190AC;
  --mine-shaft: #333333;
  --scorpion: #5F5F5F;
  --gray: #7F7F7F;
  --dusty-gray: #999999;
  --silver: #CCCCCC;
  --mercury:#E5E5E5;
  --wild-sand: #F5F5F5;
  --fondo-azul-claro: #E6EFF9;
}
:target {
  scroll-margin-top: 5rem;
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: white;
  color: #252525;
  justify-content: center;
  overflow-x: hidden;
}
a, button {
  cursor: pointer;
}
h1 {
  color: var(--primary-blue);
  font-family: serif;
  text-align: center;
  margin-bottom: 2rem;
}
#jugar,
#insignias,
#sabias-que {
  scroll-margin: 150px 0 0 0;
  /* Just in case scroll-snap-margin is needed, see https://caniuse.com/#search=scroll-margin */
  scroll-snap-margin: 150px 0 0 0;
}
.wrapper {
  border: 1px solid white;
  max-width: 900px;
  margin: 0 auto;
}
@media (min-width: 576px) {
  .wrapper {
    max-width: var(--sm);
  }
}

@media (min-width: 768px) {
  .wrapper {
    max-width: var(--md);
    margin: 2rem auto;
  }
}

@media (min-width: 992px) {
  .wrapper {
    max-width: var(--lg);
    padding: 2rem 6rem;
  }
  .wrapper:not(.hero) {
    margin: 3rem auto;
  }
}

@media (min-width: 1200px) {
  .wrapper {
    max-width: var(--xl);
    /* padding: var(--px-3) var(--px-5);  */
  }
  .wrapper:not(.hero) {
    margin: 3rem auto;
  }
}

@media (min-width: 1440px) {
  .wrapper {
    max-width: var(--xxl);
  }
}


.boom {
  position: absolute;
  width: 100%;
  height: 100%;
}

.results {
  display: none;
}