css /* style.css */ body { background-color: #f0f0f0; font-family: "Arial", sans-serif; margin: 0; padding: 0; } h1 { color: #ff0000; font-size: 24px; text-align: center; padding: 4px 8px; margin-bottom: 8px; border-bottom: 4px solid #666666; border-top: 1px solid #666666; border-left: 4px solid #999999; border-right: 4px solid #999999; box-shadow: 0px 0px 0px #666666; } h2 { color: #00ff00; font-size: 20px; text-align: center; padding: 4px 8px; margin-bottom: 8px; border-bottom: 4px solid #666666; border-top: 1px solid #666666; border-left: 4px solid #999999; border-right: 4px solid #999999; box-shadow: 0px 0px 0px #666666; } h3 { color: #0000ff; font-size: 18px; text-align: center; padding: 4px 8px; margin-bottom: 8px; border-bottom: 4px solid #666666; border-top: 1px solid #666666; border-left: 4px solid #999999; border-right: 4px solid #999999; box-shadow: 0px 0px 0px #666666; } p { font-size: 14px; color: #333333; padding: 4px 8px; margin: 8px 8px; border-bottom: 4px solid #666666; border-top: 1px solid #666666; border-left: 4px solid #999999; border-right: 4px solid #999999; } a { text-decoration: none; color: #0000ff; font-weight: bold; text-align: center; margin: 4px 8px; border-bottom: 4px solid #666666; border-top: 1px solid #666666; border-left: 4px solid #999999; border-right: 4px solid #999999; box-shadow: 0px 0px 0px #666666; background-color: #cccccc; padding: 4px 8px; font-size: 12px; } /* Links and Buttons */ a:link { text-decoration: none; color: #ff00ff; font-weight: bold; text-align: center; margin: 4px 8px; border-bottom: 4px solid #666666; border-top: 1px solid #666666; border-left: 4px solid #999999; border-right: 4px solid #999999; box-shadow: 0px 0px 0px #666666; background-color: #cccccc; padding: 4px 8px; } button { background-image: none; background-color: #666666; border: 4px solid #333333; border-radius: 4px 4px 4px 4px; padding: 8px 16px; font-size: 14px; font-family: "Arial", sans-serif; cursor: pointer; box-shadow: 0px 0px 0px #666666; } .button:hover { background-color: #333333; border: 4px solid #666666; border-radius: 4px 4px 4px 4px; padding: 8px 16px; font-size: 14px; font-family: "Arial", sans-serif; cursor: pointer; box-shadow: 0px 0px 0px #666666; } .button:focus { background-color: #666666; border: 4px solid #999999; border-radius: 4px 4px 4px 4px; padding: 8px 16px; font-size: 14px; font-family: "Arial", sans-serif; cursor: pointer; box-shadow: 0px 0px 0px #999999; } /* Headings */ h1, h2, h3 { font-size: 20px; font-weight: normal; color: #666666; margin-bottom: 8px; padding: 4px 8px; border-bottom: 4px solid #000000; border-top: 1px solid #000000; border-left: 4px solid #666666; border-right: 4px solid #666666; box-shadow: 0px 0px 0px #000000; } /* Tables */ table { border-collapse: collapse; width: 100%; margin: 8px 8px; border-bottom: 4px solid #666666; border-top: 1px solid #666666; border-left: 4px solid #999999; border-right: 4px solid #999999; box-shadow: 0px 0px 0px #666666; } th { background-color: #999999; padding: 4px 8px; border-bottom: 4px solid #666666; border-top: 1px solid #666666; border-left: 4px solid #999999; border-right: 4px solid #999999; box-shadow: 0px 0px 0px #666666; font-weight: bold; color: #333333; } td { padding: 4px 8px; border-bottom: 4px solid #666666; border-top: 1px solid #666666; border-left: 4px solid #999999; border-right: 4px solid #999999; box-shadow: 0px 0px 0px #666666; } /* Miscellaneous */ img { max-width: 100%; height: auto; border: 4px solid #666666; border-radius: 4px 4px 4px 4px; padding: 4px 8px; margin: 8px 8px; box-shadow: 0px 0px 0px #666666; } /* Responsive */ @media (min-width: 0) { body { font-size: 12px; } } @media (min-width: 768px) { body { font-size: 16px; } } @media (min-width: 1024px) { body { font-size: 18px; } } @media (min-width: 1280px) { body { font-size: 20px; } }