:root {
    font-family: 'Inter', sans-serif;
}

@supports (font-variation-settings: normal) {
    :root {
        font-family: 'Inter var', sans-serif;
    }
}

body {
    font-family: 'Inter';
    color: #222222;
    background-color: #f6f2f0;
}

p {
    font-size: 1.3rem;
    color: #000000;
    letter-spacing: -0.01rem;
    padding-bottom: 0.7rem;
}

h1 {
    font-size: 5rem;
    font-weight: 800;
    padding-bottom: 0.8rem;
    line-height: 5rem;
}

h2 {
    font-size: 2.8em;
    font-weight: 700;
    padding-top: 0.8rem;
}

h3 {
    font-size: 1.8em;
    font-weight: 700;
}

#category {
    font-size: 1.5rem;
    font-weight: 600;
    color: #e6a9d2;
    letter-spacing: -0.01rem;
}

a:link {
    text-decoration: none;
}

a:hover {
    color: #b383a3;
}

#subtitle {
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: -0.05rem;
}

#description {
    font-size: 1rem;
    font-style: oblique;
}

#BlogInfo {
    font-size: 1rem;
    font-style: oblique;
}

#tags {
    font-size: 1rem;
    font-style: oblique;
    text-align: center;
}

.bgNappingYellow {
    background-color: #e8cea0 !important;
    color: #222222 !important;
    font-weight: 600 !important;
    outline-color: #e8cea0 !important;
}

.customBLACK {
    color: #222222 !important;
}

.customPINK {
    color: #e6a9d2 !important;
}

.customBOLD {
    font-weight: 700 !important;
}

.customSTRIKETHROUGH {
    text-decoration: line-through !important;
}

.customITALICS {
    font-style: oblique !important;
}


/* Popup container */
        .popup {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

            /* The actual popup (appears on top) */
            .popup .popuptext {
                visibility: hidden;
                width: 20em;
                background-color: #555;
                color: #fff;
                text-align: left;
                font-size: 0.8em;
                padding: 9px;
                border-radius: 6px;
                position: absolute;
                z-index: 1;
                bottom: 125%;
                left: 50%;
                margin-left: -80px;
            }

                /* Popup arrow
                .popup .popuptext::after {
                    content: "";
                    position: absolute;
                    top: 100%;
                    left: 10%;
                    margin-left: -5px;
                    border-width: 5px;
                    border-style: solid;
                    border-color: #555 transparent transparent transparent;
                }*/

            /* Toggle this class when clicking on the popup container (hide and show the popup) */
            .popup .show {
                visibility: visible;
                -webkit-animation: fadeIn 1s;
                animation: fadeIn 1s
            }

        /* Add animation (fade in the popup) */
        @-webkit-keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }