body { background: #2a2a2a; color: #d9d9d9; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; margin: 4.5em 0 0 0; }

a { color: #40d0ff; transition: color 0.3s; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; }
a:hover { color: #d9d9d9; }
a:visited { color: #40d0ff; }
a:visited:hover { color: #d9d9d9; }

hr { width: 100%; }

ul { padding: 0 2.5em 0 2.5em; }

.header { display: flex; position: absolute; top: 0; left: 0; width: calc(100% - 3em); height: 4.5em; background: #2a2a2a; align-items: center; justify-content: space-between; padding: 1.5em; }
.header .links { height: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.header .links a { text-transform: uppercase; font-size: 1.1em; letter-spacing: 0.2em; color: #d9d9d9; text-decoration: none; padding: 0 2em 0 2em; transition: color 0.4s; word-break: normal; }
.header .links a:hover { color: #40d0ff; }
.header .links a[disabled] { pointer-events: none; color: #4e4e4e; }
.header .dummy { display: block; right: 0; width: 5.5em; }
.header .logo-left { left: 0; width: 5.5em; max-height: 100%; margin-left: 1em; user-select: none; }
.header .logo-left :hover { filter: brightness(125%); transform: scale(105%); }
.header .logo-left img { transition: 0.2s; display: block; top: 0; left: 0; height: auto; width: 100%; min-width: 6em; }

.footer { display: flex; position: relative; width: calc(100% - 3em); height: 4.5em; background: #2a2a2a; justify-content: right; align-items: center; padding: 1.5em; }

.splash-social-container { display: flex; position: relative; width: calc(100% - 3em); height: 4.5em; background: #2a2a2a; justify-content: center; align-items: center; padding: 1.5em; }

.social-link { display: flex; justify-content: center; align-items: center; height: 100%; padding: 0.5em; }
.social-link:hover { transform: scale(105%); filter: brightness(115%); cursor: pointer; }
.social-link img { height: 4em; transition: 0.2s; }

.content-center-horizontally { height: auto; width: 100%; display: inline-flex; justify-content: center; align-items: center; flex-direction: column; padding-top: calc(1.5em); }

.content-center { display: flex; min-height: calc(100vh - 4.5em - 1.5em); max-width: 50em; margin: 0 2em 0 2em; width: 100%; justify-content: center; align-items: center; flex-direction: column; }

.content-left { display: inline-flex; max-width: 50em; margin: 0 2em 0 2em; flex-direction: column; width: calc(100% - 4em); }

.capsule-container { display: flex; width: 100%; justify-content: center; flex-wrap: wrap; }

.press-capsule { width: calc(50% - 4em); margin: 2em 2em 2em 2em; position: relative; }
.press-capsule :hover { transform: scale(105%); filter: brightness(115%); cursor: pointer; }
.press-capsule img { display: block; transition: 0.2s; width: 100%; }

.sammes-fade { position: absolute; left: 0; top: 23em; width: 100%; height: 50em; z-index: -1; background: rgba(255, 255, 255, 0) linear-gradient(to bottom, rgba(42, 42, 42, 0) 0%, #2a2a2a 95%) repeat scroll 0 0; }

.splash-big-logo { display: flex; justify-content: center; width: 40em; height: auto; max-width: 80vw; }
.splash-big-logo img { width: 100%; max-height: calc(100vh - 4.5em - 8em); height: auto; }

.sausage-logo { width: 95%; top: 0; transition: 0.3s; user-select: none; }
.sausage-logo:hover { transform: scale(1.1); filter: brightness(115%); }

.balloon-container { position: relative; width: 100%; height: 0px; z-index: -1; margin-bottom: -20%; top: calc(0vh); }

.balloon_0, .balloon_1, .balloon_2 { position: relative; float: left; user-select: none; }

@keyframes balloon_0_anim { 0% { transform: rotateZ(5deg) translate(-50%, -58%); }
  50% { transform: rotateZ(0deg) translate(-50%, -58%); }
  100% { transform: rotateZ(5deg) translate(-50%, -58%); } }
.balloon_0 { width: 20%; height: auto; transform: translate(-50%, -58%); transform-origin: center bottom 0px; top: 0; left: 20%; animation-name: balloon_0_anim; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

@keyframes balloon_1_anim { 0% { transform: rotateZ(10deg) translate(-50%, -20%); }
  50% { transform: rotateZ(12deg) translate(-50%, -20%); }
  75% { transform: rotateZ(11.2deg) translate(-50%, -20%); }
  100% { transform: rotateZ(10deg) translate(-50%, -20%); } }
.balloon_1 { width: 12%; height: auto; transform: translate(-50%, -20%); transform-origin: center bottom 0px; top: 0; left: 10%; animation-name: balloon_1_anim; animation-duration: 3s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

@keyframes balloon_2_anim { 0% { transform: rotateZ(20deg) translate(-50%, -55%); }
  50% { transform: rotateZ(24deg) translate(-50%, -55%); }
  100% { transform: rotateZ(20deg) translate(-50%, -55%); } }
.balloon_2 { width: 22%; height: auto; transform: translate(-50%, -55%); transform-origin: center bottom 0px; top: 0; left: 35%; animation-name: balloon_2_anim; animation-duration: 5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }

.page-banner-bg { height: 48em; max-height: calc(100vw / 1.5); }
.page-banner-bg img, .page-banner-bg video { z-index: -1; position: absolute; left: 0; display: block; margin-left: 0; margin-right: 0; width: 100%; height: 48em; max-height: calc(100vw / 1.5); overflow-y: hidden; object-fit: cover; }

.page-banner-logo { display: flex; position: absolute; left: 0; width: 100%; height: 48em; max-height: calc(100vw / 1.5); justify-content: left; align-items: center; margin: 0; padding: 0; }
.page-banner-logo img { width: 100%; max-width: 70em; }

.buy-now-capsule { display: flex; width: 100%; height: 5em; justify-content: center; align-items: center; flex-direction: column; margin-top: 3em; margin-bottom: 1em; color: #d9d9d9; font-size: 1.5em; }
.buy-now-capsule :hover { color: white; transform: scale(110%); cursor: pointer; filter: drop-shadow(black 0.2em 0.2em 0.2em); }
.buy-now-capsule img { margin: 1em; transition: 0.2s; width: 4em; }

.game-stats { margin-top: 3em; display: flex; width: 100%; justify-content: space-evenly; align-items: start; min-height: 20em; height: auto; flex-wrap: wrap; }
.game-stats .game-stats-list { display: flex; flex-direction: column; flex-grow: 2; min-width: 20em; }
.game-stats .game-stats-list .game-stats-list-stat { display: flex; width: 100%; align-items: center; background-color: #1b1b1b; margin: 0 0 1em 0; height: 5em; }
.game-stats .game-stats-list .game-stats-list-stat .game-stats-list-stat-text { display: flex; flex-direction: column; width: 100%; }
.game-stats .game-stats-list .game-stats-list-stat img { width: 3em; height: 3em; padding: 0 0.85em 0 0.85em; }
.game-stats .img-box { width: 16em; flex: 1; display: flex; justify-content: center; }
.game-stats .img-box img { height: 20em; margin: 0 1em 0 1em; }

.abq-top-banner { position: absolute; left: 0; top: 0; min-height: 100em; height: 100%; width: 100%; z-index: -2; display: flex; justify-content: center; flex-wrap: wrap; overflow-x: hidden; overflow-y: visible; pointer-events: none; scrollbar-width: none; }

.abq-character-bg { height: 200%; min-width: 100em; width: 100vw; top: 0em; will-change: transform; margin: 0; display: block; }

.abq-character { min-width: 60em; max-width: 80em; width: 100%; position: absolute; margin-top: 15em; will-change: transform; display: flex; justify-content: center; }

.abq-logo { margin-left: -32%; min-width: 30em; max-width: 90em; width: 50%; position: absolute; margin-top: 12em; will-change: transform; display: flex; justify-content: center; }

.abq-bg-container { pointer-events: none; position: absolute; top: 0; width: 100%; height: 170em; left: 0; display: flex; justify-content: center; overflow: hidden; }

.abq-bg-plate { position: relative; display: block; width: 100%; height: 80em; top: min(max(calc(65vh + 5em), 40em), 65em); background-color: #2a2a2a; z-index: -1; transform-origin: top center; transform: rotate(-8deg) translateX(0em) scaleX(1000%); overflow-x: hidden; }

.abq-top-banner-padding { display: block; height: 65vh; min-height: 35.5em; max-height: 60em; }

/** Syntax highlighting styles */
.highlight { background: #1e1e1e; overflow-x: scroll; padding-left: 0.5em; padding-top: 0.5em; padding-bottom: 0.5em; padding-right: 0.5em; margin: 0; }
.highlight .c { color: #998; font-style: italic; }
.highlight .err { color: #dea4a4; }
.highlight .k { color: #849ccf; font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #76bc56; font-style: italic; }
.highlight .cp { color: #999; font-weight: bold; }
.highlight .c1 { color: #76bc56; font-style: italic; }
.highlight .cs { color: #999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000; background-color: #fdd; }
.highlight .gd .x { color: #000; background-color: #faa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #a00; }
.highlight .gh { color: #999; }
.highlight .gi { color: #000; background-color: #dfd; }
.highlight .gi .x { color: #000; background-color: #afa; }
.highlight .go { color: #888; }
.highlight .gp { color: #555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #aaa; }
.highlight .gt { color: #a00; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #c7c7c7; }
.highlight .m { color: #91b6b6; }
.highlight .n { color: #c7c7c7; }
.highlight .s { color: #efdb9a; }
.highlight .na { color: #008080; }
.highlight .nb { color: #0086B3; }
.highlight .nc { color: #bea045; font-weight: bold; }
.highlight .no { color: #008080; }
.highlight .ni { color: #800080; }
.highlight .ne { color: #900; font-weight: bold; }
.highlight .nf { color: #c7c7c7; font-weight: bold; }
.highlight .nn { color: #555; }
.highlight .nt { color: #000080; }
.highlight .nv { color: #008080; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbb; }
.highlight .mf { color: #099; }
.highlight .mh { color: #099; }
.highlight .mi { color: #099; }
.highlight .mo { color: #099; }
.highlight .sb { color: #d14; }
.highlight .sc { color: #d14; }
.highlight .sd { color: #d14; }
.highlight .s2 { color: #d14; }
.highlight .se { color: #d14; }
.highlight .sh { color: #d14; }
.highlight .si { color: #d14; }
.highlight .sx { color: #d14; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #d14; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999; }
.highlight .vc { color: #008080; }
.highlight .vg { color: #008080; }
.highlight .vi { color: #008080; }
.highlight .il { color: #099; }
