♡ giuls is online

<style>
  time, .date {
    display: none !important;
  }
</style>

<style>
  .upvote, .upvote-button, #upvote {
    display: none !important;
  }
</style>

<style>
.blog .tags,
.blog-posts .tags,
.page #upvote-form {
display: none !important;
}
</style>

<details>
<summary>How do I dropdown?</summary>
This is how you dropdown.
</details> 

/* THEME STARTS HERE*/
:root {
--width: 600px;
--font-main: "Quicksand", sans-serif;
--font-secondary: "Georgia", "Times New Roman", serif;
--font-scale: 1em;
--background-color: #ffffff; /*white*/
--heading-color: #4d004d; /*purple*/
--text-color: #4d004d ; /*purple*/
--link-color: #ff748c; /*pink*/
--visited-color: #4d004d; /*purple*/
--code-background-color: #ffe8ee; /*light pink*/
--code-color: #4d004d ; /*purple*/
--blockquote-color: #4d004d ; /*purple*/
--heart-color: #e8b4b8 ; /*muted pink*/
}

*{box-sizing: border-box;}

html {padding: clamp(24px, 6vw, 64px) 12px;}

body {
position: relative;  
font-family: var(--font-main);
font-size: var(--font-scale);
margin: auto;
padding: clamp(28px, 6vw, 44px) clamp(18px, 6vw, 44px) 28px;
max-width: var(--width);
text-wrap: wrap;
overflow-wrap: break-word;
line-height: 1.5;
color: var(--text-color);
background-color: var(--background-color);

}

::selection {
color: var(--background-color);
background: var(--heading-color);
}

a {
color: var(--visited-color);
text-decoration-style: solid;
text-decoration-thickness: 1px;
text-underline-offset: .3rem;
}

a:hover {
color: var(--link-color);
text-decoration-style: wavy;
}

.title { /*removes the decoration from the title link*/
color: var(--link-color);
text-decoration: none;
}

.title h1 {
margin: 0 0 10px;
font-size: 1.5em;
letter-spacing: .2em;
text-transform: uppercase;
text-align: center 
}

nav {
padding: 10px;
font-size: 1em;
text-align: center
}

nav p {
margin: 0;
}

nav a {
display: inline-flex;
margin: 0 5px;
color: var(--link-color);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: var(--background-color);
letter-spacing: .08em;
}

nav a:hover {
color: var(--visited-color);
text-decoration: underline wavy;
text-decoration-color: var(--link-color);
}

main {
padding: 25px 0 5px; 
}

h1, h2 ,h3 ,h4 ,h5 ,h6 {
color: var(--heading-color);
line-height: 1.35;
text-wrap: balance;
}

h1 {
margin: 0 0 20px;
font-size: 1.5em;
text-align: center;
text-transform: uppercase;
letter-spacing: .06em;
}

.post main > h1:first-child + p { /*change the date under the blogpost*/
margin: -12px 0 28px;
color: var(--text-color);
font-size: .85em;
text-align: center;

}

h2 {
display: flex;
align-items: center;
gap: 12px;
margin: 36px 0 14px;
font-size: 1em;
text-align: center;
text-transform: uppercase;
letter-spacing: .12em;
text-wrap: pretty;
}

h2::before,
h2::after {
content: "";
flex: 1 1 1.5em;
border-top: 2px dashed var(--link-color);
text-align: center;
}

h3 {
margin: 0 0 10px;
font-size: 1em;
text-transform: uppercase;
letter-spacing: .06em;
text-align: center;
}

h4, h5, h6 {
margin: 24px 0 8px;
font-size: 1em;
text-align: left;
}

p {
margin: 0 0 16px; 
}

ul, ol {
padding-left: 0em;
text-wrap: balance;
list-style-position: inside !important;
list-style: circle;
}

li {
margin: 4px 0;
}

blockquote {
margin: 24px 0;
padding: 14px 18px;
border: 2px dashed var(--link-color);
color: var(--blockquote-color);
text-align: center;
}

blockquote p:last-child {
margin-bottom: 0;
}

hr { /*horizontal divider*/
height: 8px;
margin: 28px 0;
border: 0;
background: radial-gradient(circle, var(--link-color) 1.5px, #0000 2px) 0 50% / 10px 8px repeat-x;
} 

img, video {
max-width: 100%;
height: auto;
filter: grayscale(1) contrast(1.1);
transition: filter .3s;
}

figure {
margin: 24px 0;
text-align: center;
}

figcaption, caption {
margin-top: 6px;
font-size: .8em;
}

table {
display: block;
max-width: 100%;
margin: 24px 0;
overflow-x: auto;
border-collapse: collapse;
border-top: 2px dashed var(--link-color);
border-bottom: 2px dashed var(--link-color);
font-size: .9em;
}

th, td { /*table header, table data*/
padding: 6px 12px 6px 0;
text-align: left;
vertical-align: top;
}

th:last-child, td:last-child {
padding-right: 0;
text-align: right;
}

th {
color: var(--heading-color);
text-transform: uppercase;
letter-spacing: .06em;
}

code, pre, kbd, samp {
font-family: var(--font-main);
font-size: .92em;
}

code {
padding: 1px 4px;
color: var(--code-color);
background: var(--code-background-color);
text-wrap: wrap;
overflow-wrap: break-word;
}

pre { /*padded, horizontally scrollable block*/
padding: 14px 16px;
overflow-x: auto;
border-left: 3px dashed var(--link-color);
color: var(--code-color);
background: var(--code-background-color);
line-height: 1.55;
}

pre code {
padding: 0;
background: none;
font-size: 1em;
}

.highlight, .code {
max-width: 100%;
overflow-x: auto;
}

kbd {
padding: 1px 5px;
border: 1px;
border-bottom-width: 2px;
}

input, textarea, select, button {
max-width: 100%;
padding: 6px 10px;
border: 2px dashed var(--link-color);
border-radius: 0;
background: var(--background-color);
color: var(--text-color);
font: inherit;
}

textarea {width: 100%;}

button {cursor: pointer;}

.inline {width: auto;}

ul.blog-posts > li {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items: flex-end; /* This matters when the font sizes for title and date are different, but otherwise can be deleted */
margin: 2em 0;
border-bottom: 1.5px dotted var(--link-color);
}

ul.blog-posts > li > span + a,
ul.blog-posts > li > span:has(> i time) {
margin-bottom: -1.5px; /* Brings the dotted line up to baseline */
background-color: var(--background-color); /* Background color hides the dots behind text, change to your background color */
padding-left: .3em;
}

.footnote {
margin-top: 22px;
padding-top: 12px;
border-top: 2px dashed var(--link-color);
font-size: .65em;
}

.tags {
margin-top: 28px;
font-size: .85em;
}

.tags a {
display: inline-block;
margin: 0 8px 6px 0;
padding: 0 6px;
border: 1px solid currentColor;
text-decoration: none;
}

footer {
margin-top: 28px;
padding-top: 20px;
color: var(--text-color);
font-size: .75em;
text-align: center;
text-transform: uppercase;
letter-spacing: .08em;
}

/* --- REPLY VIA EMAIL --- */

.reply-email {
margin-block: 2em;
}

.reply-email {
margin-block: 1.5rem;
}

.reply-email a {
display: inline-block;
padding-block: 0.4em;
padding-inline: 1em;
font-size: calc(var(--font-scale) * 0.85);
font-weight: 500;
color: var(--link-color);
text-decoration: none;
background: color-mix(in srgb, var(--link-color), var(--background-color) 94%);
border: 1px solid color-mix(in srgb, var(--link-color), var(--background-color) 82%);
border-radius: 4px;
}

.reply-email a:focus-visible {
outline: none;
border-color: color-mix(in srgb, var(--link-color), transparent 55%);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--link-color), transparent 82%);
}

@media (hover: hover) {
.reply-email a:hover {
background: color-mix(in srgb, var(--link-color), var(--background-color) 90%);
border-color: color-mix(in srgb, var(--link-color), var(--background-color) 72%);
}
}

/* Heart divider */

.heart-divider-faded {
display: flex;
align-items: center;
text-align: center;
margin: 2rem 0;
}

.heart-divider-faded::before,
.heart-divider-faded::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(to var(--direction, right), transparent, #e8b4b8);
}

.heart-divider-faded::after {
--direction: left;
}

.heart-icon {
padding: 0 12px;
color: #c98a90;
font-size: 1.1rem;
line-height: 1;
}

/* Blog callout */

.blog-callout {
display: flex;
align-items: flex-start;
gap: 12px;
background-color: #f8fafc; 
border-left: 4px solid #ff748c;
padding: 16px 20px;
border-radius: 0 8px 8px 0;
margin: 24px 0;
font-family: inherit;
font-size: 0.95rem;
line-height: 1.5;
color: #334155;
}

.blog-callout .callout-icon {
font-size: 1.2rem;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}

.blog-callout .callout-content {
flex: 1;
}

/* Hides blog list page + upvote button */
.blog .tags,
.blog-posts .tags,
.page #upvote-form {
display: none !important;
}

<h3><a href="https://example.com" style="color:#ff748c; text-decoration-line:none;">example test</a></h3>