/* Container with Glass Effect */
.container{
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  margin-left: 7in;  /* optional, adjust as needed */
  margin-top: 1in;   /* optional, adjust as needed */
  gap:20px;
  width:300px;
  padding:40px 20px;
  border-radius:20px;
  background: rgba(0,0,0,0.5); /* glass effect */
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}

/* Hover Effect on Container */
.container:hover{
  transform: scale(1.03);
  background: rgba(0,0,0,0.7); /* darker glass effect */
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}

/* Heading */
h1{
  color:white;
  margin-bottom:20px;
  font-size:28px;
  text-shadow: 1px 1px 5px black;
}

/* Buttons */
button{
  width:220px;
  padding:15px;
  font-size:18px;
  border:none;
  border-radius:10px;
  color:white;
  cursor:pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  font-weight:bold;
}

/* Hover Effects on Buttons */
button:hover{
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(255,255,255,0.5);
}

/* Individual Colors */
#re{ background:red; }
#gl{ background:green; }
#bl{ background:blue; }
#ye{ background:gold; color:black; }
.reset{ background:black; }
.reset:hover{ color:white; }