:root{

--pink:#ff3e7f;
--pink-light:#ffd6e7;
--pink-pale:#fff0f6;
--cream:#fffbf4;
--black:#1a1118;
--ink:#2e1f2b;
--muted:#7a5c72;
--border:#f0c0d8;
--accent:#ffdd57;
--white:#fff;

--font-display:"DESIB___", serif;
--font-body:"Nunito", sans-serif;
--font-serif:"Playfair Display", serif;

}

*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{

background:var(--cream);
font-family:var(--font-body);
color:var(--ink);

display:flex;
justify-content:center;
padding:60px 20px;

}

.wrapper{

max-width:700px;
text-align:center;

}

h1{

font-family:var(--font-display);
font-size:3rem;
margin-bottom:20px;
color:var(--pink);

}

.intro{

line-height:1.8;
margin-bottom:50px;
color:var(--muted);

}

.card{

background:white;

border:3px solid var(--border);

border-radius:24px;

padding:40px;

max-width:340px;

margin:auto;

box-shadow:0 12px 40px rgba(0,0,0,.08);

}

.suit{

font-size:5rem;
color:var(--pink);

}

h2{

font-size:4rem;
margin:.25em 0;

}

#topic{

font-size:1.3rem;

line-height:1.6;

}

button,
.home-button{

margin-top:40px;

display:inline-block;

padding:16px 32px;

border-radius:18px;

border:none;

background:var(--pink);

color:white;

font-weight:800;

font-size:1rem;

cursor:pointer;

text-decoration:none;

transition:.2s;

}

button:hover,
.home-button:hover{

transform:translateY(-2px);

background:var(--black);

}