body {
  background-color: black;
  background-image: url(images/space.jpg);
  margin: 0;
  padding: 0;
  font-family: monospace;
}

h {
  background-color: rgba(0,0,0,0.5);
  color: white;
  font-family: monospace;
  text-align: center;
  font-size: 20px;
}
p {
   background-color: rgba(0,0,0,0.5);
  color: white;
  font-family: monospace;
  text-align: center;
  font-size: 20px;
}
.img-button {
      background: none;
      border: none;
      padding: 10;
      margin: 0;
      cursor: pointer;
      display: inline-block;
    }

    .img-button img {
      display: block;
      width: 100px;
      height: auto;
    }
 .button-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px; 
      padding: 20px;
    }

 .container {
    position: relative;
    width: 1200px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #555;
    background-size: cover;
  }
  
 .container2 {
    position: relative;
    width: 1200px;
    height: 200px;
    margin: 0 auto;
   
    background-size: cover;
  }

.button-panel {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 30px;
  background-color: rgba(255, 0, 255, 0.5);; 
  border-right: 3px groove magenta;
  border-radius: 0 10px 10px 0;
}
.side-image {
 position: fixed;
  top: 30%;
  right: 0;
  transform: translateY(-50%);
  display: inline;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
    }
    
    
.button-container {
  position: fixed;
  top: 30%;
  left: 0;
  transform: translateY(-50%);
  display: inline;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

.groove-button {
  background-color: magenta;
  color: black;
  border: 4px groove magenta;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 40px;
  font-family: 'Courier New', monospace;
  transition: background-color 0.3s, color 0.3s;
}

.groove-button:hover {
  background-color: #BC30C1;
  color: white;
}