* { margin:0; padding:0 }

body {
  color:#CCC;
  font-size:12px;
  font-family:Verdana, sans-serif;
  background:#000;
  overflow:hidden;
}

ol li, ul li { margin-left:30px }

a {
  color:#8CC;
  text-decoration:none  
}
a:hover {
  color:#8FF;
  text-decoration:none;
  cursor:pointer;
}

.copycode {
  resize:none;
  width:100%;
  height:50px;
  padding:3px;
  color:#999;
  font-size:12px;
  background:#222;
  border:1px solid #1F1F1F;
  border-radius:3px;
}

#main-info { color:#FFF }
#main-title img { height:50px }
#main-title {
  text-align:center;
  position:absolute;
  top:10px;
  left:0;
  right:0;
}

#main-title h1 {
  font-size:30px;
  font-family:"Trebuchet MS", Verdana, sans-serif;
  display:inline-block;
  vertical-align:top;
  margin:0 50px;
  margin-top:.20em;
}

#version {
  position:fixed;
  bottom:5px;
  right:5px;
}

/* menus */
.menu, .subMenu {
  background:#333;
  border:2px solid #444;
  border-radius:3px;
  padding:3px;
  position:absolute;
  top:10%;
  left:15%;
  right:15%;
  bottom:10%;
  overflow-y:auto;
  overflow-x:hidden;
}

.title {
  font-size:18px;
  border-bottom:1px solid #666;
  margin-bottom:10px;
  padding-bottom:3px;
}

.sub.title { font-size:14px }

.button {
  font-size:18px;
  text-align:center;
  background:#555;
  border:1px solid #666;
  border-radius:3px;
  margin:3px auto;
  padding:6px;
  width:80%;
}

.button:hover {
  cursor:pointer;
  background:#383838;
}

.button.small {
  font-size:14px;
  padding:3px;
  width:50%;
}

.back.button {
  font-size:12px;
  padding:3px;
  position:absolute;
  top:0;
  right:5px;
  width:auto;
}

.overflowable {
  height:110px;
  overflow-y:auto;
  overflow-x:hidden;
  border:1px solid #222;
  background:#282828;
}

.row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3px 0;
  margin-bottom: 10px; /* Optional: adjust the margin as needed */
}

.label {
  text-align: right;
  width: 50%;
  padding-right: 6px;
  margin-bottom: 3px;
}

input.box {
  color: #FFF;
  background: #222;
  border: 1px solid #666;
  width: 50%;
  padding: 3px;
}


/* menu lists */
.cell {
  background:#2A2A2A;
  border:1px solid #666;
  border-radius:3px;
  width:80%;
  margin:10px auto;
  padding:3px;
  overflow:auto;
}

.dashed {
  padding:3px 6px;
  margin:3px auto;
  border-bottom:1px dashed #666;
  text-align:right;
}
.dashed.last { border:none }
.dashed .label {
  color:#FFF;
  width:auto;
  float:left;
}
.label.winner { color:#FF8 }
.disabled { opacity:0.5 }

/* Difficulty colors */
.veryEasy { color:#396 }
    .easy { color:#696 }
  .normal { color:#996 }
    .hard { color:#C96 }
 .inhuman { color:#C66 }


/* custom alert module */
.overlay {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#000;
  opacity:0.5;
}

.subMenu.alert {
  top:10%;
  left:40%;
  right:40%;
  bottom:auto;
  min-height:100px;
  text-align:center;
}

#popupContent { padding:3px }
.subMenu.alert .button {
  width:50px;
  padding:3px;
}

#customAlert .button.small {
  display:inline-block;
  margin:3px;
}

/* User interface */
#UI {
  color:#FFF;
  font-size:32px;
  text-shadow:1px 1px 1px #000, 1px 1px 1px #000;
}

.scorep1 {
  position:absolute;
  top:0;
  left:35%;
}

.scorep2 {
  position:absolute;
  top:0;
  right:35%;
}

.line {
  border:1px dashed #FFF;
  position:absolute;
  top:0;
  left:50%;
  bottom:0;
}

.chains {
  font-size:14px;
  position:absolute;
  top:10px;
  right:10px;
}

.goodChain {
  color:#8F8;
  font-size:15px;
  font-weight:bold;
  text-shadow:0 0 0 #8F8, 0 0 0 #8F8;
  -webkit-animation:glow 1000ms linear infinite;
          animation:glow 1000ms linear infinite;
}

.greatChain {
  color:#FF8;
  font-size:16px;
  font-weight:bold;
  display:inline-block;
  -webkit-animation:shift 1500ms linear infinite;
          animation:shift 1500ms linear infinite;
}

.superChain {
  color:#F88;
  font-size:18px;
  font-weight:bold;
  display:inline-block;
  -webkit-animation:pulse 1500ms linear infinite;
          animation:pulse 1500ms linear infinite;
}

/* -- START chain animations -- */
@keyframes glow {
  0% { text-shadow:0 0 0 #0F0, 0 0 0 #0F0 }
  50% { text-shadow:0 0 3px #0F0, 0 0 3px #0F0 }
  100% { text-shadow:0 0 0 #0F0, 0 0 0 #0F0 }
}

@-webkit-keyframes shift {
  0% { transform:rotate(0deg) }
  25% { transform:rotate(10deg) }
  50% { transform:rotate(0deg) }
  75% { transform:rotate(-10deg) }
  100% { transform:rotate(0deg) }
}
  
@keyframes shift {
  0% { transform:rotate(0deg) }
  25% { transform:rotate(10deg) }
  50% { transform:rotate(0deg) }
  75% { transform:rotate(-10deg) }
  100% { transform:rotate(0deg) }
}

@-webkit-keyframes pulse {
  0% { transform:scale(1.0) rotate(0deg) }
  25% { transform:scale(1.3) rotate(10deg) }
  50% { transform:scale(1.0) rotate(0deg) }
  75% { transform:scale(1.3) rotate(-10deg) }
  100% { transform:scale(1.0) rotate(0deg) }
}

@keyframes pulse {
  0% { transform:scale(1.0) rotate(0deg) }
  25% { transform:scale(1.3) rotate(10deg) }
  50% { transform:scale(1.0) rotate(0deg) }
  75% { transform:scale(1.3) rotate(-10deg) }
  100% { transform:scale(1.0) rotate(0deg) }
}
/* END chain animations */


/* gameplay items */
.paddle {
  max-width:21px;
  height:70px;
  position:absolute;
}

.ball, #ball {
  position:absolute;
  width:10px;
  height:10px;
}

.customBall, #customBall {
  position:absolute;
  width:10px;
  height:10px;
  -webkit-animation:spin 250ms linear infinite;
          animation:spin 250ms linear infinite;
}

@-webkit-keyframes spin {
  from { transform:rotate(0deg) }
  to { transform:rotate(360deg) }
}

@keyframes spin {
  from { transform:rotate(0deg) }
  to { transform:rotate(360deg) }
}

/* customization preview */
#preview {
  height:70;
  position:relative;
  background:#000;
}
#preview .paddle.left { left:5% }
#preview .paddle.right { right:5% }
#preview .ball, #preview .customBall {
  left:50%;
  top:45%;
}