:root {

 /* RGB, 0 -> 255  00 -> ff */
  --light-pink: #fff5f7;
  --yellow: #ffb936;
  --orange: #f48025;
  --red: #a3023d;
  --light-gray: #f7f7f7;
  --dark-blue: #050345;
  --blue: #090979;
}


/*
--dark-blue: #5975e9;
--blue: #9daeec;
--light-pink: #fff5f7;
--yellow: #ffc400;
--orange: #ff991e;
--red: #00b5d2;
--light-gray: #f7f7f7;
--dark-blue: #0052cc;
--blue: #2584fe;
}
*/


/* backgrounds & gradients */
.blue-bg-grad {
  background: linear-gradient(to top right, var(--blue), var(--dark-blue));
}
.blue-bg-grad-to-top {
  background: linear-gradient(to top, var(--blue), var(--dark-blue));
}
.blue-bg-grad-to-left {
  background: linear-gradient(to left, var(--blue), var(--dark-blue));
}
.blue-bg-grad, .blue-bg-grad-to-top, .blue-bg-grad-to-left, .blue-bg {
  background-color: var(--dark-blue);
}
.blue-bg {
  background-color: var(--blue);
}
.blue-bg a {
  color: white;
}
.blue-bg a:hover {
  text-decoration: none;
}
.blue-bg-grad li a, .blue-bg-grad-to-top li a, .blue-bg-grad-to-left li a, .blue-bg li a {
  text-decoration: underline;
  -webkit-text-fill-color: white;

}
.blue-bg-grad li a:hover, .blue-bg-grad-to-top li a:hover, .blue-bg-grad-to-left li a:hover, .blue-bg li a:hover {
  text-decoration: none;
  -webkit-text-fill-color: transparent;
}
.blue-bg-grad li a:after, .blue-bg-grad-to-top li a:after, .blue-bg-grad-to-left li a:after, .blue-bg li a:after {
  content: none;
}
.blue-bg-grad li a:before, .blue-bg-grad-to-top li a:before, .blue-bg-grad-to-left li a:before, .blue-bg li a:before {
  content: none;
}

.yellow-bg, .yellow-bg-grad {
  background: var(--yellow);
}
.yellow-bg-grad {
  background: var(--yellow);
}

.orange-bg {
  background: var(--orange);
}
.red-bg {
  background: var(--red);
}
.gray-bg {
  background: linear-gradient(to top right, var(--light-gray), white);
  background-color: var(--light-gray);
}
.white-bg {
  background-color: white;
  transition-duration: 500ms;
}
.white-bg:hover {
  background-color: var(--light-gray);
  transition-duration: 500ms;
}
.answer a {
  color: var(--orange);
}
.answer a:hover {
  text-decoration: none;
  transition-duration: 350ms;
}
@media (max-width: 700px) {
  .white-bg {
    max-width: 480px;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


.orange-bg, .red-bg, .yellow-bg, .yellow-bg-grad, .blue-bg-grad, .blue-bg-grad-to-top, .blue-bg-grad-to-left, .blue-bg {
  color: white;
}
.gray-bg, .gray-bg-oposite, .white-bg {
  color: black;
}


/* font colors */
.orange {
  color: var(--orange);
}
.yellow {
  color: var(--yellow);
}
.blue {
  color: var(--blue);
}
.red {
  color: var(--red);
}
.current-lang a {
  color: var(--orange);
  -webkit-text-fill-color: var(--orange);
}