css /* styles.css */ body { background: #f0f0f0; font-family: "Helvetica Neue", Arial, sans-serif; line-height: 1.2; margin: 0; padding: 0; } body * { box-sizing: border-box; } h1, h2, h3 { font-weight: bold; text-align: center; margin: 0; padding: 0; font-family: "Helvetica Neue", Arial, sans-serif; } h1 { font-size: 24px; border-bottom: 4px solid #000; } h2, h3 { font-size: 20px; border-bottom: 2px solid #000; } body > * { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); } body, html { font-size: 16px; overflow-x: hidden; width: 800px; margin: 0 auto; padding: 20px; background: #f7d7d7; color: #000; border: 1px solid #000; box-sizing: border-box; } a { text-decoration: none; color: #000; font-weight: bold; text-transform: uppercase; transition: all 0.2s ease; border-bottom: 2px solid #000; padding: 5px 10px; border-radius: 2px 2px 0 0; background: #fff; box-shadow: 0 0 0 2px #000; display: inline-block; margin: 0 10px 0 0; transition: all 0.2s ease; font-size: 16px; color: #000; } a:hover { background: #000; color: #fff; border-bottom: 2px solid #000; box-shadow: 0 0 0 4px #000; } a:visited { color: #000; text-decoration: none; transition: all 0.2s ease; } a:active { color: #000; background: #000; text-decoration: none; border-bottom: 2px solid #000; box-shadow: 0 0 0 4px #000; transition: all 0.2s ease; } h4, .h4, h4 > * { font-weight: bold; margin: 20px 0 10px 0; border-bottom: 4px solid #000; } h4 > * { font-weight: bold; margin: 20px 0 10px 0; border-bottom: 4px solid #000; text-align: center; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; font-size: 16px; font-style: normal; text-align: center; text-transform: uppercase; color: #000; border-bottom: 4px solid #000; background: #fff; box-shadow: 0 0 0 2px #000; padding: 5px 10px; border-radius: 2px 2px 0 0; transition: all 0.2s ease; } .h4 > a { font-size: 18px; color: #000; text-decoration: none; transition: all 0.2s ease; border-bottom: 4px solid #000; background: #fff; box-shadow: 0 0 0 2px #000; padding: 0 10px; border-radius: 2px 2px 0 0; display: inline-block; margin: 0 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; color: #000; border-bottom: 4px solid #000; background: #fff; box-shadow: 0 0 0 2px #000; padding: 0 10px; border-radius: 2px 2px 0 0; transition: all 0.2s ease; text-align: center; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; color: #000; border-bottom: 4px solid #000; background: #fff; box-shadow: 0 0 0 2px #000; padding: 0 10px; border-radius: 2px 2px 0 0; display: inline-block; margin: 0 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; color: #000; border-bottom: 4px solid #000; background: #fff; box-shadow: 0 0 0 2px #000; padding: 0 10px; border-radius: 2px 2px 0 0; transition: all 0.2s ease; } .h4 > a:visited { color: #000; text-decoration: none; transition: all 0.2s ease; border-bottom: 4px solid #000; background: #fff; box-shadow: 0 0 0 2px #000; padding: 0 10px; border-radius: 2px 2px 0 0; display: inline-block; margin: 0 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; color: #000; border-bottom: 4px solid #000; background: #fff; box-shadow: 0 0 0 2px #000; padding: 0 10px; border-radius: 2px 2px 0 0; transition: all 0.2s ease; } .h4 > a:active { color: #000; background: #000; text-decoration: none; border-bottom: 4px solid #000; box-shadow: 0 0 0 2px #000; padding: 0 10px; border-radius: 2px 2px 0 0; display: inline-block; margin: 0 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; line-height: 1.2; color: #000; border-bottom: 4px solid #000; background: #fff; box-shadow: 0 0 0 2px #000; padding: 0 10px; border-radius: 2px 2px 0 0; transition: all 0.2s ease; }