::-webkit-scrollbar {  
    width: 12px;  
}

::-webkit-scrollbar-thumb {
    background-color: #FFC773;
    background-color: #FFFFFF;
}

::-webkit-scrollbar-thumb:hover {  
    background-color: #D6D6D6;  
}

body {
	overflow: hidden;
	font-family: helvetica,tahoma;
    margin: 10px;
}

.fuck {
	display: none !important;
}

* {
	user-select: none;
}



/* ========== PLEXI LOADING ========== */

#plexi-loading {
	position: fixed;
    background-image: linear-gradient(#55ACEE, #e5e5e5);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483647;
    opacity: 1;
	transition: opacity 500ms ease-in-out, z-index 1ms linear 500ms;
    text-align: center;
}

#plexi-loading .wrapper {
	position: absolute;
	width: 100%;
	top: 20%;
}

#plexi-loading .wrapper p {
    color: white;
    font-weight: bold;
    font-size: 2em;
    margin: 20px 0 0 0;
}

#plexi-loading img {
	border-radius: 50px;
}

#plexi-loading.done {
	opacity: 0;
    z-index: -1;
}



/* ========== BOARD ========== */

#board {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	cursor: none;
	background: #FFC773;
}

#board span, #cursor {
	background-size: 100% 100% !important;
	background-image: url('data:image/png;base64,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');
	position: fixed;
	width: 224px;
	height: 184px;
}

#cursor {
	display: none;
	z-index: 1;
}

#cursor.active {
	display: block;
}



/* ========== BUTTONS ========== */

button:focus {
	outline:none;
}

.button {
	cursor: pointer;
	border: 1px solid #ccc;
	background-color: #eee;
	background-image: -webkit-linear-gradient(#fff,#dedede);
	background-image: linear-gradient(#fff,#dedede);
	font-family: inherit;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
	color: #333;
	padding: 7px;
	border-radius: 3px;
}

.button:hover {
	background-color: lightgray;
	background-image: linear-gradient(#F1F1F1,#C0BFBF);
}

.button:active {
	background-image: -webkit-linear-gradient(#dedede,#fff);
	background-image: linear-gradient(#dedede,#fff);
}


#reset {
	position: fixed;
	top: 10px;
    left: 15px;
}

#home {
	position: fixed;
	z-index: 3;
	right: 15px;
	top: 15px;
	text-decoration: none;
	font-size: 13px;
}

#c {
	position: fixed;
	z-index: 3;
	right: 15px;
	bottom: 15px;
	text-decoration: none;
	font-size: 13px;
}

#magic {
	position: fixed;
	z-index: 2;
	top: 50px;
	left: 15px;
	background-image: linear-gradient(yellow,#FFAD00);
	border-color: rgb(255, 173, 0);
}

#magic:hover {
	background-color: lightgray;
	background-image: linear-gradient(rgb(235, 235, 0),#F0A300);
	border-color: #F3C200;
}

#magic:active {
	background-image: linear-gradient(#FFAD00,yellow);
	border-color: rgb(250, 220, 0);
}

#tweet {
	position: fixed;
	bottom: 15px;
	left: 15px;
	z-index: 3;
}

#tweet iframe {
	width: 150px !important;
	position: fixed !important;
	bottom: 15px !important;
}

.tweet-button {
	display: block;
	z-index: 10;
	font-family: inherit;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
	padding: 5px 8px 5px 7px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
}

.tweet-button:before {
	content: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAOCAYAAADNGCeJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2pAABztAAA+rUAAICVAABjLgAA5W8AADeFAAAVsCdzXPAAAAIxSURBVHjajJRPSJNxHMZ/33l04m6Bpwhhlw5DuhlEdYkgCLoG2rEEj+0Wu1iiWxFFdRjOgbrmH953/35jE11SZjLUXq2Wq9zc3D/f93WtCTI8PB1ehpvbrMNz+PGDD8/z5ft8GQDGLK7zAFgrMYtg0A2LDrLyIll5UTcsOphFMFT/mGXaBIAxNiSY2kZ8JTYkmFqCnoUkskdBkzFN9ih0zxckndXvaLPx3SuTy/eZRTCwnonVh2SPou3VUok9Fm6fhnW+DJvJKYHEDCggaxIzoKltkHMT51ybhxecKxyAnlk3Ug/I/RP0Ng568xE0EhBqY1/1fJmmuV0QV0HBA01cBfn3QZ4cbi6ldwCYATAGoLtvtZAmXx40mwSNfwa9iIBGAxs6W9BinN1aI0/2BFQDNM7ny1WQNjNbuL/THVM6gvvHxBWQNwea2QFNfAU5Jc2xr9AIC8i4yBPZuvmuF8p32t3xCvkKJ1GqMbw5DcSVRpgvj7vvUyt1MAD6d4XDJeOCXK6by78kZjC2LT86DWNzP+See59ya8bF/wRyFZfm94oAuhtgAPS9ge8hEvaaR2oScfxXcaZhJ2seA99KlZVB6XfCGFFbO+QKBteVBADTWTB2wydd7w3uhNq9mUpTh1xBX1RJA+hv2hbdE8FBo/4IPQ0V6fUHbSXETH1crqIrLB+NJctbAAZadhiA2SrlvLcWE6kub/KIPFmtMlxFR0g9vrZ8INvif2IAXAAun3UQ/g4Atp7E9ZaZPxAAAAAASUVORK5CYII=');
	margin-right: 5px;
	vertical-align: -2px;
}

#dynamic_tweet {
	position: fixed;
    left: 15px;
	bottom: 15px;
}



/* ========== POPUPS/PANELS ========== */

.popup {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    opacity: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: -1;
    transition: opacity 500ms ease-in-out, z-index 0s linear 500ms;
}

.popup.active {
	z-index: 11;
	opacity: 1;
	transition: opacity 500ms ease-in-out;
}

.popup .wrapper {
    display: block;
    width: 100%;
    text-align: center;
    top: 10%;
    position: absolute;
    z-index: 100;
    background: inherit;
    padding-bottom: 150px;
}

.popup .splasci-app-icon {
    display: inline-block;
    border-radius: 37px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.56);
}


/* ----- TWITTER POPUP ----- */

#twitter {
    background: #55ACEE;
}

#twitter .wrapper p {
	font-weight: bold;
	font-size: 1.5em;
	color: white;
}

#twitter .wrapper p.error {
	color: rgb(230, 0, 0);
}

#twitter .wrapper .disclaimer {
	width: 60%;
	margin: 1em auto;
	color: silver;
	font-size: small;
}

#twitter .wrapper .disclaimer a:hover {
	color: whitesmoke;
}

#twitter .wrapper .disclaimer a {
    text-decoration: none;
    color: silver;
}

#twitter-login {
	width: 70px;
    display: inline-block;
}

#twitter-discard {
    font-size: 13px;
    font-weight: bold;
    padding: 6px 7px;
    vertical-align: -1px;
    display: inline-block;
    margin-top: 10px;
    opacity: 0.8;
}

#twitter-discard:hover {
	opacity: 1;
}


/* ----- CREDIT POPUP ----- */

#credits {
	background: #55ACEE;
}

#credits .wrapper p {
	font-weight: bold;
	font-size: 1.5em;
	color: white;
}

#credits .wrapper p a {
	text-decoration: none;
	color: #FFAD33;
}

#credits .wrapper span {
	font-size: 0.8em;
}

#credits .wrapper p a:hover {
	border-bottom: 2px dashed #FFD28F;
}


#tweet, #real_tweet, #reset {
	z-index: 9;
}


/* ----- SETTINGS PANEL ----- */

#settings {
    overflow-x: hidden;
    overflow-y: auto;
}

#settings .wrapper {
	color: white;
	padding-bottom: 200px;
}

#settings .wrapper h2 {
    font-family: inherit;
    font-size: 30px;
    font-weight: lighter;
}

#settings .wrapper h3 {
    font-family: inherit;
    font-size: 19px;
    font-weight: lighter;
    border-top: 1px dashed rgba(255, 255, 255, 0.78);
    padding-top: 15px;
    width: 95%;
}

#themes > div, #board span, #cursor {
	background-repeat: no-repeat !important;
}


/* __ DESKTOP __ */

#settings.desktop {
	transition: all 500ms ease-in-out;
	position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0px;
    z-index: 8;
    background-color: #55ACEE;
    padding: 35px 0;
}

#settings.desktop.active {
    width: 350px;
}

#settings.desktop + #settings-discard {
	transition: all 500ms ease-in-out;
	position: fixed;
    left: -55px;
    background-color: #55ACEE;
    padding: 5px;
    border-radius: 0 5px 5px 0;
    top: 10%;
    margin-top: -25px;
    cursor: pointer;
    z-index: 7;
}

#settings.desktop + #settings-discard:hover {
	background: #1869A7 !important;
}

#settings.desktop.active + #settings-discard {
    left: 350px;
}

#settings.desktop .wrapper {
	width: 330px;
    margin: 0 10px 0 15px;
}

#settings.desktop #animations {
	font-size: 14px;
}

#settings.desktop #themes > div {
    height: 76.666px;
    width: 93.333px;
    background-size: 100% 100%;
    display: inline-block;
    cursor: pointer;
    margin: 4px;
}

#settings.desktop .wrapper h3:nth-child(4) {
	margin-top: 30px;	
}

#settings.desktop #animations a {
	margin-right: 5px;
}

#settings.desktop .tooltip {
    display: block;
    position: absolute;
    background: #FFC773;
    padding: 3px;
    color: #006A8B;
    font-weight: bold;
    font-size: 15px;
    white-space: nowrap;
    margin-top: 60px;
    border-radius: 3px;
    opacity: 0;
}

#settings.desktop .theme:hover .tooltip {
	opacity: 1;
}


/* __ MOBILE __ */

#settings.mobile {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    height: 0;
    z-index: -1;
    background-color: #55ACEE;
    opacity: 0;
    transition: opacity 0.5s ease-in-out 0.1s;
}

#settings.mobile.active {
	height: 100%;
    z-index: 20;
    opacity: 1;
}

#settings.mobile + #settings-discard {
	display: none;
}

#settings-discard-mobile {
    position: fixed;
    top: 15px;
    right: 15px;
}

#settings.mobile .wrapper {
    position: absolute;
    width: 90%;
    margin: 0 5%;
    text-align: center;
}

#settings.mobile .wrapper h3 {
	width: 100%;
}

#settings.mobile .wrapper #themes .theme .tooltip {
	display: none;
}

#settings.mobile #themes > div {
    height: 184px;
    width: 224px;
    background-size: 100% 100%;
    display: inline-block;
    margin: 5px;
}



/* ========== ADS ========== */

#ad {
    position: fixed;
    left: 50%;
    margin-left: -364px;
    bottom: 0;
    z-index: 1;
}

#ad a {
    position: absolute;
    margin-top: -18px;
    left: 50%;
    margin-left: -74px;
    font-weight: bold;
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
}

#ad iframe {
	background: white;
}