@font-face {font-family: Ebrimabd; src: url(ebrimabd.ttf);}

* {border: 0; margin:0; padding:0;}
html { repeat; background-color: #FFFFFF; font-family: "Verdana", "Arial";}

.webgl-content * {position: absolute; width: 100%; height: 100%; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
.webgl-content .logo, .progress, .message {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('SquaddioLogo.png') no-repeat center / contain; margin-top: -100px; width: 512px; height: 128px;}
.webgl-content .progress {height: 32px; width: 404px; margin-top: -25px;}
.webgl-content .progress .empty {background: url('barbackground.png') no-repeat right / cover; float: left; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('fullbar.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.webgl-content .message {color: #FFFFFF; font-Family: 'Ebrimabd', 'sans-serif'; font-Weight: bold; font-Size: 24px; text-align: center; width: 404px; height: 32px; display: inline-block;}

canvas {
	background: url(background.jpg);
}

div#playlist {
	position: absolute;
	bottom: 30px;
	right: 12px;
	z-index: 2147483647;
}

div#crossPromo {
    position: absolute;
    bottom: 50px;
    left: 12px;
    z-index: 2147483647;
}

#follow_us {
    display: grid;
    position:absolute;
    top:0;
    right:0;
    margin-right: 12px;
    margin-top: 8px;
    z-index: 10;
}

#follow_us > * {
  margin-bottom: 5px;
  font-size: 0px;
}

.fb-like > span {
  float: right;
}

#LikeReward{
    position: absolute;
    right: 140px;
    top: 61px;
    width:30px;
    height:30px;
    display:none;
    z-index:11;
}

#___ytsubscribe_0 {
  margin-left: auto !important;
}

.twitter-share-button {
  padding-left: 4px;
}

.hud-name-social {
    line-height: 20px;
    text-align: left;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.4);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hud-name-social .hud-name-social-discord {
    display: inline-block;
    line-height: 28px;
	margin: 0 0 0px;
    padding: 0 18px 0 34px;
    background: #7289da url(discord-icon.png) no-repeat;
    background-size: 24px;
    background-position: 4px center;
    color: #eee;
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.15s ease-in-out;
}

#popup
{
	z-index: 2147483648;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.85);
}

#popup-content
{
	position: absolute;
	min-width: 400px;
	width: 40%;
	height: 75%;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

#popup-content > a > img
{
	width: 100%;
}

#popup-close
{
	position: absolute;
	right: 1vw;
	top: 1vw;
	width: 30px;
}