/* 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." */


  /* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Inter:wght@300;400;500&display=swap');

body {
    background-color: #FFF9FC;
    color: #5b4b55;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    max-width: 900px;
    margin: auto;
    padding: 50px;
}

/* Main title */
h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 64px;
    color: #F48FC8;
    margin-bottom: 10px;
}

/* Headings */
h2 {
    font-family: 'Cormorant Garamond', serif;
    color: #F48FC8;
    font-size: 34px;
}

/* Links */
a {
    color: #F48FC8;
    text-decoration: none;
    transition: .3s;
}

a:hover {
    color: #ff5fb4;
}

/* Images */
img {
    max-width: 100%;
    border-radius: 18px;
}

/* Navigation */
nav {
    margin: 35px 0;
}

nav a {
    margin-right: 25px;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: lowercase;
}

/* Cute divider */
hr {
    border: none;
    border-top: 2px solid #ffd3ea;
    margin: 40px 0;
}

/* Paragraph spacing */
p {
    margin-bottom: 20px;
}
/* Paragraph spacing */
p {
    margin-bottom: 20px;
}

/* Logo */
.logo {
    display: block;
    width: 600px;
    max-width: 90%;
    margin: 30px auto 10px;
}

/* Tagline */
.tagline {
    text-align: center;
    color: #8c7b84;
    font-size: 16px;
    letter-spacing: 1px;  
    margin-bottom: 35px;
}
/* ===== Navigation ===== */

.navbar{
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    margin:40px 0;
}

.navbar a{
    text-decoration:none;
    color:#5b4b55;
    background:#FDEEF5;
    padding:10px 18px;
    border-radius:999px;
    font-size:15px;
    font-weight:500;
    transition:0.3s ease;
}

.navbar a:hover{
    background:#F7A8D3;
    color:white;
    transform:translateY(-2px);
}
/* ===== Welcome ===== */

.welcome{
    text-align:center;
    margin:70px 0;
}

.welcome p{
    max-width:650px;
    margin:auto;
    color:#6d5f67;
}
/* ===== Cards ===== */

.cards{
    display:flex;
    gap:25px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:40px;
}

.card{
    background:white;
    width:250px;
    padding:25px;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.card h3{
    color:#F48FC8;
}
/* ===== Currently ===== */

.currently{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    max-width:700px;
    margin:40px auto;
}


/* ===== Currently ===== */

.currently{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    max-width:700px;
    margin:40px auto;
}

.current-card{
    background:#FDEEF5;
    border-radius:18px;
    padding:25px;
    text-align:center;
}

.current-card h3{
    margin-top:0;
    color:#F48FC8;
}

.current-card p{
    margin-bottom:0;
}

/* ===== Center homepage sections ===== */

.cards {
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
    margin: 40px auto;
}

.currently {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 700px;
    margin: 40px auto;
}

h2 {
    text-align: center;
}
.card,
.current-card{
    transition:.3s ease;
}

.card:hover,
.current-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}
.date{
    color:#F48FC8;
    font-size:14px;
    letter-spacing:1px;
    text-transform:uppercase;
}

/* ==========================
   DIARY PAGE
========================== */

.entry{
    background:#ffffff;
    max-width:750px;
    margin:40px auto;
    padding:35px;
    border-radius:22px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    transition:.3s ease;
}

.entry:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(0,0,0,.08);
}

.date{
    color:#d88cb3;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:2px;
    margin-bottom:10px;
}

.entry h3{
    color:#4d4d4d;
    font-size:28px;
    margin:0 0 15px;
}

.entry p{
    line-height:1.8;
    color:#666;
}

.entry a{
    display:inline-block;
    margin-top:20px;
    color:#d86ca8;
    text-decoration:none;
    font-weight:600;
    transition:.25s;
}

.entry a:hover{
    color:#c45491;
    text-decoration:underline;
}

.stars span{
    position:fixed;
    color:#f6a9cd;
    font-size:24px;
    animation:float 8s infinite ease-in-out;
    pointer-events:none;
    opacity:.6;
}

.

.
}