@font-face {
   font-family: 'Marykate';
   src: url('./../fonts/MarykateRegular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'DK Coal Brush';
   src: url('./../fonts/DKCoalBrush-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'Myriad Pro';
   src: url('./../fonts/MyriadPro-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'PF BeauSans Pro';
   src: url('./../fonts/PFBeauSansPro-Regular.woff2') format('woff2');
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'PF BeauSans Pro';
   src: url('./../fonts/PFBeauSansPro-SemiBold.woff2') format('woff2');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'PF BeauSans Pro';
   src: url('./../fonts/PFBeauSansPro-Light.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: 'PF BeauSans Pro';
   src: url('./../fonts/PFBeauSansPro-Bold.woff2') format('woff2');
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

:root {
   --primary: #4ead33;
   --primary-7: rgba(78, 173, 51, 0.7);
   --primary-025: rgba(78, 173, 51, 0.25);
   --secondary: #3f3f3f;
   --third: #DFDCDA;
   --dark: #1d1d1b;
   --white: #fff;
}

.ff-marykate {
   font-family: 'Marykate';
}

.ff-coal-brush {
   font-family: 'DK Coal Brush';
}

.ff-myriad {
   font-family: 'Myriad Pro';
}

.ff-beausans {
   font-family: 'PF BeauSans Pro';
}

.bg-main {
   background-image: url('./../img/fondo-principal-desktop.jpg');
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: cover;
   height: 100%;
}

.bg-img-secondary,
.bg-main-game {
   background-image: url('./../img/fondo-secundario-desktop.jpg');
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: cover;
   height: 100%;
}

.bg-img-third {
   background-image: url('./../img/fondo-tercero-desktop.jpg');
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: cover;
   height: 100%;
}

.bg-img-fourth {
   background-image: url('./../img/fondo-cuarto-desktop.jpg');
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: cover;
   height: 100%;
}

.bg-img-fourth-terms {
   background-image: url('./../img/fondo-cuarto-desktop.jpg');
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: cover;
   height: 100vh;
}

.bg-img-third-thankyou {
   background-image: url('./../img/fondo-tercero-desktop.jpg');
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: cover;
   height: 100vh;
}

.bg-img-fourth-thankyou {
   background-image: url('./../img/fondo-cuarto-desktop.jpg');
   background-position: bottom;
   background-repeat: no-repeat;
   background-size: cover;
   height: 100vh;
}

@media screen and (max-width: 1191px) {
   .bg-main {
      background-image: url('./../img/fondo-principal-mobile.jpg');
      background-size: cover;
      height: 100vh;
   }

   .bg-main-game {
      background-image: url('./../img/fondo-secundario-mobile.jpg');
      height: 100%;
   }

   .bg-img-secondary {
      background-image: url('./../img/fondo-secundario-mobile.jpg');
      background-size: cover;
      height: 100vh;
   }

   .bg-img-third {
      background-image: url('./../img/fondo-tercero-mobile.jpg');
      background-size: cover;
      height: 100vh;
   }

   .bg-img-third-thankyou {
      background-image: url('./../img/fondo-tercero-mobile.jpg');
   }

   .bg-img-fourth {
      background-image: url('./../img/fondo-cuarto-mobile.jpg');
      background-size: cover;
      height: 100vh;
   }

   .bg-img-fourth-thankyou {
      background-image: url('./../img/fondo-cuarto-mobile.jpg');
   }
}

.text-primary {
   color: var(--primary) !important;
}

.text-secondary {
   color: var(--secondary) !important;
}

.text-dark {
   color: var(--dark) !important;
}

.text-white {
   color: var(--white) !important;
}

.btn-primary {
   background-color: var(--primary) !important;
   border-color: var(--primary) !important;
   color: var(--white) !important;
}

.btn-white {
   background-color: var(--white) !important;
   color: var(--primary) !important;
}

.cursor-pointer {
   cursor: pointer;
}

body {
   font-family: 'PF BeauSans Pro' !important;
}

/* Index */
body.initial {
   .title {
      font-size: 5rem;
      margin-top: -1rem;
   }

   .box-information {
      background-color: var(--primary-7);
      border-radius: 25px;
      padding: 1rem 2rem;
   }

   @media screen and (max-width: 767px) {
      .alert {
         width: 200px;
      }
   }
}

/* Information */
body.information {
   @media screen and (max-width: 767px) {
      .logo-pal-concierto {
         width: 250px;
      }
   }
}

/* Register */
body.register {
   input {
      background-color: var(--third);
      border-color: var(--primary);
   }

   .form-check-input {
      &:focus {
         border-color: var(--primary-7);
         box-shadow: 0 0 0 .25rem var(--primary-025);
      }

      &:checked {
         background-color: var(--primary);
         border-color: var(--primary);
      }
   }
}

/* Game */
body.game {
   .box-question {
      background-color: var(--third);
      border-radius: 25px;
   }

   .border-timer {
      align-items: center;
      border: 3px solid var(--primary);
      border-radius: 50%;
      display: flex;
      height: 80px;
      justify-content: center;
      width: 80px;
   }

   .answers {
      .answer {
         border: 1px solid #4ead33;
         border-radius: 30px;
         display: flex;
         justify-content: center;
         align-items: center;
         height: 55px;
         padding: 10px;

         &:hover {
            background-color: var(--primary);
            color: var(--white) !important;
         }

         &.correct {
            background-color: var(--primary);
            color: var(--white) !important;
         }

         &.incorrect {
            background-color: #dc3545;
            border-color: #dc3545 !important;
            color: var(--white) !important;
         }
      }
   }

   @media screen and (max-width: 767px) {
      .answers {
         .answer {
            border-radius: 20px;
            height: 78px;
         }
      }
   }

   .box-information {
      background-color: var(--primary-7);
      border-radius: 20px;
      color: var(--white);
   }
}

/* Terms */
body.terms {
   .box-information {
      background-color: var(--third);
      border-radius: 20px;
      height: 90vh;
      overflow: auto;
   }
}