@import url('../css/reset.css');


html, body {width: 100%; font-size: 16px; line-height: 150%; font-family: "Bebas Neue", sans-serif; font-weight: 400; height: 100%; color: #FFFFFF; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; -webkit-text-size-adjust: 100%; height: 100%; overflow: hidden; background: #E31C23;}

button {border: 0; outline: none; cursor: pointer; text-decoration: none; background: #FFFFFF; padding: 10px 25px; font-family: "Bebas Neue", sans-serif; font-weight: 500; font-size: 35px; display: block; clear: both; margin: 0 auto 15px auto; color: #000000;}

h1 {display: block; clear: both; font-family: "Bebas Neue", sans-serif; font-weight: 500; font-style: normal; margin: 0 0 15px 0; z-index: 10; line-height: 100%; font-size: 100px; text-align: center;}

hr {display: block; width: 100%; max-width: 200px; border-bottom: 2px solid #FFFFFF; margin: 0 auto 30px auto;}

::selection {background: #FED700; color: #202124; text-shadow: none;}
::-moz-selection {background: #FED700; color: #202124; text-shadow: none;}

p {margin: 0 0 25px 0; display: block; clear: both; width: 100%; z-index: 10; text-align: center;}
img {-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.logo {width: 15%; max-width: 50px; margin: 0 auto 25px auto;}

.collage {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 2560px; display: block; clear: both; z-index: 2;}
.collage.desktop {display: block;}
.collage.mobile {display: none;}

.toggle_audio .on,
.toggle_audio.active .off {display: none;}
.toggle_audio.active .on {display: block;}
.toggle_audio .emoji {margin: 0 5px 0 0;}

.trophy {width: 50px; position: absolute; top: 0; left: 0; z-index: 1;}

.wrap {width: 75%; max-width: 1000px; margin: 0 auto; z-index: 250; clear: both;}

section {padding: 25px 0; height: 100%; overflow: hidden; max-width: 2560px; margin: 0 auto;}





@media only screen and (min-width: 1200px) and (max-width: 1800px) {
.collage {margin: 0 0 -300px 0;}
.collage.desktop {display: none;}
.collage.mobile {display: block;}
}





@media only screen and (min-width: 960px) and (max-width: 1200px) {
.collage.desktop {display: none;}
.collage.mobile {display: block;}
}





@media only screen and (min-width: 768px) and (max-width: 960px) {
h1 {font-size: 75px;}

.collage.desktop {display: none;}
.collage.mobile {display: block;}
}





@media only screen and (min-width: 480px) and (max-width: 768px) {
html, body {font-size: 15px;}

button {font-size: 25px;}

h1 {font-size: 7.5vw;}

.logo {max-width: 30px; margin: 0 auto 15px auto;}

.trophy {width: 25px;}

.collage {display: none!important;}
}





@media only screen and (max-width: 480px) {
html, body {font-size: 15px;}

button {font-size: 25px;}

h1 {font-size: 10.5vw;}

.logo {max-width: 30px; margin: 0 auto 15px auto;}

.trophy {width: 25px;}

.collage.desktop {display: none;}
.collage.mobile {display: block;}
}