/*
    Hands-On Project 8-2
    Author: Sam Yalda
    Date: 4/4/2026
*/

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

body {
   width: 960px;
   margin: 0 auto;
   font-family: Verdana, Geneva, sans-serif;
   background-color: white;
}

header {
   width: 100%;
   background-color: #5472b2;
   color: white;
   text-align: center;
   font-size: 2.8em;
   line-height: 1.5em;
}

section {
   background-color: #ffdb70;
   min-height: 570px;
   padding-bottom: 20px;
   position: relative;
   user-select: none;
}

section h2 {
   text-align: center;
   font-size: 2.4em;
   padding: 20px 0;
   font-weight: normal;
}

#box {
   width: 800px;
   height: 400px;
   margin: 10px auto;
   position: relative;
   top: 0;
   left: 0;
   background-color: ivory;
   box-shadow: 5px 5px 10px gray;
}

.ball {
   position: absolute;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: radial-gradient(
      closest-corner at 25% 25%,
      rgba(92, 151, 170, 0.15) 0%,
      rgba(92, 151, 170, 0.65) 100%
   );
}

#addBall {
   display: block;
   width: 120px;
   height: 30px;
   margin: 25px auto;
   font-size: 1.1em;
   cursor: pointer;
}

p, footer {
   margin-top: 12px;
   text-align: center;
}