/* 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." */ /* --- Custom fonts you uploaded --- */ @font-face { font-family: 'Tempting'; src: url('fonts/Tempting.otf') format('opentype'); } @font-face { font-family: 'Milton Two'; src: url('fonts/Milton_Two.otf') format('opentype'); } /* --- Google Font: Raleway (body text) --- */ /* Add this line in of index.html: */ /* --- Colors --- */ :root { --bg: #FFEFF1; /* soft baby pink */ color: #1c1c1c; /* soft black */ --link: #c63b7c; /* deep pink */ --link-hover: #ff6fa5; /* bright pink hover */ --card: #ffffff; --border: #ffd6e8; --shadow: 0 12px 28px rgba(214, 51, 132, .12); } /* --- Base text --- */ body { margin: 0; padding: 20px; background-color: var(--bg); color: #1c1c1c; font-family: 'Raleway', sans-serif; line-height: 1.6; } /* --- Headings use Tempting --- */ h1, h2, h3 { font-family: 'Tempting', cursive; font-weight: 400; color: #1c1c1c; margin-top: 0; } h1.title { font-size: clamp(42px, 7vw, 84px); text-align: center; } p.tagline { font-family: 'Tempting', cursive; font-size: clamp(18px, 3vw, 28px); text-align: center; margin: 6px 0 18px; opacity: .9; } /* --- Navigation --- */ .nav { display: flex; gap: 16px; justify-content: center; margin: 16px 0 24px; } .nav a { font-family: 'Raleway', sans-serif; text-decoration: none; color: var(--link); font-weight: 600; border: 1.5px solid var(--border); border-radius: 999px; padding: 8px 14px; background: #fff8fc; transition: .15s ease transform, .15s ease box-shadow, .2s ease background; } .nav a:hover { color: var(--link-hover); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(214, 51, 132, .18); background: #fff1f8; } /* --- Centered cards for diary entries --- */ .container { max-width: 920px; margin: 0 auto; } .card { background: var(--card); border-radius: 22px; padding: 22px; margin: 0 0 20px; border: 1.5px solid var(--border); box-shadow: var(--shadow); } .card h2 { font-family: 'Tempting', cursive; font-size: clamp(26px, 4vw, 38px); margin: 0 0 8px; } .card p { font-family: 'Raleway', sans-serif; margin: 0; font-size: clamp(16px, 2.6vw, 20px); } /* --- Buttons --- */ .btn { font-family: 'Raleway', sans-serif; display: inline-block; margin-top: 12px; text-decoration: none; color: #fff; font-weight: 600; background: linear-gradient(135deg, #d63384, #ff6fa5); padding: 10px 16px; border-radius: 14px; box-shadow: 0 12px 28px rgba(214, 51, 132, .25); transition: .15s ease transform, .15s ease box-shadow; } .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(214, 51, 132, .32); } /* --- Footer --- */ footer { font-family: 'Raleway', sans-serif; text-align: center; font-size: 13px; opacity: .8; margin-top: 10px; } .date { font-family: 'Raleway', sans-serif; font-size: 14px; text-align: center; margin: 0 0 10px; letter-spacing: 1px; opacity: 0.7; }