#canvas {
position:absolute;
}

/*connection screen*/
#connectu {
z-index:99999999;
background-color:white;
padding:5px;
}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: black;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 black,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 black,
      .5em 0 0 black;}
	  }

.loading {
font-size:x-large;
color:black;
font-family:sans-serif;
text-align:center;
font-weight:bold;
margin-top:calc(25vw*0.12);/*scale*/
}
	  
.loading:after {
content: ' .';
animation: dots 2s steps(5, end) infinite;
color:black;
font-family:sans-serif;
font-size:x-large;
text-align:center;
font-weight:bold;
margin-top:calc(25vw*0.12);
  }
  
#tip{
color:black;
font-family:sans-serif;
font-size:large;
text-align:center;
font-weight:100;
}

/*spawn menu*/

#spawnu {
display: none;
position:absolute;
}

#spawnbox {
box-sizing: border-box;
}

.c {
transition-duration: 1s;	
transition-property: opacity;
display:none;
opacity:0;
}

.ssb {
background-color:#a3c6ff;
border: 1px solid #a3c6ff;	
position: absolute;
border-radius:10px;
padding:2.91%;
}

#tabs {
width:105.82%;
margin-left:-2.91%;
margin-top:-2.91%;
}

.selet {
background-color:#a3c6ff !important;	
border-bottom: 0px !important;
}

#tabs div {
float:left;
text-align:center;	
font-family:'Ubuntu', sans-serif;
font-weight:bold;
outline: 0;
background-color:#95baf9;
box-sizing: border-box;
padding-top:1.4505%;
padding-bottom:1.4505%;
border-right: 1px solid #8bb2f5;
border-bottom: 1px solid #8bb2f5;
cursor:pointer;
color:white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

#tabs div:hover, .skin:hover {
background-color:#8bb2f5;	
}

#tabs div:active {
background-color:#a3c6ff;		
}

#t1 {
width:calc(25/165 * 100%);
}

#t2 {
width:calc(50/165 * 100%);	
}

#t3 {
width:calc(56/165 * 100%);	
}

#t4 {
width:calc(34/165 * 100%);	
}

#t5 {
display: none;	
width:calc(25/118 * 100%);
}

#t6 {
display: none;
width:calc(31/118 * 100%);	
}

#t7 {
display: none;
width:calc(56/118 * 100%);	
}

#t8 {
display: none;
width:calc(6/118 * 100%);	
}

.lc {
border-top-left-radius:10px;	
}

.rc {
border-top-right-radius:10px;	
border-right:0px !important;
}

.titlet{ 
color:black;
font-family:'Ubuntu', sans-serif;
text-align:center;
font-weight:bold;
margin-top:calc(25vw*0.12);
}

/*main panel*/

/*main*/

#name {
text-align:center;	
}

#start, #subfb {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background-color: #ffaa00;
box-shadow: inset 0 -2px #f1a307;
border: 0px;
color: white;
cursor: pointer;
border-bottom: 2px solid #f1a307;	
position: relative;
}

#start:hover, #subfb:not(.nota):hover {
top: 1px;
box-shadow: inset 0 -1px #f1a307;
background-color: #fbc966;
}

#start:active, #subfb:not(.nota):active {
top: 2px;
background-color: #fbc966;
}

#customise {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
border: 0px;
color: white;
cursor: pointer;
border-bottom: 2px solid #4fb307;	
background-color: #54c800;
box-shadow: inset 0 -2px #4fb307;
position: relative;
}

#customise:hover {
top: 1px;
box-shadow: inset 0 -1px #4fb307;
background-color: #bcef98;
}

#customise:active {
top: 2px;
background-color: #bcef98;
}

/*feedback*/
textarea { 
resize:none !important;
}

/*changelog*/

.cll, #highscoreb, .icll {
display: block;
list-style-type: none;
margin-block-start: 0px;
}

.cll, .icll {
padding-inline-start: 0px;	
}

.icll {
visibility:hidden;
}

.cll li, .icll li {
transition:height 1.5s;
transition-timing-function: ease;
overflow-y: hidden;
}

.cll li, .itx, #highscoreb li, .icll li  {
color: white;
border-radius: 5px;
padding: 2.91%;
margin-top: 2px;
font-family:'Ubuntu', sans-serif;
font-weight: bold;
cursor: pointer;
}

/*bonus*/

#bonusbar {
width: 96%;
background-color: #bbbbbb;
margin-left: 2%;
border-radius: 20px;
}

#progressbar {
width: fit-content;
background-color: #54c800;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
}

#bonustext {
font:bold 1.25vw Arial;
color:white;
white-space: nowrap;
}

.blink {
display: inline-block;
border-radius: 4px;
color: #fff;
cursor: pointer;
text-decoration: none;
float: left;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}	

.blink:not(.nota):hover {
top:2px;
filter: brightness(110%);
}

/*customise panel*/

/*skins*/
.skin { 
float:left;
cursor:pointer;
background-size:contain;
position:relative;
background-repeat:no-repeat;
box-sizing: border-box;
}

[data-l*="youtube"]:hover {
border: 1px solid #F7986F !important;
background-color:#FFBDA3;
}

.skin:hover {
border: 1px solid #6f88f7;

}/*F7986F FF9970*/

.sselet {
background-color:#6f88f7;
}

/*controls*/
#tweaks div {
float: left;	
color: #ffffff;
}

#tweaks {
overflow-y:scroll;
}

input[type="checkbox"] {display:none}
input[type="checkbox"] + label:before {content:"☐ "}
input:checked + label:before {content:"☑ "}

.cbtn {
background-color: #ddd;
background-size: 400px;
cursor: pointer;
opacity:0.85;
color: black;
position:relative;
float:left;
font-weight:bold;
font-style:Arial;
display: flex;
align-items: center;
justify-content: center;
box-sizing:border-box;
}

.scbtn {
border: 2px solid #ff7600;	
}

/*highscore board*/
.medal {
float: left;
color: rgba(0, 0, 0, 0.72);
text-shadow: 1px 1px 0 #ffffff;
border-radius: 20px;
font-weight: bold;
margin-left: -3px;
margin-right:3px;
display: inline-flex;
align-items: center;
justify-content: center;
background-color:  #1e67e0;
background: linear-gradient(-72deg, #ffffff,#e3e3e3);
}

#m1 {
background: linear-gradient(-72deg, #ffffff,#FFD700);  
color: rgba(0, 0, 0, 0.72);
text-shadow: 1px 1px 0 #ffffff;
}

#m2 {
background: linear-gradient(-72deg, #ffffff,#454545);  
color: rgba(0, 0, 0, 0.72);
text-shadow: 1px 1px 0 #ffffff;
}

#m3 {
background: linear-gradient(-72deg, #ffffff,#ca7345);  
color: rgba(0, 0, 0, 0.72);
text-shadow: 1px 1px 0 #ffffff;
}

.myt {
background: linear-gradient(-72deg, #e0115f,#FF0000);   
color: rgba(0, 0, 0, 0.72);
text-shadow: 1px 1px 0 #ffffff;
}

#m1.myt {
background: repeating-radial-gradient(#FFD700,#FF0000  1%);
color: rgba(0, 0, 0, 0.72);
text-shadow: 1px 1px 0 #ffffff;	
}

#m2.myt {
background: repeating-radial-gradient(#454545,#FF0000  1%);
color: rgba(0, 0, 0, 0.72);
text-shadow: 1px 1px 0 #ffffff;	
}

#m3.myt {
background: repeating-radial-gradient(#ca7345,#FF0000  1%);
color: rgba(0, 0, 0, 0.72);
text-shadow: 1px 1px 0 #ffffff;	
}

#highscoreb {
position:absolute;
overflow-y:scroll;
padding:0px;
}

#highscoreb li {
background-color: #8bb2f5;
border-bottom: 1px solid #8bb2f5;
box-shadow: inset 0 -1px #8bb2f5;	
position:relative;
display: flex;
align-items: center;
justify-content: left;	
flex-direction:row;
}

#highscoreb li:hover {
background-color: #74a4f7;
border-bottom: 1px solid #74a4f7;
box-shadow: inset 0 -1px #74a4f7;	
top:0.5px;
}

.r1 { 
display:inline;
flex: 1 0 0px;
}

.r2 {	
display:inline;
flex: 1 0 0px;
left:5px;
}

/*death screen*/
#discu {
display: none;
width: 100%;
height: 100vh;
background-color: black;
opacity: 0.70;
z-index: 9999999999;
position: absolute;
}

#deathmessage {
font-family: sans-serif;
color: white;
font-weight: bold;
font-size: 24px;
text-align: center;
margin-left: calc(50% - 190px);
margin-top: calc(50vh - 20px);
text-shadow: 0 0 1000px #ff0000, 0 0 5px #b8b8b8;
width: 380px;	
position:absolute;
}

#s {
font-family: 'Ubuntu', sans-serif;
color: white;
font-weight: bold;
font-size: 24px;
text-align: center;
margin-left: calc(50% - 190px);
margin-top: calc(50vh + 55px);
text-shadow: 0 0 1000px #ff0000, 0 0 5px #b8b8b8;
width: 380px;
position: absolute;	
}

#ta {
font-family: 'Ubuntu', sans-serif;
color: white;
font-weight: bold;
font-size: 24px;
text-align: center;
margin-left: calc(50% - 190px);
margin-top: calc(50vh + 93px);
text-shadow: 0 0 1000px #ff0000, 0 0 5px #b8b8b8;
width: 380px;
position: absolute;	
}

.sk {
width: 40px;
margin-top: calc(50vh - 35px);
height: 50px;
position: absolute;
background:url(skull.png);
}

#skull1 {
margin-left: calc(50% - 230px);	
}

#skull2 {
margin-left: calc(50% + 190px);	
}

#return {
cursor: pointer;
color: black;
background-color: white;
border-color: 1;
width: 120px;
font-weight: bold;
position: absolute;
height: 30px;
font-size: 20px;
box-shadow: aliceblue;
border-radius: 20px;	
margin-left: calc(50% - 60px);
margin-top: calc(50vh + 15px);
}

#exit {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
border: 0px;
color: white;
cursor: pointer;
border-bottom: 2px solid #B31507;	
background-color: #C71100;
box-shadow: inset 0 -2px #B31507;
position: relative;
}

#exit:hover {
top: 1px;
box-shadow: inset 0 -1px #B31507;
background-color: #F0A199;
}

#exit:active {
top: 2px;
background-color: #F0A199;
}

#fu {
display:none 
}


/*other*/

#caui {
position:absolute;
}

#uchat {/*needs scaling*/
display:none;
position:absolute;
width:240px;
height:40px;
margin-left:calc(30vw + 182px); 
margin-top:calc(100vh - 70px);
border:1px solid #333333;
border-radius:20px;
outline:0;
font-family: 'Ubuntu', sans-serif;
color: white;
font-weight: bold;
background-color:#444444;
}


.invis {
margin:0;
margin-top:0;
padding:0;
visibility:hidden;
border:0;
height:0;
}

.itx {/*subheading*/
cursor: default;	
text-align:center;
}

.sbtn { /*clickable event button*/
outline: 0;
font-family: 'Ubuntu', sans-serif;
box-sizing: border-box;
width: 100%;
text-align: center;
border-radius: 10px;
font-weight:bold;
}

.feildi:focus:not(.nota), select:focus {
box-shadow: 0 0 3px 1px #dbe3ff;
border: solid 1px #d9e1ee;
}

select, .feildi {/*dropdown selection + input boxes*/
border: solid 1px #dae2ef;
transition: box-shadow 0.3s, border 0.3s;
text-align:left;
}

.arr {/*dropdown*/
width:0px;
display:inline;
height:0px;
position:absolute;
}

.nota {
cursor:not-allowed !important;
opacity:0.5;	
}

.dne {
display:none;
}

@keyframes ex {
  0%   {transform:matrix(1,0,0,1,0,0)}
  5% 	{transform:matrix(1,0,0,1,0,7)} 
  25% {transform:matrix(1.1,0,0,1.1,0,0)} 
  100% {transform:matrix(1.1,0,0,1.1,0,0);opacity:1.0}
}


.excl { 
position:absolute;
box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.72);
width:20px;
height:20px;
color:white;
border-radius: 20px;
font-weight: bold;
font-family:sans-serif;
align-items: center;
justify-content: center;
animation-name:ex;
animation-duration: 4s;
animation-iteration-count: infinite;
display:none;
}


#rex {
background-color:#DE1C1B;
border:1px solid #DE1C1B;
/*margin-top:-20px;	
margin-left:250px;*/
}

#yex { 
background-color:#DBDE1B;
border:1px solid #DBDE1B;	
/*margin-left:320px;
margin-top:-20px;*/
animation-delay:2.5s;
}

body {
margin:0;
overflow-y:hidden;
overflow-x:hidden;	
}

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

::-webkit-scrollbar-thumb {
background-color:#a3c6ff;	
border-radius:10px;
border:1px solid #74a4f7;
}

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

::-webkit-scrollbar-thumb:active {
background-color:#7aa1e4;
}

::-webkit-scrollbar-track {
background-color:#b4d7ee;	
border-radius:10px;
}

.wl {
font: bold 1.25vw Arial
}