:root { --primary: #01BE88; --secondary: #00976B; --tertiary: #EA0074; --white: #ffffff; --black: #000000; }
@media print {
 * { color: var(--black) !important; -webkit-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; background: transparent !important; }
 html { background-color: var(--white); font-family: 'Montserrat', sans-serif; scroll-behavior: smooth; }
 nav { display: none; }
 a[href]::after { content: " (" attr(href) ") "; }
 a[href] { font-weight: bold; text-decoration: underline; color: var(--primary); border: none; }
 a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; }
 abbr[title]::after { content: " (" attr(title) ")"; }
 figure { margin-bottom: 1em; overflow: hidden; }
 figure img { border: 1px solid var(--black); }
}
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.4em; background-color: #000000; text-align: center; color: #FFFFFF; }
.wrapper { min-height: 460px; position: absolute; overflow: hidden; display: table; height: 100%; width: 100%; left: 0; top: 0; }
.scene { height: 100vh; position: relative; overflow: hidden; }
.layer { position: absolute; display: block; height: 100%; width: 100%; padding: 0; margin: 0; }
.layer div { -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.background { position: absolute; top: -10%; bottom: -10%; left: -10%; right: 0; background-image: url('../img/background.jpg'); background-repeat: no-repeat; background-position: center center; background-size: cover; width: 120%; }
.table { position: absolute; top: 0%; left: -75%; width: 250%; height: 100%; background-image: url('../img/table.png'); background-repeat: no-repeat; background-size: contain; background-position: bottom center; /* -webkit-animation: moon 5s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
     -moz-animation: moon 5s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
          animation: moon 5s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); */ }
.foreground { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: auto; background-image: url('../img/foreground.png'); background-repeat: repeat-x; background-position: bottom center; background-size: cover; /* -webkit-animation: cloud 8s 0.1s infinite linear;
     -moz-animation: cloud 8s 0.1s infinite linear;
          animation: cloud 8s 0.1s infinite linear; */ }
.logo { position: absolute; top: 5%; bottom: 0; left: 0; right: 0; width: 180px; height: auto; background-image: url('../img/casino-logo.png'); background-repeat: no-repeat; background-position: top; background-size: contain; margin: 0 auto; }
.social-links { position: absolute; bottom: 2%; left: 0; margin: 0 auto; width: 100%; height: auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
.pixel { position: relative; display: flex; justify-content: center; align-items: flex-end; width: 160px; height:70px; z-index: 1; text-decoration: none; }
.pixel::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../img/stone-bg.png'); background-size: cover; background-repeat: no-repeat; background-position: bottom center; z-index: -1; }
.pixel::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../img/stone-fr.png'); background-size: cover; background-repeat: no-repeat; background-position: bottom center; z-index: 3; }
.pixel .pixel-text { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 14px; color: #173d01; padding-bottom: 5px; display: flex; flex-direction: row; align-items: center; }
.pixel .pixel-text .icon { width: 20px; height: 20px; margin-right: 5px; }
.mobile.portrait .overlay, .tablet.portrait .overlay, .desktop .overlay { position: fixed; z-index: -99; }
.mobile.landscape .overlay, .tablet.landscape .overlay { position: fixed; width: 100%; height: 100vh; background-color: #000000; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 1; }
.mobile.landscape .overlay .overlay-icon,
.tablet.landscape .overlay .overlay-icon { width: 100px; }
.mobile.landscape .overlay p, .tablet.landscape .overlay p { font-family: 'Montserrat', sans-serif; font-size: 12px; color: #ffffff; margin: 0 2em; }
@media only screen and (min-width: 576px) { }
@media only screen and (min-width: 768px) {
 .logo { width: 250px; }
 .table { left: -25%; width: 150%; }
 .social-links { bottom: 5%; }
}
@media only screen and (min-width: 992px) {
 .pixel { width: 200px; transition: transform 300ms ease-in-out; }
 .table { left: 0; width: 100%; }
 .foreground{bottom: -5%; left: -10%; width: 120%;}
 .pixel:hover { transform: scale(1.1); }
 .pixel .pixel-text { font-size: 16px; }
 .pixel .pixel-text .icon { width: 36px; height: 36px; }
}