@import url('https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --cassiopeia-font-family-body: "Montserrat", sans-serif;
  --cassiopeia-font-family-headings: "Bubblegum Sans", sans-serif;
  --cassiopeia-color-primary: #3232C8;
  --cassiopeia-color-link: #C864FF;
  --cassiopeia-color-hover: #6464FF;
  --link-color: #C864FF;
  --body-bg: #1E1428;
  --body-color: #FFFFFF;
  --gray-dark: #1E1428;
}

.container-header {
  background: var(--cassiopeia-color-primary) url(../images/container-header-bgr-w576.jpg) center center no-repeat;
  height: 90px;
}

@media (width > 576px) {
  .container-header {
    background-image: url(../images/container-header-bgr-w768.jpg);
  }
}

@media (width > 768px) {
  .container-header {
    background-image: url(../images/container-header-bgr-w992.jpg);
  }
}

@media (width > 992px) {
  .container-header {
    background-image: url(../images/container-header-bgr-w1200.jpg);
  }
}

@media (width > 1200px) {
  .container-header {
    background-image: url(../images/container-header-bgr-w2560.jpg);
  }
}

@media (width > 2560px) {
  .container-header {
    background-size: cover;
  }
}

.container-header .grid-child {
  padding-top: 0px;
  padding-bottom: 0px;
}

.container-header .grid-child .navbar-brand {
  padding-top: 10px;
  padding-bottom: 10px;
  margin: auto;
  width: 235px;
}

.card-header {
  background-color: #3C1E5A;
}

.input-group-text {
  background-color: var(--cassiopeia-color-primary);
  border-color: var(--cassiopeia-color-primary);
}

.form-control, .form-control:focus {
  color: var(--cassiopeia-color-link);
  background-color: var(--body-color);
  border-color: var(--body-color);
}

.form-check-input {
  border-color: var(--body-color);
}

.form-check-input:checked {
  background-color: var(--cassiopeia-color-link);
  border-color: var(--cassiopeia-color-link);
}

svg path {
  fill: var(--body-color) !important;
}

.btn-secondary {
  color: var(--body-color);
  background-color: var(--cassiopeia-color-primary);
  border-color: var(--cassiopeia-color-primary);
}

.btn-secondary:hover {
  color: var(--body-color);
  background-color: var(--cassiopeia-color-hover);
  border-color: var(--cassiopeia-color-hover);
}

.btn-primary:active, .btn-secondary:active {
  background-color: var(--cassiopeia-color-link) !important;  
  border-color: var(--cassiopeia-color-link) !important;
}

.btn-secondary:focus {
  color: var(--body-color);
  background-color: var(--cassiopeia-color-hover);
  border-color: var(--cassiopeia-color-hover);
}

.lang-active {
  background-color: var(--cassiopeia-color-primary) !important;
  border-radius: 5px;
}