/* Basic reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Press Start 2P', cursive; /* Pixelated font for that retro feel */
  background-color: #000; /* Dark background for contrast */
  color: #fff; /* Bright text for readability */
}

.padding {padding: 5px;}

.login-container {
  display: flex; /* Enable flexbox layout */
  flex-direction: column; /* Stack elements vertically */
  align-items: center; /* Center elements horizontally */
  margin: 50px auto; /* Add some margin for spacing */
  width: 300px; /* Set a width for the container */
  border: 1px solid #ddd; /* Optional border for definition */
  border-radius: 5px; /* Add rounded corners */
  padding: 20px; /* Add some padding inside the container */
}

.login-container h1 { /* Optional styling for the title */
  margin-bottom: 20px; /* Add some spacing below the title */
}

.login-container form { /* Optional styling for the form */
  display: flex; /* Enable flexbox for form elements */
  flex-direction: column; /* Stack labels and inputs vertically */
}

.login-container .submit-btn { /* Optional styling for the button */
  margin-top: 10px; /* Add some margin above the button */
}

.submit-btn {
  background-color: #4CAF50; /* Green color */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px; /* Rounded corners */
  transition: 0.3s ease all; /* Animation for hover effect */
}

.submit-btn:hover {
  background-color: #3e8e41; /* Darker green on hover */
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow on hover */
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* Neon glow effect */
.neon-text {
  text-shadow:
    0 0 5px #39ff14,
    0 0 15px #39ff14,
    0 0 30px #39ff14,
    0 0 40px #39ff14,
    0 0 70px #39ff14,
    0 0 80px #39ff14,
    0 0 100px #39ff14,
    0 0 150px #39ff14;
}

/* Arcade-style button */
.button {
  background-color: #9D00FF;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  box-shadow: 0 0 10px #9D00FF, 0 0 20px #9D00FF, 0 0 30px #9D00FF;
  color: #fff;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  box-shadow: 0 0 20px #9D00FF, 0 0 30px #9D00FF, 0 0 40px #9D00FF, 0 0 50px #9D00FF;
}

/* Screen flicker animation */
@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
  }
  20%, 24%, 55% {
    opacity: 0.5;
  }
}

.screen {
  animation: flicker 3s infinite;
}

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #000;
  font-family: 'Press Start 2P', sans-serif;
  color: white;
  background: rgb(161,41,216);
background: linear-gradient(0deg, rgba(161,41,216,1) 0%, rgba(38,175,192,1) 100%)
/*background-image: url("http://hsma.k00x.uk/hsma.svg");
 /*url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='120px' viewBox='0 0 120 50'><text x='0' y='15' fill='red' font-size='20'>HSMA6</text></svg>");
  /*background-image: url("http://hsma.k00x.uk/s1.svg");
  background-size: 100% 100%;
  -o-background-size: 100% 100%;
  -webkit-background-size: 100% 100%;
  background-size: cover; */
}

/*bg {background-image: url("http://hsma.k00x.uk/HSMA.svg");
    opacity: 0.5;
}*/

    



.scoreboard {
    height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.2em;
  text-shadow: 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 3px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50;
}

.player-top {
  width:100%;
  margin-bottom: 10px;
  text-align: center;
}
.player-left {
  width:40%;
  margin-bottom: 10px;
  text-align: center;
}
.player-right {
  width:40%;
  margin-bottom: 10px;
  text-align: center;
}

.logo {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  text-shadow: 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 3px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50;
}

.logo span {
  margin-left: 10px;
  font-weight: bold;
}

#hsma6 {
  width: 50px;
  height: 50px;
  fill: white; /* Change this to match your SVG colors */
}

.high-score {
  font-size: 1.5em;
  margin-bottom: 10px;
  text-shadow: 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 3px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  text-align: center;
  padding: 10px;
}

tbody tr:nth-child(1n) {
  color: rgba(255, 0, 255, 0.8); /* neon pink */
  text-shadow: 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 3px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50, 0 0 2px #FF00FF50;
}

tbody tr:nth-child(2n) {
  color: rgba(0, 255, 0, 0.8); /* neon green */
  text-shadow: 0 0 2px #00FF0050, 0 0 2px #00FF0050, 0 0 3px #00FF0050, 0 0 2px #00FF0050, 0 0 2px #00FF0050, 0 0 2px #00FF0050, 0 0 2px #00FF0050;
}

tbody tr:nth-child(3n) {
  color: rgba(0, 0, 255, 0.8); /* neon blue */
  text-shadow: 0 0 2px #0000FA50, 0 0 2px #0000FA50, 0 0 3px #0000FA50, 0 0 2px #0000FA50, 0 0 2px #0000FA50, 0 0 2px #0000FA50, 0 0 2px #0000FA50;
}

.dizzy-container {
  float: right;
  top: -10px;
}

.credits {
    float: left;
    text-align: left;
    padding: 10px;
    font-size: 8px;
}