@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;400;700&display=swap');
body{font-family: 'Nunito Sans', sans-serif;line-height:1;background:#000;color:#fff}
p{line-height:1.7;font-size:17px;letter-spacing:.2px}
h1,h2,h3{color:#fff8a6}
h2{font-size:4rem}
a:link,a:visited{text-decoration:none;color:gold}
u{text-underline-position: under}
.margin-tb{margin-top:1rem;margin-bottom:1rem}
.margin-lr{margin-left:1rem;margin-right:1rem}
.margin-all{margin:1rem}
.margin-t{margin-top:1rem}
.margin-b{margin-bottom:1rem}
.d-margin-t{margin-top:2rem}
.d-margin-b{margin-bottom:2rem}
.d-margin-tb{margin-top:2rem;margin-bottom:2rem}
.d-margin-lr{margin-left:2rem;margin-right:2rem}
.d-margin-all{margin:2rem}
.t-margin-t{margin-top:3rem}
.t-margin-b{margin-bottom:3rem}
.t-margin-tb{margin-top:3rem;margin-bottom:3rem}
.s-margin-t{margin-top:7rem}
.s-margin-b{margin-bottom:7rem}
.s-margin-tb{margin-top:7rem;margin-bottom:7rem}
.padding-tb{padding-top:1rem;padding-bottom:1rem}
.padding-lr{padding-left:1rem;padding-right:1rem}
.padding-all{padding:1rem}
.padding-t{padding-top:1rem}
.padding-b{padding-bottom:1rem}
.d-padding-tb{padding-top:2rem;padding-bottom:2rem}
.d-padding-lr{padding-left:2rem;padding-right:2rem}
.d-padding-all{padding:2rem}
.d-padding-t{padding-top:2rem}
.d-padding-b{padding-bottom:2rem}
.t-padding-t{padding-top:3rem}
.t-padding-b{padding-bottom:3rem}
.t-padding-tb{padding-top:3rem;padding-bottom:3rem}
.s-padding-t{padding-top:7rem}
.s-padding-b{padding-bottom:7rem}
.s-padding-tb{padding-top:7rem;padding-bottom:7rem}
/* button manipulation */
.login{background:#FEEB18;color:black;border-color:#FEEB18;font-size:15px;height:42px}
.register{background:#d4d4d4;color:black;font-size:15px;height:42px}
.join{padding:2rem 4rem!important;height:auto;font-size:3rem;max-width:100%}
.red-button{background:red;color:#fff;border-color:red}
.red-button:hover{color:#fff;border-color:red;box-shadow:1px 5px 10px #5b0000}
.green-button{background:#1b711b;color:#fff;border-color:#1b711b}
.green-button:hover{color:#fff;border-color:#1b711b;box-shadow:1px 5px 10px #0b2d0f}
.gold-button{background:#ffeb7c;color:#000;border-color:#ffeb7c}
.gold-button:hover{color:#000;border-color:#ffeb7c;box-shadow:1px 5px 10px #372f00}
.login:hover, .register:hover{border-color:#000;box-shadow: 0 0 0 0 rgba(194, 194, 194, 0.7); -webkit-animation: pulse 1.55s infinite cubic-bezier(0.66, 0, 0, 1);-moz-animation: pulse 1.55s infinite cubic-bezier(0.66, 0, 0, 1);-ms-animation: pulse 1.55s infinite cubic-bezier(0.66, 0, 0, 1);animation: pulse 1.55s infinite cubic-bezier(0.66, 0, 0, 1);}
.pulse{box-shadow: 0 0 0 0 rgba(194, 194, 194, 0.7); -webkit-animation: pulse 1.55s infinite cubic-bezier(0.66, 0, 0, 1);-moz-animation: pulse 1.55s infinite cubic-bezier(0.66, 0, 0, 1);-ms-animation: pulse 1.55s infinite cubic-bezier(0.66, 0, 0, 1);animation: pulse 1.55s infinite cubic-bezier(0.66, 0, 0, 1);}
@-webkit-keyframes pulse {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
@-moz-keyframes pulse {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
@-ms-keyframes pulse {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
@keyframes pulse {to {box-shadow: 0 0 0 15px rgba(232, 76, 61, 0);}}
/* images manipulation */
.images{max-width:100%;height:auto}
.games{background: #feeb18;transition: transform .2s}
.games:hover{transform: scale(1.2);cursor:pointer}
.supericons {max-width: 110px;margin:0 auto}
/* shadow */
.white-shadow {box-shadow: 0px 7px 8px #2d2d2d}
.black-shadow {box-shadow: 0px 7px 8px #222}
/* list */
.oreo li {list-style: none;text-align: left;font-size: 2.5rem;margin-bottom: 2rem}
.oreo li::before {content: '';padding-top: 0rem;margin-right: 1rem;height: 3.3rem;width: 3rem;display: inline-block;position: relative;top: 0.5rem;background: transparent url('/svg/oreo.svg') no-repeat top center;background-size: 3.8rem;}
.pollen li {list-style: none;text-align: left;font-size: 2.5rem;margin-bottom: 2rem}
.pollen li::before {content: '';padding-top: 0rem;margin-right: 1rem;height: 3.3rem;width: 3rem;display: inline-block;position: relative;top: 0.5rem;background: transparent url('/svg/pollen.svg') no-repeat top center;background-size: 3.8rem;}
/* font & text manipulation */
.uppercase{text-transform:uppercase}
.subtitle {font-size: 1rem !important}
.subtitle-2 {font-size: 2rem !important}
.subtitle-3 {font-size: 3rem !important}
.subtitle-4 {font-size: 4rem !important}
.subtitle-5 {font-size: 5rem !important}
.specialfont{font-family:'Montserrat', sans-serif;font-weight:400}
.bold{font-weight:bold}
.italic{font-style:italic}
.light{font-weight:200}
.logo, .center{text-align:center}
.left{text-align:left}
.right{text-align:right}
.black{background:black}
.black-text{color:black}
.grey{background:#bec0bf}
.grey-text{color:#bec0bf}
.white{background:white}
.white-text{color:white}
.hero{background:#eee}
.meta {background: #111;line-height: 1.5;}
@media only screen and (max-width: 800px) {
.mobile-box {position: relative}
.mobile-bg {position: absolute;bottom: 0;opacity: 0.2;width: 55%;left: 0}
.mobile-text {position: relative;float: right}
}
@media only screen and (max-width: 600px) {
.join{font-size:2rem}
.mobile-box {position: relative}
.mobile-bg {position: absolute;bottom: 0;opacity: 0.2;width: 50%}
.mobile-text {width: 100% !important;position:relative;margin-top:1rem}
}
@media only screen and (max-width: 480px) {
.mobile-bg{width: 75%}
}
@media only screen and (max-width: 360px) {
.mobile-bg{width: 100%}
}
@media only screen and (max-width: 320px) {
.mobile-text h2 {font-size: 3rem}
}