css /* BettyBrilliantFurnitureArranging.css */ body { font-family: 'Bangers', cursive; background-color: #f7f7f7; background-image: url("https://example.com/brick-pattern.png"); background-repeat: repeat; background-position: 0 0; background-size: 100px; font-size: 24px; color: #333; margin: 0 0 0 0; } body:after { content: "Betty's Brilliant Furniture Arranging"; font-size: 48px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); text-align: center; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #ff0000; border: 4px solid #000; border-radius: 10px; padding: 10px; z-index: 1; width: 50%; height: 50%; display: inline-block; box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); background-clip: padding-box; } h1 { font-size: 48px; font-weight: bold; margin: 0 0 20px 0; padding: 0 0 20px 0; border-bottom: 4px solid #000; } h2 { font-size: 24px; margin: 20px 0 20px 0; padding: 0 0 10px 0; border-bottom: 1px solid #333; } p { font-size: 18px; margin: 0 0 20px 0; padding: 0 0 10px 0; border-bottom: 1px solid #333; } a { text-decoration: none; color: #000; font-size: 18px; text-shadow: 0 1px 0 #fff; background-color: #ccc; border: 1px solid #666; border-radius: 5px; padding: 5px 10px 0 10px; margin: 0; display: inline-block; transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; box-sizing: border-box; } a:hover { background-color: #ddd; border-color: #333; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } a:active { background-color: #ccc; border-color: #666; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } /* Betty's Brilliant Furniture Arranging Navigation */ nav { position: fixed; top: 10px; right: 10px; background-color: #f7f7f7; border: 4px solid #000; border-radius: 5px 5px 0 0; padding: 5px 10px 10px 10px; z-index: 2; width: 100%; display: inline-block; box-sizing: border-box; font-size: 18px; } nav ul { list-style: none; margin: 0 0 10px 0; padding: 0; display: inline-block; box-sizing: border-box; } nav li { display: inline-block; margin: 0 10px 10px 0; padding: 0; border-bottom: 1px solid #333; cursor: pointer; } nav a { text-decoration: none; color: #000; font-size: 18px; text-shadow: 0 1px 0 #fff; background-color: #ccc; border: 1px solid #666; border-radius: 5px; padding: 5px 10px 0 10px; margin: 0; display: inline-block; transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; box-sizing: border-box; } nav a:hover { background-color: #ddd; border-color: #333; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } nav a:active { background-color: #ccc; border-color: #666; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); transition: all 0.2s; -webkit-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; } /* The Furniture Arranging Guide Navigation */ nav li.active { background-color: #f7f7f7; border-color: #000; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } nav a.active { background-color: #ccc; border-color: #666; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } /* The Furniture Arranging Tips Navigation */ nav li.tips { background-color: #f7f7f7; border-color: #000; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } nav a.tips { background-color: #ccc; border-color: #666; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }