@import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Nunito+Sans:wght@800;900&display=swap");

:root {
  --ca-page: #080618;
  --ca-surface: #120e31;
  --ca-surface-2: #1a153a;
  --ca-bar: #29254f;
  --ca-border: #332f5b;
  --ca-text: #8296a5;
  --ca-title: #cbdbe3;
  --ca-link: #6c9cc6;
  --ca-link-hover: #9cc5e8;
  --ca-accent: #ab31d7;
  --ca-accent-2: #6190bf;
  --ca-shadow: rgba(0, 0, 0, 0.35);
}

html,
body {
  background-color: var(--ca-page);
  color: var(--ca-text);
  font-family: "Lato", "Open Sans", Arial, sans-serif !important;
}

body {
  background-image:
    radial-gradient(circle at 12% 8%, rgba(171, 49, 215, 0.16), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(97, 144, 191, 0.13), transparent 26rem);
}

a {
  color: var(--ca-link);
}

a:hover,
a:focus {
  color: var(--ca-link-hover);
}

.app-container,
#app,
.content {
  background-color: transparent;
}

.content {
  color: var(--ca-text);
}

header.main,
footer.main {
  background-color: rgba(18, 14, 49, 0.96);
  border-color: var(--ca-border);
  box-shadow: 0 10px 30px var(--ca-shadow);
}

header.main {
  height: 72px;
  min-height: 72px;
  overflow: visible;
}

header.main .main-section {
  height: 72px;
  min-height: 72px;
}

header.main .logo {
  display: none;
}

header.main .openIcon svg,
header.main .openIcon path {
  fill: var(--ca-title);
}

.logo svg {
  filter: drop-shadow(0 0 12px rgba(108, 156, 198, 0.45));
}

.logo svg stop:first-child {
  stop-color: #6c9cc6;
}

.logo svg stop:nth-child(2) {
  stop-color: #6f69a4;
}

.logo svg stop:last-child {
  stop-color: #ab31d7;
}

.language-select,
.language-select .value {
  color: var(--ca-title);
}

.language-select {
  border-color: rgba(203, 219, 227, 0.18);
  background-color: rgba(41, 37, 79, 0.7);
}

.menuHolder nav.main {
  background-color: var(--ca-bar);
  border-color: var(--ca-border);
  box-shadow: 0 16px 40px var(--ca-shadow);
}

.menuHolder nav.main a {
  color: var(--ca-title);
}

.menuHolder nav.main a:hover,
.menuHolder nav.main a:focus {
  background-color: rgba(108, 156, 198, 0.14);
  color: var(--ca-link-hover);
}

h1,
h2,
h3,
h2.h1 {
  color: var(--ca-title);
}

h2.h1,
.content h2 {
  background-color: var(--ca-bar);
  border: 1px solid var(--ca-border);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  color: var(--ca-title);
}

ul.games li .icon {
  background-color: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

ul.games li a:hover .icon,
ul.games li a:focus .icon {
  border-color: var(--ca-link);
  box-shadow: 0 12px 30px rgba(108, 156, 198, 0.26);
  transform: translateY(-2px);
}

ul.games li .name-container,
ul.games li .name {
  color: var(--ca-title);
  font-family: "Lato", "Open Sans", Arial, sans-serif;
  font-weight: 700;
}

.btn-primary,
.btn-highlight,
.play-btn,
.consent-box-button,
.portal-keys-btn,
.portal-user-center-btn,
#portal-keys-modal .pk-btn,
button:not(.ca-more-button),
input[type="submit"]:not(.ca-search button) {
  background-color: var(--ca-bar);
  border-color: var(--ca-border);
  color: var(--ca-title);
  font-family: "Nunito Sans", "Lato", Arial, sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: 0.005em;
  line-height: 1.15 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-highlight:hover,
.btn-highlight:focus {
  background-color: #332f5b;
  color: var(--ca-link-hover);
}

footer.main,
footer.main a,
footer.main .copyright {
  color: var(--ca-text);
}

footer.main section.tags a {
  background-color: rgba(41, 37, 79, 0.75);
  border-color: var(--ca-border);
  color: var(--ca-title);
}

footer.main section.tags a:hover,
footer.main section.tags a:focus {
  background-color: rgba(108, 156, 198, 0.16);
  color: var(--ca-link-hover);
}

.game,
.game-infos,
.similarGames,
.categoryDescription,
.consent-box,
.privacy_box {
  background-color: var(--ca-surface);
  border: 1px solid var(--ca-border);
  color: var(--ca-text);
  box-shadow: 0 18px 45px var(--ca-shadow);
}

.game .backgroundDarken {
  background-color: rgba(8, 6, 24, 0.68);
}

.game-infos b,
.privacy_box b {
  color: var(--ca-title);
}

.consent-box-button {
  background-color: var(--ca-bar);
  border-color: var(--ca-link);
  color: var(--ca-title);
  font-size: 16px;
}

.consent-box-links a {
  color: var(--ca-link);
}

.AFSJx.dgmlwU {
  background-color: rgba(8, 6, 24, 0.34) !important;
}

body.cloudarcade-portal input,
body.cloudarcade-portal textarea {
  margin-top: 0 !important;
}

body.cloudarcade-portal .ca-search button,
body.cloudarcade-portal .ca-more-button {
  font-family: "Nunito Sans", "Lato", Arial, sans-serif !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
}

.font-display a[class*="bg-primary"],
.font-display button[class*="bg-primary"],
.font-display a[class*="bg-white/10"],
.font-display button[class*="bg-white/10"],
.font-display a[class*="from-primary"],
.font-display button[class*="from-primary"] {
  font-family: "Nunito Sans", "Lato", Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.005em !important;
  line-height: 1.15 !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.font-display a[class*="bg-primary"] > span:not(.material-symbols-outlined),
.font-display button[class*="bg-primary"] > span:not(.material-symbols-outlined),
.font-display a[class*="bg-white/10"] > span:not(.material-symbols-outlined),
.font-display button[class*="bg-white/10"] > span:not(.material-symbols-outlined),
.font-display a[class*="from-primary"] > span:not(.material-symbols-outlined),
.font-display button[class*="from-primary"] > span:not(.material-symbols-outlined) {
  font-family: "Nunito Sans", "Lato", Arial, sans-serif !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  transform: none;
}