/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your HTML content. To learn how to do something, just try searching Google for questions like "how to change link color." */ @import url(https://db.onlinewebfonts.com/c/ab7131d92890e9815ec8b4caec426740?family=Ascender+Serif+W02+Regular); @import url(https://db.onlinewebfonts.com/c/b4f9ca3930bd97e3dc09006ed18837b3?family=Ascender+Serif+W02+Bold); @import url(https://db.onlinewebfonts.com/c/da9c60d0202fc2ae82fb432982369f0e?family=Ascender+Serif+W02+Italic); @import url(https://db.onlinewebfonts.com/c/e4aa67eee0b532c35c2749975efb3d4c?family=AlbertusMTPro); @import url(https://db.onlinewebfonts.com/c/11cb0318116473ce0f9ddfec535eaf6a?family=Apollo+MT+Small+Caps+%26+Oldstyle+Figures); @font-face { font-family: "Ascender Serif"; src: url("https://db.onlinewebfonts.com/t/ab7131d92890e9815ec8b4caec426740.eot"); src: url("https://db.onlinewebfonts.com/t/ab7131d92890e9815ec8b4caec426740.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/ab7131d92890e9815ec8b4caec426740.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/ab7131d92890e9815ec8b4caec426740.woff") format("woff"), url("https://db.onlinewebfonts.com/t/ab7131d92890e9815ec8b4caec426740.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/ab7131d92890e9815ec8b4caec426740.svg#AscenderSerif") format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: "Ascender Serif"; src: url("https://db.onlinewebfonts.com/t/b4f9ca3930bd97e3dc09006ed18837b3.eot"); src: url("https://db.onlinewebfonts.com/t/b4f9ca3930bd97e3dc09006ed18837b3.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/b4f9ca3930bd97e3dc09006ed18837b3.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/b4f9ca3930bd97e3dc09006ed18837b3.woff") format("woff"), url("https://db.onlinewebfonts.com/t/b4f9ca3930bd97e3dc09006ed18837b3.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/b4f9ca3930bd97e3dc09006ed18837b3.svg#AscenderSerifBold") format("svg"); font-weight: 700; font-style: normal; } @font-face { font-family: "Ascender Serif"; src: url("https://db.onlinewebfonts.com/t/da9c60d0202fc2ae82fb432982369f0e.eot"); src: url("https://db.onlinewebfonts.com/t/da9c60d0202fc2ae82fb432982369f0e.eot?#iefix") format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/da9c60d0202fc2ae82fb432982369f0e.woff2") format("woff2"), url("https://db.onlinewebfonts.com/t/da9c60d0202fc2ae82fb432982369f0e.woff") format("woff"), url("https://db.onlinewebfonts.com/t/da9c60d0202fc2ae82fb432982369f0e.ttf") format("truetype"), url("https://db.onlinewebfonts.com/t/da9c60d0202fc2ae82fb432982369f0e.svg#AscenderSerifItalic") format("svg"); font-weight: 400; font-style: italic; } @font-face { font-family: "Ascender Serif"; src: url("./fonts/AscendantSerif-PersonalUse-Medium.otf") format("otf"); font-weight: 400; font-style: normal; } @font-face { font-family: "AlbertusMTPro"; src: url("https://db.onlinewebfonts.com/t/e4aa67eee0b532c35c2749975efb3d4c.eot"); src: url("https://db.onlinewebfonts.com/t/e4aa67eee0b532c35c2749975efb3d4c.eot?#iefix")format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/e4aa67eee0b532c35c2749975efb3d4c.woff2")format("woff2"), url("https://db.onlinewebfonts.com/t/e4aa67eee0b532c35c2749975efb3d4c.woff")format("woff"), url("https://db.onlinewebfonts.com/t/e4aa67eee0b532c35c2749975efb3d4c.ttf")format("truetype"), url("https://db.onlinewebfonts.com/t/e4aa67eee0b532c35c2749975efb3d4c.svg#AlbertusMTPro")format("svg"); } @font-face { font-family: "Apollo MT Small Caps & Oldstyle Figures"; src: url("https://db.onlinewebfonts.com/t/11cb0318116473ce0f9ddfec535eaf6a.eot"); src: url("https://db.onlinewebfonts.com/t/11cb0318116473ce0f9ddfec535eaf6a.eot?#iefix")format("embedded-opentype"), url("https://db.onlinewebfonts.com/t/11cb0318116473ce0f9ddfec535eaf6a.woff2")format("woff2"), url("https://db.onlinewebfonts.com/t/11cb0318116473ce0f9ddfec535eaf6a.woff")format("woff"), url("https://db.onlinewebfonts.com/t/11cb0318116473ce0f9ddfec535eaf6a.ttf")format("truetype"), url("https://db.onlinewebfonts.com/t/11cb0318116473ce0f9ddfec535eaf6a.svg#Apollo MT Small Caps & Oldstyle Figures")format("svg"); } body { color: #ff46a2; font-family: "Ascender Serif", serif; font-synthesis: weight style; background-image: url("images/Screen Shot 2025-09-04 at 8.44.52 PM.png"); /* Replace with your image file or URL */ background-size: cover; /* Make it cover the whole page */ background-repeat: no-repeat; /* Prevent tiling */ background-attachment: fixed; /* Keeps it in place when scrolling */ background-position: center; /* Center the image */ } .pic { width: 80%; height: auto; padding-left: 80px; padding-right: 80px; } .sticker { width: 18px; height: auto; padding-left: 0px; padding-right: 0px; } .btn { display: inline-block; background-color: hotpink; /* button stays pink */ padding: 12px 24px; border-radius: 8px; text-decoration: none; transition: transform 0.2s; } p { padding-left: 80px; padding-right: 80px; } h1 { padding-left: 80px; padding-right: 80px; } a { padding-left: 80px; padding-right: 80px; } .btn:hover { transform: scale(1.06); } /* default text color when not hovered */ .btn .btn-text { color: white; font: 600 18px/1.2 system-ui, Arial, sans-serif; } /* rainbow ONLY on the text when hovering the button */ .btn:hover .btn-text { background: linear-gradient( 270deg, #ff0000, #ff9900, #ffff00, #33ff00, #00ffff, #3300ff, #cc00ff, #ff0066, #ff0000 ); background-size: 300% 300%; animation: rainbow-flash 1s linear infinite; /* magic lines for rainbow text */ -webkit-background-clip: text; background-clip: text; /* for future support */ -webkit-text-fill-color: transparent; /* WebKit */ color: transparent; /* fallback */ } @keyframes rainbow-flash { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 75% { background-position: 0% 50%; } 100% { background-position: 0% 0%; } } .big-text { font-size: 48px; font-weight: bold; } .medium { font-family: "Ascender Serif", serif; font-weight: 500; } .pain-text { font-size: 8px; font-weight: bold; background: linear-gradient( 270deg, #ff0000, #ff9900, #ffff00, #33ff00, #00ffff, #3300ff, #cc00ff, #ff0066, #ff0000, ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbow 0.5s linear infinite; background-size: 300% 300%; text-shadow: 0 0 10px white, 0 0 20px hotpink; } .rainbow-text { font-size: 48px; font-weight: bold; background: linear-gradient( 270deg, #ff0000, #ff9900, #ffff00, #33ff00, #00ffff, #3300ff, #cc00ff, #ff0066, #ff0000 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbow 2s linear infinite; background-size: 300% 300%; text-shadow: 0 0 10px white, 0 0 20px hotpink; } .subtitle { font-size: 24px; font-weight: bold; font-family: "AlbertusMTPro"; background: linear-gradient( 270deg, #ff0000, #ff9900, #ffff00, #33ff00, #00ffff, #3300ff, #cc00ff, #ff0066, #ff0000 ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbow 4s linear infinite; background-size: 300% 300%; text-shadow: 0 0 10px white, 0 0 20px hotpink; } .subheading { font-size: 24px; font-weight: bold; font-family: "Apollo MT Small Caps & Oldstyle Figures"; color: white; text-shadow: 0 0 10px white, 0 0 20px hotpink; } @keyframes rainbow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }