/*
  Load fonts
*/
@font-face {
	font-family: STB;
 	src: url("./fonts/Steinschrift.eot")
 	src: url("./fonts/Steinschrift.eot?#iefix") format("embedded-opentype"); 
}
@font-face {
	font-family: STB;
	src: url("./fonts/Steinschrift.ttf")
}
@font-face {
	font-family: SSB;
 	src: url("./fonts/StreetSemiBold.eot")
 	src: url("./fonts/StreetSemiBold.eot?#iefix") format("embedded-opentype"); 
}
@font-face {
	font-family: SSB;
	src: url("./fonts/StreetSemiBold.ttf")
}
@font-face {
	font-family: LED;
 	src: url("./fonts/28Seg.eot")
 	src: url("./fonts/28Seg.eot?#iefix") format("embedded-opentype"); 
}
@font-face {
	font-family: LED;
	src: url("./fonts/28Seg.ttf")
}

body {
    margin:0 auto;
    padding:0;
    overflow:hidden;
    background-color:#1c022e;
    font-family: STB;
    font-weight: normal;
    color: #ffffff;
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none;
    -khtml-user-select: none; 
    -ms-user-select: none; 
}

#welcome,
#board,
#hw,
#game,
#words,
#lastword,
#loader,
#scores,
#launch,
#loaderblock,
#wordlist,
#gamebar,
#uniloader,
.multistart,
.topten,
#hexaworld {
    position:absolute;
    overflow:hidden;
    z-index: 10;
}

.abort {
    color: #fdfd00;
    text-transform: uppercase;
    cursor: pointer;
}

small.ledlarge {
    text-align: center;
    margin: 0 0 0 15px;
    padding: 0;
    font-family: LED;
    font-weight: normal;
    font-size: 150px;
    color: #fdfd00;
}

.multistart {
    width: 2048px;
    font-size: 60px;
    text-align: center;
    display: block;
}

#wordlist {
    left: 20px;
    top: -530px;
    width: 740px;
    height: 530px;
    overflow-y: auto;
    border-radius: 8px 8px;
    background-color: #1c022e;
    opacity: .9;
/*
    border-left: 2px solid #f0f0f0;
    border-right: 2px solid #f0f0f0;
    border-bottom: 2px solid #f0f0f0;
*/
    display: none;
    background-position: 0px 0px;
    background-image: url("./images/wordlist.png");
    background-repeat: no-repeat;
    background-size: cover;
}

span.warn {
    color: #d0d000;
    text-align: center;
}

span.create {
    color: #fdfd00;
    font-weight: bold;
}

span.saveboard {
    font-weight: bold;
    color: #fdfd00;
    border-bottom: 1px dashed #ffffff;
}

#wordlist span {
    padding: 10px 15px;
    font-size: 27px;
    cursor: pointer;
    display: inline-block;
}

#uniloader {
    z-index: 50000;
    width: 2048px;
    height: 1536px;
    display: none;
    background-color: #1c022e;
    opacity: .91;
}

#loaderblock p {
    font-size: 32px;
    padding: 0; margin: 0;
    text-transform: uppercase;
    letter-spacing: -1px;
    display: block;
    text-align: center;
    color: #ffffff;
}

#loaderblock {
    width: 800px;
    height: 500px;
    left: 624px;
    top: 468px;
}

#hw {
    z-index: 10;
    width: 928px;
    height: 250px;
    background-position: 0px 0px;
    background-image: url("./images/hw.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.b1 {
    left: 0; top: 50px;
}

.b2 {
    left: 380px; top: 50px; opacity: .85;
}

.b3 {
    left: 190px; top: 160px;
}

.b4 {
    left: 190px; top: -60px; opacity: .5;
}

.b5a,
.b5 {
    left: 570px; top: -60px; opacity: .75;
}

.b6 {
    left: 570px; top: 160px; opacity: .8;
}

.b7 {
    left: 760px; top: 50px; opacity: .7;
}

.b8 {
    left: 380px; top: 270px; opacity: .8;
}

.b9 {
    left: 0; top: 270px; opacity: .3;
}

.b10 {
    left: 0px; top: -170px; opacity: .15;
}

.b11 {
    left: 380px; top: -170px; opacity: .15;
}

.b12 {
    left: 760px; top: 270px; opacity: .15;
}

.b13 {
    left: 950px; top: 160px; opacity: .1;
}

.b14 {
    left: 190px; top: 380px; opacity: .25;
}

.b15 {
    left: 570px; top: 380px; opacity: .25;
}

.b16 {
    left: 950px; top: -60px; opacity: .15;
}

#noshow {
    display: none;
}

.thatsme h1,
.cookies h1,
.privacy h1,
.documentation h1 {
    padding: 0; margin: 10px;
    font-size: 36px;
    text-transform: uppercase;
    letter-spacing: -1px;
}

.thatsme p,
.cookies p,
.privacy p,
.documentation p {
    padding: 10px;
    font-size: 28px;
}

form {
    margin: 0;
    padding: 0;
}

.input { 
    padding: 12px; 
    letter-spacing: 2px;
    margin-top: 17px;
    border: solid 1px #E5E5E5; 
    margin-left: 33px;
    outline: 0; 
    font-size: 44px;
    font-family: SSB;
    color: #ffffff;
    width: 1000px; 
    text-shadow: 2px 2px #000000;
    background: #c33880; 
    border-radius: 8px 8px;
    box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 8px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#732d4b), to(#431a2f)); 
    background: -moz-linear-gradient(top, #732d4b, #431a2f);
}

img.button {
    position: absolute;
    width: 250px;
    height: 250px;
    cursor: pointer;
}

img.loading {
    width: 250px;
    height: 250px;
}

#scores {
    z-index: 11;
    width: 928px;
    height: 250px;
    background-position: 0px 0px;
    background-image: url("./images/scores.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.wline {
    position: relative;
    left: 10px;
    width: 2008px;
    height: 109px;
}

.playername {
    position: relative;
    width: 1090px;
    height: 109px;
}

.playername,
#lastword {
    z-index: 11;
    background-position: 0px 0px;
    background-image: url("./images/lastword.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.line {
    position: absolute;
    overflow: hidden;
    font-family: LED;
    font-size: 80px;
    display: block;
    text-transform: uppercase;
}

.scorelinex {
    width: 270px;
    left: 510px; 
}

.scoreline {
    width: 400px;
    left: 45px; 
}

.scoreline1 {
    top: 12px;
    z-index: 12;
    color: #404040;
    padding: 0px 20px;
}

.scoreline1a {
    top: 12px;
    z-index: 13;
    color: #f0f0f0;
    padding: 0px 20px;
}

.scoreline2 {
    top: 87px;
    z-index: 12;
    color: #404040;
    padding: 0px 20px;
}

.scoreline2a {
    top: 87px;
    z-index: 13;
    color: #f0f0f0;
    padding: 0px 20px;
}

.scoreline3 {
    top: 162px;
    z-index: 12;
    color: #404040;
    padding: 0px 20px;
}

.scoreline3a {
    top: 162px;
    z-index: 13;
    color: #f0f0f0;
    padding: 0px 20px;
}

.scoreline4 {
    top: 237px;
    z-index: 12;
    color: #404040;
    padding: 0px 20px;
}

.scoreline4a {
    top: 237px;
    z-index: 13;
    color: #f0f0f0;
    padding: 0px 20px;
}

.scoreline5 {
    top: 312px;
    z-index: 12;
    color: #404040;
    padding: 0px 20px;
}

.scoreline5a {
    top: 312px;
    z-index: 13;
    color: #f0f0f0;
    padding: 0px 20px;
}

.yc {
    color: #f2f200;
}

.lastword1 {
    width: 982px;
    left: 10px; top: 14px;
    z-index: 8;
    color: #404040;
    padding: 0px 20px;
}

.lastword2 {
    width: 982px;
    left: 10px; top: 14px;
    z-index: 9;
    color: #fdfd00;
    padding: 0px 20px;
}

.lastword3 {
    width: 1980px;
    left: 10px; top: 14px;
    z-index: 8;
    color: #404040;
    padding: 0px 20px;
}

.lastword4 {
    width: 1980px;
    left: 10px; top: 14px;
    z-index: 9;
    color: #404040;
    padding: 0px 20px;
}

#welcome {
    z-index: 9;
}

#gamebar {
/*
    background-position: 0px 0px;
    background-image: url("./images/progressbar.png");
    background-repeat: no-repeat;
    background-size: cover;
*/
}

.pointer {
    cursor: pointer;
}

.sixty {
    width: 60px;
    height: 60px;
    float: left;
}

.topten {
    color: #ffffff;
}

.gameprogress {
    position: relative;
    top: 12px;
    left: 80px;
    height: 22px;
    width: 0px;
    border-radius: 8px 8px;
    background: rgb(2,0,36);
    background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 43%, rgba(0,212,255,1) 100%);
}

#hexaworld {
    display: none;
    width: 2048px;
    height: 1536px;
}

#loader {
    bottom: 80px;
    left: 724px;
    width: 600px;
    height: 40px;
    border: 1px solid #f2f2f2;
}

.progress {
    position: absolute;
    top: 0;
    display: inline-block;
    width: 0%;
    height: 39px;
    margin: 0 auto;
    padding: 0;
    background-color: #1c022e;
}

#launch {
    background-position: 0px 0px;
    background-image: url("./images/Hexaworld.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #1c022e;
    width: 100%;
    height: 100%;
}

span.bubblekey {
    display: block;
    width: 200px;
    height: 200px;
    font-family: STB;
    font-weight: bold;
    position: absolute;
    text-align: center;
    color: #000000;
}


.unselectable {
    /*pointer-events: none; POORSOLUTION*/
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.inTrail {
    color: #e00000;
}

#game {
    border-radius: 20px 20px;
/*    background: linear-gradient(90deg, rgba(184,162,152,1) 0%, rgba(155,119,103,1) 15%, rgba(99,73,62,1) 35%, rgba(147,123,113,1) 85%, rgba(126,109,101,1) 100%); */
    background: linear-gradient(90deg, rgba(150,192,226,1) 0%, rgba(72,83,233,1) 15%, rgba(7,33,224,1) 35%, rgba(62,57,208,1) 85%, rgba(53,68,170,1) 100%);
}