/* Here I am changing the fonts for the body portion of the page, this will effect everything between and */ body { margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #111; color: #fff; text-align: center; background-image: url('crowd.jpg'); background-size: cover; /* your crowd pic scales fit the screen */ background-position: center center; /* Centered both horizontally and vertically */ background-repeat: no-repeat; background-attachment: scroll; min-height: 100vh; /* this will make it so the image scrolls as the page does */ display: flex; flex-direction: column; justify-content: space-between; } /* Wrapper to vertically center content */ .content-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-grow: 1; padding: 20px; } /* Banner image styling -- we can change this depending on what image you want to use here */ .banner img { max-width: 90%; height: auto; margin-top: 30px; } /* main dialogue box style */ .introbox { background-color: rgba(0, 0, 0, 0.7); /* semi-transparent black */ border: 2px solid #fff; padding: 30px; border-radius: 10px; margin-top: 20px; max-width: 600px; width: 90%; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); } /* Button styling */ .button { background-color: #ff4444; border: none; padding: 12px 24px; font-size: 16px; font-weight: bold; color: white; border-radius: 5px; cursor: pointer; margin-top: 20px; transition: background-color 0.3s ease; } .button:hover { background-color: #dd2222; } /* Footer style */ .footer { background-color: rgba(0, 0, 0, 0.6); padding: 10px; font-size: 14px; } #background-audio { display: none; }