html, body {
    height: 100%;
    margin: 0;
    scrollbar-gutter: stable;
}

h1 {
    font-size: calc(1.375rem + 1.5vw);
}

h2 {
    font-size: 1.0em;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: #fff;
    border-bottom: 1px solid #eaeaea;
}


footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid #eaeaea;
    font-size: 14px;
    color: #777;
}

main {
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#loadingAnimation {
    display: none;
    float: left;
    width: 24px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #198754 94%, #0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%, #198754);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
    animation: l13 1s infinite linear;
}

#contextMessage{
    display: none;
}

@keyframes l13 {
    100% {
        transform: rotate(1turn)
    }
}

#FetchBox {
    display: block;
}

#InfoBox {
    width: 100%;
    display: none;
}

#postCover {
    width: 110px;
    height: 180px;
    object-fit: cover;
}

.postCover {
    width: 110px;
    height: 180px;
    object-fit: cover;
}

#captionBox {
    max-height: 180px;
}

.font1em {
    font-size: 1.0em;
}

.btnPaste {
    cursor: pointer;
}

.card-title-sm {
    font-size: 1.0em !important;
}

.card-read-more-sm {
    font-size: 0.9em !important;
}

.text-green {
    color: #198754;
}

.text-orange {
    color: orangered;
}

.text-black {
    color: black;
}

.text-red {
    color: darkred;
}

.text-purple {
    color: #E040FB;
}

.text-blue {
    color: #0A66C2;
}

.inline-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.inline-bullets li {
    position: relative;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 500;
}

.inline-bullets li:not(:last-child)::after {
    content: "•";
    position: absolute;
    right: -6px;
    color: #666;
}
.navigateLink {
    font-size: 0.9em !important;
}

.my-modal {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    display: none;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.25s ease;
}

.my-modal-content {
    text-align: center;
    background: #fff;
    width: 90%;
    max-width: 500px;
    margin: 120px auto;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    font-size: 0.9em !important;
    animation: fadeIn 0.25s ease;
}

.my-close {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 28px;
    cursor: pointer;
    color: #444;
}

.sharableUrlBox {
    width: 90%;
    display: inline-flex
}

@media (max-width: 992px) {
    main {
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    h1 {
        font-size: calc(1.375rem + 1.5vw);
    }
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1020px;
    }

    h1 {
        font-size: calc(1.375rem + 1.5vw);
    }
}