Potion Cards

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Spartan:wght@400;600&display=swap" rel="stylesheet">

<style>
    @keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
        opacity: 0;
      }
      100% {
        transform: translateX(0);
        opacity: 1;
      }
    }
    :root {
        --bg-color: #ffffff;
        --fg-color: #373530;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
        counter-reset: section;
    }

    .notion-frame{
        background: #eaeaea;
    }

    .notion-page {
        width: 840px;
        padding: 48px;
        border-radius: 0px;
        background: #fff;
    }

    .notion-title{
        display: none;
    }

    .notion-h1{
        margin-top: 54px !important;
        font-family: 'Playfair Display', serif;
        font-size: 39px;
        width: auto;
        margin-left: 0px;
        font-weight: bold;
        margin-bottom: 0px;
        animation: 0.5s ease-out 0s 1 slideInFromLeft;
        line-height: 54px;
    }

    .notion-h2 {
        font-size: 28px;
        margin-top: 1em;
        margin-bottom: 14px;
        width: auto;
        padding-right: 36px;
        margin-left: -64px;
        padding-left: 64px;
        padding-top: 16px;
        padding-bottom: 16px;
        background: #fff201;
    }

    .notion-h1 .notion-h-title {
        padding-bottom: 8px;
        display: inline;
    }

    .notion-h3 .notion-h-title {
        background: linear-gradient(180deg, transparent 64%, #fff201 64%);
        display: inline;
    }

    .notion-header{
        height: 64px;
        background: transparent;
    }

    .notion-header .breadcrumb {
        font-size: 16px;
        background: #fff201 !important;
        padding: 18px;
        color: #000 !important;
        font-family: 'Playfair Display', serif;
        transition: 250ms;
        border-radius: 0px;
        font-weight: bold;
    }

    .notion-header .breadcrumb:hover {
        background: #000 !important;
        color: #fff201 !important;
    }

    .notion-callout{
        transform: scale(0.95);
        transition: transform 250ms;
        border-radius: 0px;
        border: 0px;
        background: #ffffff94;
        box-shadow: 5px 5px 10px #e0e0e0,
             -5px -5px 10px #ffffff;
        width: 94%;
    }

    .notion-callout:hover{
        transform: scale(1);
    }

    .notion-callout-text {
        font-size: 14px;
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
    }

    .notion-callout-text a{
        font-size: 14px;
        font-weight: bold;
        line-height: 48px;
        color: #050505;
    }

    .notion-callout .notion-page-icon {
        margin-top: 12px;
    }

    .notion-bookmark{
        border: none;
        border-radius: 0px;
        transform: scale(0.95);
        transition: transform 250ms;
        background: #ffffff94;
        box-shadow: 5px 5px 10px #e0e0e0,
             -5px -5px 10px #ffffff;
        width: 94%;
        margin-bottom: 16px;
    }

    .notion-bookmark:hover{
        transform: scale(1);
    }

    .notion-bookmark-title{
        font-size: 16px;
        font-weight: bold;
        margin-top: 8px;
        margin-bottom: 12px;
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
    }

    .notion-bookmark-image {
        flex: 1 1 64px;
    }

    .notion-bookmark-description {
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
        margin-bottom: 12px;
    }

    .notion-bookmark-link>img {
        width: 32px;
        height: 32px;
        min-width: 32px;
        margin-right: 6px;
    }

    .notion-bookmark-link>div {
        margin-top: 8px;
        margin-left: 4px;
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
    }

    .notion-hr {
        width: 113%;
        border: none;
        margin-bottom: 24px;
        margin-top: 48px;
        height: 100px;
        background: #eaeaea;
        margin-left: -48px;
        border-top: 8px solid #fff201;


    }

    .notion-hr::before{
        content: counter(section);
        counter-increment: section;
        height: auto;
        width: 64px;
        background: #fff201;
        color: #000;
        padding:16px 20px;
        text-align: center;
        position: absolute;
        right: -48px;
        margin-top: -32px;
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
        font-size: 14px;
        font-weight: bold;
    }

    .notion {
        font-size: 16px;

    }

    .notion-text{
        font-size: 16px;
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
        line-height: 30px;
        margin-bottom: 18px;
    }

    .notion-list li{
        font-size: 16px;
        font-family: 'Spartan', sans-serif;
        letter-spacing: -0.02em;
        line-height: 30px;
        margin-bottom: 18px;
    }

    .notion-text a{
        font-weight: bold;
        border-bottom: 3px solid #1DA1F2;
        color: #1DA1F2;
        text-decoration: none !important;
    }

    .notion-text a:hover{
        border-bottom: 3px solid #1DA1F2 !important;
        text-decoration: none !important;
    }

    .notion-list li a{
        font-weight: bold;
        border-bottom: 3px solid #1DA1F2;
        color: #1DA1F2;
        text-decoration: none !important;
    }

    .notion-list li a:hover{
        border-bottom: 3px solid #1DA1F2 !important;
        text-decoration: none !important;
    }

    .notion-quote {
        font-size: 1.2em;
        font-family: 'Playfair Display', serif;
        font-weight: 400;
        line-height: 1.6em;
        margin-top: 16px;
        margin-bottom: 16px;
    }

    .notion-toggle>summary {
        font-family: 'Playfair Display', sans-serif;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 16px;
    }

    .notion-page-link{
        display: none;
    }


    .notion-title,
    .notion-h-title {
        font-family: 'Playfair Display', serif;
    }

    .notion-collection-card-body {
        background: #fafafa;
    }

    .notion-table-of-contents {
        width: 160px;
        display: block;
        position: fixed;
        left: 24px;
        bottom: 16px;
        font-family: 'Spartan', sans-serif;
        font-weight: bold;
        z-index: 99;
        -webkit-mask-image: linear-gradient(to right, black 50%, transparent 100%);
        mask-image: linear-gradient(to right, black 50%, transparent 100%);
        overflow-y: scroll;
    }

    .notion-table-of-contents-item {
        font-size: 12px;
    }

    @media only screen and (max-width: 1216px) {
        .notion-table-of-contents {
            display: none;
        }
    }

    @media only screen and (max-width: 840px) {
    .notion-page {
        padding: 24px !important;
        border: none !important;
    }
    .notion-h1 {
        margin-left: -12px;
    }
    .notion-page-icon-wrapper{
        z-index: 99;
        margin-bottom: 16px;
    }
    .notion-hr {
        width: 128%;
    }


    }
</style>