:root {
   --primary: #000f65;
   --yellow: #ffa800;
}

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

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

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

body {
   font-family: 'Gilroy' !important;
   position: relative;
   background-image: url('./../img/background-desktop.png');
   background-position: center;
   background-attachment: fixed;
   background-repeat: no-repeat;
}

.main-page {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   min-height: 80vh;
}

/* .trivia-page {
   display: flex;
   justify-content: center;
   flex-direction: column;
   min-height: 80vh;
} */

.main-page h1 .text-background-home {
   background-color: var(--yellow);
   border-radius: 20px;
   box-shadow: 0px 0px 10px 3px var(--yellow);
   padding-inline: 0.4rem;
}

.main-page .btn-start {
   padding-inline: 5rem;
   border-radius: 15px;
}

#formUser input,
#formUser select {
   border: 1.5px solid var(--primary);
   border-radius: 15px;
   padding: 0.5rem 0.75rem;
   color: var(--primary) !important;
   font-weight: bold;
}

#formUser .form-check-input{
   border-radius: initial;
   padding: initial;
}

#formUser ::placeholder {
   color: var(--primary) !important;
   opacity: 0.8;
}

.trivia-page .time {
   width: 90px;
   height: 90px;
   border: 1px dashed var(--primary);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
}

.trivia-page .form-check-input {
   border-color: var(--primary) !important;
}

.trivia-page .btn-next {
   padding-inline: 5rem;
   border-radius: 10px;
   border: 1px dashed var(--primary) !important;
}

.trivia-page .btn-next:hover {
   background-color: var(--primary);
   color: #fff !important;
}

@media screen and (max-width: 767px) {
   body {
      background-image: url('./../img/background-mobile.png');
   }

   .main-page,
   .trivia-page {
      display: block;
      min-height: auto;
   }
}

@media screen and (min-width: 1920px) {
   body {
      background-size: cover;
   }
}