/*SCSS DOCUMENT*/
/*SCSS DOCUMENT*/
html { font-size: 12px; /* Medium and up */ /* Large and up */ }
@media screen and (min-width: 40em) { html { font-size: 13.92px; } }
@media screen and (min-width: 64em) { html { font-size: 16px; } }
html body { background: #211f1e; color: #ffffff; font-family: "Inter", sans-serif; font-weight: 700; font-size: 0.750em; /* Medium and up */ /* Large and up */ }
@media screen and (min-width: 40em) { html body { font-size: 0.875em; } }
@media screen and (min-width: 64em) { html body { font-size: 1em; } }
html body h1, html body h2, html body h3, html body h4, html body h5 { color: #ffffff; line-height: 1.5em; font-style: normal; font-weight: 900; }
html body h1 { font-size: 3.000rem; }
html body h2 { font-size: 2.500rem; }
html body h3 { font-size: 2.000rem; }
html body h4 { font-size: 1.500rem; }
html body p { color: #ffffff; font-size: 1.4rem; font-weight: 400; }
html body a { color: #ddff00; }
html body a:hover, html body a:active, html body a:focus { color: #e7ff4d; text-decoration: underline; }
html body form label { color: #ffffff !important; font-size: 1.000em !important; }
@media screen and (min-width: 660px) { html body form label { font-size: 1.200em !important; } }

/*SCSS DOCUMENT*/
.button { background-color: #ddff00; border-color: #ddff00; border-radius: 25px; color: #211f1e; font-size: 1.200rem; font-weight: 300; }
.button:hover { background-color: #9bb300; border-color: #9bb300; color: #211f1e; }

.button.clear.secondary { color: #ddff00; }
.button.clear.secondary:hover { color: #ffffff; }

.reveal { color: #000000; font-size: 1.000rem; }
.reveal h1, .reveal h2, .reveal h3 { color: #ffffff; -webkit-text-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.6); -moz-text-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.6); text-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.6); }
.reveal p { color: #000000; font-size: 1.000rem; }
.reveal .game-cover { align-content: center; background-repeat: no-repeat; background-position: center center; background-size: cover; display: flex; flex-direction: column; height: 350px; justify-content: center; width: 100%; }

/*SCSS DOCUMENT*/
.hero-section.home { align-items: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center center; display: flex; min-height: 75vh; text-align: center; justify-content: center; position: relative; text-shadow: 2px 2px rgba(0, 0, 0, 0.75); /* Medium and up */ /* Large and up */ background-image: url("http://batteauproductions.synology.me/boardgames/assets/images/site/heros/home.jpg"); }
@media screen and (min-width: 40em) { .hero-section.home { background-position: left top; } }
@media screen and (min-width: 64em) { .hero-section.home { background-position: left top; } }
.hero-section.games { align-items: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center center; display: flex; min-height: 75vh; text-align: center; justify-content: center; position: relative; text-shadow: 2px 2px rgba(0, 0, 0, 0.75); /* Medium and up */ /* Large and up */ background-image: url("http://batteauproductions.synology.me/boardgames/assets/images/site/heros/games.jpg"); }
@media screen and (min-width: 40em) { .hero-section.games { background-position: left top; } }
@media screen and (min-width: 64em) { .hero-section.games { background-position: left top; } }
.hero-section.signup { align-items: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: center center; display: flex; min-height: 75vh; text-align: center; justify-content: center; position: relative; text-shadow: 2px 2px rgba(0, 0, 0, 0.75); /* Medium and up */ /* Large and up */ background-image: url("http://batteauproductions.synology.me/boardgames/assets/images/site/heros/signup.jpg"); }
@media screen and (min-width: 40em) { .hero-section.signup { background-position: left top; } }
@media screen and (min-width: 64em) { .hero-section.signup { background-position: left top; } }
.hero-section .hero-section-text { color: #ffffff; text-shadow: 1px 1px 2px #000000; }
.hero-section .hero-pointer { position: absolute; bottom: 10px; }

.menu-wrapper { align-items: center; background: #000; display: flex; font-size: 1rem; justify-content: center; position: absolute; min-height: 8vh; width: 100%; z-index: 999; /* Medium and up */ }
@media screen and (min-width: 40em) { .menu-wrapper { display: block; } }

.game-container .game-card-container { height: 285px !important; }
.game-container .game-card-container .game-card-wrapper { height: inherit; transition: all .2s ease-in-out; }
.game-container .game-card-container .game-card-wrapper:hover { transform: scale(1.03); }
.game-container .game-card-container .game-card-wrapper:hover .game-card .game-image { opacity: .9; }
.game-container .game-card-container .game-card-wrapper .game-card { align-items: center; background-color: #000000; color: #ffffff; display: flex; justify-content: center; padding: 1.000rem; position: relative; text-shadow: 1px 1px 2px #000000; z-index: 1; }
.game-container .game-card-container .game-card-wrapper .game-card h1 { font-size: 1.500rem; /* Medium and up */ /* Large and up */ }
@media screen and (min-width: 40em) { .game-container .game-card-container .game-card-wrapper .game-card h1 { font-size: 1.800rem; } }
@media screen and (min-width: 64em) { .game-container .game-card-container .game-card-wrapper .game-card h1 { font-size: 2.000rem; } }
.game-container .game-card-container .game-card-wrapper .game-card p { font-size: 1.300rem !important; }
.game-container .game-card-container .game-card-wrapper .game-card .game-image { background-size: cover; display: block; position: absolute; top: 0; left: 0; opacity: .6; width: 100%; height: 100%; z-index: -1; }

/*MENU*/
.top-bar, .top-bar ul { background: #000000; color: #ffffff; font-weight: 300; font-size: 20px; }
.top-bar a, .top-bar ul a { color: #ffffff; }
.top-bar a:hover, .top-bar ul a:hover { color: #ddff00; }

.spacer-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

.spacer-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; }

.spacer-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }