/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: radial-gradient(circle at center, #1a1a2e, #0f0c29 70%);
  color: #f0f0f0;
  font-family: 'Courier New', Courier, monospace;
text-shadow:
    0 0 2px rgba(100, 0, 255, 0.5), /* Cooler Purple */
    0 0 5px rgba(100, 0, 255, 0.3),
    0 0 10px rgba(100, 0, 255, 0.2);
  position: relative;
}

  


.centered-headings {
  display: flex;
  justify-content: center;
  gap: 20px; /* spacing between headings */
}


.mainheader {
  text-align: center;
}


.container {
  text-align: center;
  transform: translateY(25px); /* shift container down */
  border: 2px solid #333; 
 max-width: 500px; 
 margin: 100px auto 0; 
}

input, button {
  margin-top: 10px;
  padding: 8px;
  font-size: 16px;
}

#result {
  margin-top: 15px;
  font-weight: bold;
}

h1 {
  text-align: center;
}

.sum {
  margin-top: 75px;
  text-align: center;
}