/* To reset all margins, padding, and set box-sizing to border-box for all elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Basic styling for the body */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background-color: #121212;
  font-family: "Sancreek", sans-serif;
  background-image: url("bgImage.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat; /* Prevent the background image from repeating */
  overflow: hidden; /* Hide any overflow caused by the background image */
  color: #ff0000;
}

h1 {
  font-size: 3rem;
  background-color: #121212;
  border-radius: 8px;
  border: #00ff00 4px solid;
  box-shadow: #00ff00 0px 22px 70px 4px;
  width: 1200px;
  padding: 10px 20px;
  text-align: center;
  margin-bottom: 6px;
  margin-top: 2em;
  text-transform: uppercase;
}

/* Styling for the game area */
#game__area {
  width: 1200px;
  height: 400px;
  background-image: url("skullImage.jpg"); /*dynamically altered in html by the js*/
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  border-radius: 20px;
  border: 8px solid #00ff00;
  z-index: 2; /* Ensure game area appears above other elements */
  overflow: hidden; /* Hide any overflow from the game area */
  box-shadow: #00ff00 0px 22px 70px 4px;
  flex-shrink: 0; /* Prevent shrinking */
  margin-bottom: 10px;
}
/* Button STYLE */
button {
  padding: 10px 50px;
  margin: 10px;
  font-size: 20px;
  cursor: pointer;
  background-color: #00ff00;
  border: 3px solid #00ff00;
  color: black;
  font-weight: bold;
  font-family: "Sancreek", serif;
  border-radius: 5px;
}
button:hover {
  border: 3px solid #00ff00;
  background-color: #00ff00;
}
/* Disabled button styling */
button:disabled {
  background-color: #555;
  cursor: not-allowed;
  border: 3px solid #555;
}
/* Parent container for left and right controls */
.all__content__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
  padding: 20px;
  z-index: 0;
}

/* Left and right controls */
#game__controls__left,
#game__controls__right {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 30px;
  background-color: black;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 2px #00ff00;
  min-width: 200px;
  height: 300px;
  transition: 1s;
}

#game__controls__left:hover,
#game__controls__right:hover {
  height: 310px;
  box-shadow: 0px 0px 15px 6px #00ff00;
  transition: 1s;
}

/* Styling for text content inside the left and right controls */
#text__content__left,
#text__content__right {
  color: red;
  font-size: 40px;
  font-weight: bold;
  font-family: "Sancreek", serif;
  box-shadow: red 0px 8px 40px 4px;
  padding: 15px;
  height: 240px;
}

/* Ensuring paddles and ball are on top of content */
.paddle {
  width: 50px;
  height: 100px;
  background-color: #00ff00;
  position: absolute;
  border-radius: 8px;
  border: solid 5px rgb(61, 1, 1);
  top: 50%; /* Center paddles vertically */
  transform: translateY(
    -50%
  ); /* Adjust position to truly center paddles vertically */
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}

/* Left paddle styling */
#left__paddle {
  left: 0; /* Position the left paddle on the left edge */
}

/* Right paddle styling */
#right__paddle {
  right: 0; /* Position the right paddle on the right edge */
}

/* Ball styling */
#ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute; /* Position absolutely inside the game area */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center the ball inside the game area */
}

/* Select option menu */
#select__ball {
  display: flex;
  justify-content: center;
  padding: none;
  width: 80%;
  margin-bottom: 15px;
}
#select__ball h6 {
  margin-right: 10px;
  margin-top: 6px;
}

#image__sprite {
  font-weight: 300;
  background-color: #00ff00;
}
#image__sprite {
  font-weight: 300;
  font-size: large;
  font-family: Sancreek;
}

/* The switch - the box around the slider W3 Website reference */

#toggle__switch {
  display: flex;
  justify-content: center;
  padding: none;
  width: 80%;
}
#toggle__switch h6 {
  margin-right: 1em;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: black;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #00ff00;
}

input:focus + .slider {
  box-shadow: 0 0 1px #00ff00;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* (Had an issue with scrolling at one point) */
/* Add scrolling for the page if necessary */
html,
body {
  height: 100%; /* Ensure full height for the document */
  overflow: auto; /* Allow scrolling if content overflows */
}

/* Responsive styling */
@media (max-width: 768px) {
  .all__content__bottom {
    flex-direction: column; /* Stack the controls vertically on smaller screens */
    max-width: 100%;
    padding: 10px;
  }

  #game__controls__left,
  #game__controls__right {
    width: 100%;
    margin-bottom: 20px;
  }
}