css /* styles.css */ body { background-color: #FFC080; font-family: 'Arial Black', 'Arial'; margin: 0; padding: 0; border: 1px solid #000000; width: 800px; height: 600px; font-size: 24px; line-height: 1.5; color: #000000; text-align: justify; text-shadow: 0 0 4px #000000; box-sizing: border-box; -moz-osx-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; overflow-x: hidden; overflow-y: scroll; position: relative; background-image: url('data:image/png;base64,iVBgODQwMDAgMDAwMDAgMDAwMDAwMDAgMDAwMDAgMDAgMDAgMDAgMDAgMDAgMDAgMDAgMDAgMDAgMDAg'); background-size: 100% 100%; background-clip: content-box; background-clip: padding-box; background-attachment: scroll; background-origin: content-box; background-attachment: fixed; } body::before { content: "MEETING FEEDBACK SNACK BUDGET"; } h1 { font-size: 48px; text-align: center; margin: 24px 0 0 0; font-weight: bold; color: #000000; text-transform: uppercase; text-shadow: 0 0 4px #000000; border-bottom: 4px solid #000000; } h2 { font-size: 32px; text-align: center; margin: 24px 0 0 0; font-weight: bold; color: #000000; text-transform: uppercase; text-shadow: 0 0 4px #000000; border-bottom: 4px solid #000000; } h3 { font-size: 24px; text-align: center; margin: 12px 0 0 0; font-weight: bold; color: #000000; text-transform: uppercase; text-shadow: 0 0 4px #000000; border-bottom: 2px solid #000000; } p { font-size: 18px; text-align: justify; margin: 0 0 12px 0; line-height: 1.5; color: #000000; text-shadow: 0 0 4px #000000; border-bottom: 1px solid #000000; } span { font-size: 18px; font-weight: normal; color: #000000; text-shadow: 0 0 4px #000000; border-bottom: 1px solid #000000; margin: 0 0 0 12px; } a { font-size: 18px; font-weight: normal; text-decoration: none; color: #000000; text-shadow: 0 0 4px #000000; border-bottom: 1px solid #000000; margin: 0 0 0 12px; } a:hover { text-decoration: underline; color: #000000; text-shadow: 0 0 4px #000000; border-bottom: 4px solid #000000; background-color: #000000; } a:visited { font-size: 18px; font-weight: normal; text-decoration: none; color: #000000; text-shadow: 0 0 4px #000000; border-bottom: 1px solid #000000; margin: 0 0 0 12px; } a:link { font-size: 18px; font-weight: normal; text-decoration: none; color: #000000; text-shadow: 0 0 4px #000000; border-bottom: 1px solid #000000; margin: 0 0 0 12px; } img { width: 100%; height: 100%; border: 4px solid #000000; background-size: 100% 100%; background-clip: content-box; background-attachment: scroll; background-origin: content-box; background-attachment: fixed; margin: 0; padding: 0; position: relative; } img:hover { border: 4px solid #000000; background-size: 100% 100%; background-clip: content-box; background-attachment: scroll; background-origin: content-box; background-attachment: fixed; margin: 0; padding: 0; position: relative; z-index: 10; } /* pseudo elements */ ::before { content: ""; width: 100%; height: 100px; position: absolute; background: url('data:image/png;base64,iVBgODQwMDAgMDAwMDAgMDAwMDAgMDAwMDAgMDAgMDAgMDAgMDAgMDAgMDAgMDAgMDAgMDAg'); background-size: 100% 100%; background-clip: content-box; background-attachment: scroll; background-origin: content-box; background-attachment: fixed; top: 0; left: 0; z-index: 100; border: 4px solid #000000; border-bottom: 4px solid #000000; } ::after { content: ""; width: 100%; height: 100px; position: absolute; background: url('data:image/png;base64,iVBgODQwMDAgMDAwMDAgMDAwMDAgMDAwMDAgMDAgMDAgMDAgMDAgMDAgMDAgMDAgMDAgMDAg'); background-size: 100% 100%; background-clip: content-box; background-attachment: scroll; background-origin: content-box; background-attachment: fixed; bottom: 0; right: 0; z-index: 100; border: 4px solid #000000; border-bottom: 4px solid #000000; }