Colors

Our Favorite Colors

Pink Teal Turquoise Brick

Warning: excessive exposure to these colors may cause spontaneous combustion, temporary blindness, or sudden urge to wear neon.

body { background-color: black; font-family: "Rock Salt", cursive; margin: 0; padding: 0; line-height: 0; font-size: 2em; } body * { -webkit-transition: all 0.3s ease-in-out; } h1, h2 { color: white; border-top: 4px solid black; font-size: 4em; text-shadow: 2px 2px 4px black; text-align: center; text-decoration: none; margin: 10px; padding: 10px; display: block; text-align: center; } h1 { font-weight: bold; border-bottom: 4px solid black; background-color: #FF69B4; background-image: -webkit-linear-gradient(left, #FF69B4, #FF69B4); background-size: 100% 10px; -webkit-background-clip: border-box; background-clip: border-box; border-radius: 10px; box-shadow: 2px 2px 4px black; box-sizing: border-box; display: inline-block; font-size: 4em; height: 50px; margin: 20px 0 10px 0; padding: 5px 10px; position: relative; text-align: center; text-justify: center; text-align-last: center; text-decoration: none; text-decoration-line-height: 1; text-rendering: optimizeLegibility; width: 100%; word-break: break-word; word-break-inside: break-word; word-spacing: 2px; word-wrap: wrap; word-wrap-inside: wrap-inside; } h2 { color: yellow; background-image: -webkit-linear-gradient(linear, #FFC000, #FFC000); background-size: 100% 10px; -webkit-background-clip: border-box; background-clip: border-box; border-bottom: 4px solid black; border-radius: 10px; box-shadow: 2px 2px 4px black; box-sizing: border-box; display: inline-block; font-size: 3em; height: 40px; margin: 20px 0 10px 0; padding: 5px 10px; position: relative; text-align: center; text-justify: center; text-align-last: center; text-decoration: none; text-decoration-line-height: 1; text-rendering: optimizeLegibility; width: 100%; word-break: break-word; word-break-inside: break-word; word-spacing: 2px; word-wrap: wrap; word-wrap-inside: wrap-inside; } .color-list { display: flex; justify-content: center; padding: 5px; margin: 0 0 0 0; list-style: none; list-style-position: inside; border-bottom: 4px solid black; border-radius: 10px; box-shadow: 2px 2px 4px black; box-sizing: border-box; font-size: 2em; text-align: center; text-justify: center; text-align-last: center; text-rendering: optimizeLegibility; word-break: break-word; word-break-inside: break-word; word-spacing: 2px; word-wrap: wrap; word-wrap-inside: wrap-inside; } .color-list a { background-color: #FF69B4; background-image: -webkit-linear-gradient(left, #FF69B4, #FF69B4); background-size: 100% 10px; -webkit-background-clip: border-box; background-clip: border-box; border-bottom: 4px solid black; border-radius: 10px; box-shadow: 2px 2px 4px black; box-sizing: border-box; color: white; display: inline-block; font-size: 2em; margin: 2px; padding: 5px; position: relative; text-align: center; text-justify: center; text-align-last: center; text-rendering: optimizeLegibility; word-break: break-word; word-break-inside: break-word; word-spacing: 2px; word-wrap: wrap; word-wrap-inside: wrap-inside; } .color-list a:hover { background: #FF69B4; background-image: linear-gradient(to right, #FF69B4, #FF69B4); background-size: 100% 10px; -webkit-background-clip: border-box; background-clip: border-box; border-bottom: 4px solid black; border-radius: 10px; box-shadow: 2px 2px 4px black; box-sizing: border-box; color: white; display: inline-block; font-size: 2em; margin: 2px; padding: 5px; position: relative; text-align: center; text-justify: center; text-align-last: center; text-rendering: optimizeLegibility; word-break: break-word; word-break-inside: break-word; word-spacing: 2px; word-wrap: wrap; word-wrap-inside: wrap-inside; } .color-list a:active { background: #FF69B4; background-image: linear-gradient(to right, #FF69B4, #FF69B4); background-size: 100% 10px; -webkit-background-clip: border-box; background-clip: border-box; border-bottom: 4px solid black; border-radius: 10px; box-shadow: 2px 2px 4px black; box-sizing: border-box; color: white; display: inline-block; font-size: 2em; margin: 2px; padding: 5px; position: relative; text-align: center; text-justify: center; text-align-last: center; text-rendering: optimizeLegibility; word-break: break-word; word-break-inside: break-word; word-spacing: 2px; word-wrap: wrap; word-wrap-inside: wrap-inside; } .color-list a:link { background: #FF69B4; background-image: linear-gradient(to right, #FF69B4, #FF69B4); background-size: 100% 10px; -webkit-background-clip: border-box; background-clip: border-box; border-bottom: 4px solid black; border-radius: 10px; box-shadow: 2px 2px 4px black; box-sizing: border-box; color: white; display: inline-block; font-size: 2em; margin: 2px; padding: 5px; position: relative; text-align: center; text-justify: center; text-align-last: center; text-rendering: optimizeLegibility; word-break: break-word; word-break-inside: break-word; word-spacing: 2px; word-wrap: wrap; word-wrap-inside: wrap-inside; } .color-list a:visited { background: #FF69B4; background-image: linear-gradient(to right, #FF69B4, #FF69B4); background-size: 100% 10px; -webkit-background-clip: border-box; background-clip: border-box; border-bottom: 4px solid black; border-radius: 10px; box-shadow: 2px 2px 4px black; box-sizing: border-box; color: white; display: inline-block; font-size: 2em; margin: 2px; padding: 5px; position: relative; text-align: center; text-justify: center; text-align-last: center; text-rendering: optimizeLegibility; word-break: break-word; word-break-inside: break-word; word-spacing: 2px; word-wrap: wrap; word-wrap-inside: wrap-inside; } .footer { background: black; background-image: linear-gradient(to right, #FF69B4 0, #FF69B4 100%); background-size: 100% 10px; -webkit-background-clip: border-box; background-clip: border-box; border-bottom: 4px solid black; border-radius: 10px; box-shadow: 2px 2px 4px black; box-sizing: border-box; color: white; font-size: 1.5em; display: block; margin: 0; margin-bottom: 20px; padding: 10px; text-align: center; text-justify: center; text-align-last: center; text-rendering: optimizeLegibility; word-break: break-word; word-break-inside: break-word; word-spacing: 2px; word-wrap: wrap; word-wrap-inside: wrap-inside; }