@font-face {
    font-family: "Manrope";
    src: url("Manrope[wght].woff2") format('woff2');
    font-weight: 125 950;
    font-stretch: 75% 125%;
    font-style: normal;
}

:root {
    --bg-1: #dad4c9;
    --bg: #eeeeee;
    --fg-1: hsl(154, 0%, 40%);
    --fg: #1c2420;

    --space-unit: 1rem;
    --space-xxs: calc(0.25 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --space-xl: calc(3.25 * var(--space-unit));
    --space-xxl: calc(5.25 * var(--space-unit));

    --h1: 3.052rem;
    --h2: 2.441rem;
    --h3: 1.953rem;
    --h4: 1.563rem;
    --h5: 1.25rem;
    --small: 0.8rem;
}

body, html {
    margin: 0;
    padding: 0;
    font-size: 100%;
    background-color: var(--bg);
    color: var(--fg);
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

main {
    margin: 30px auto;
    width: clamp(200px, 100%, 800px);
}

/* text */

.h1 { font-size: var(--h1); }
.h2 { font-size: var(--h2); }
.h3 { font-size: var(--h3); }
.h4 { font-size: var(--h4); }
.h5 { font-size: var(--h5); }
.small { font-size: var(--small); }

/* card */

.card-accent {
    padding: var(--space-md);
    margin: var(--space-md);
    margin-top: 0;
    background-color: var(--bg-1);
    border-radius: var(--space-md);
}

/* post */

.post-link {
    display: block;
    text-decoration: none;
    color: currentColor;
    margin-bottom: var(--space-lg);
}

.post-link .user {
    font-weight: 500;
}

.post-link .date {
    font-weight: normal;
    color: var(--fg-1);
}

.post-link .title {
    display: block;
    font-size: var(--h4);
    line-height: 0.9;
}

.post-link .title::after {
    display: inline;
    content: " ->";
    color: var(--fg-1);
}

/* fortune */

@keyframes fortune-drop {
	from {
		opacity: 0;
        visibility: hidden;
        transform: translateY(-12px);
	}
	to {
		opacity: 1;
        visibility: visible;
        transform: translateY(0);
	}
}

.fortune {
    animation: fortune-drop 0.3s cubic-bezier(0.46,0.03,0.52,0.96) forwards;
    display: block;
    margin-bottom: var(--space-lg);
    font-size: var(--h5);
}

#fortune-name {
    color: var(--fg-1);
}

/* all */

* {
    box-sizing: border-box;
}

p {margin-bottom: 1rem;}

h1, h2, h3, h4, h5 {
  margin: var(--space-sm) 0 var(--space-xs);
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  line-height: 1.3;
}

h1 {
  margin-top: 0;
  font-size: var(--h1);
}