@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    body {
        --color-accent-emphasis: Highlight;
        --color-fg-on-emphasis: LinkText;
        --color-danger-fg: #cf222e;
        --color-border-default: #d0d7de;
        --color-fg-muted: #57606a;
        --color-fg-default: #24292f;
        --color-canvas-default: #ffffff;
        --color-canvas-overlay: #ffffff;
        --color-canvas-inset: #f6f8fa;
        --color-canvas-subtle: #f6f8fa;
        --color-border-muted: hsla(210, 18%, 87%, 1);
        --color-neutral-muted: rgba(175, 184, 193, 0.2);
    }

    .markdown-body {
        font-size: 16px;
    }

    .markdown-body video {
        width: 100%;
        height: 100%;
    }

    .markdown-body p, .markdown-body li {
        color: var(--color-fg-default);
    }

    .markdown-body a, .journals a {
        color: dodgerblue;
        word-wrap:break-word;
    }

    .markdown-body li {
        list-style: auto;
    }

    .markdown-body a:not([href]) {
        color: inherit;
        text-decoration: none
    }

    .markdown-body .absent {
        color: var(--color-danger-fg)
    }

    .markdown-body .anchor {
        float: left;
        padding-right: 4px;
        margin-left: -20px;
        line-height: 1
    }

    .markdown-body .anchor:focus {
        outline: none
    }

    .markdown-body p, .markdown-body blockquote, .markdown-body ul, .markdown-body ol, .markdown-body dl, .markdown-body table, .markdown-body pre, .markdown-body details {
        margin-top: 0;
        margin-bottom: 16px
    }

    .markdown-body hr {
        height: .25em;
        padding: 0;
        margin: 24px 0;
        background-color: var(--color-border-default);
        border: 0
    }

    .markdown-body blockquote {
        padding: 0 1em;
        color: var(--color-fg-muted);
        border-left: .25em solid var(--color-border-default)
    }

    .markdown-body blockquote > :first-child {
        margin-top: 0
    }

    .markdown-body blockquote > :last-child {
        margin-bottom: 0
    }

    .markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4, .markdown-body h5, .markdown-body h6 {
        margin-top: 24px;
        margin-bottom: 16px;
        font-weight: 600;
        line-height: 1.25;
        color: var(--color-fg-default);
    }

    .markdown-body h1 a, .markdown-body h2 a, .markdown-body h3 a, .markdown-body h4 a, .markdown-body h5 a, .markdown-body h6 a {
        color: var(--color-fg-default);
    }

    .markdown-body h1 .octicon-link, .markdown-body h2 .octicon-link, .markdown-body h3 .octicon-link, .markdown-body h4 .octicon-link, .markdown-body h5 .octicon-link, .markdown-body h6 .octicon-link {
        color: var(--color-fg-default);
        vertical-align: middle;
        visibility: hidden
    }

    .markdown-body h1:hover .anchor, .markdown-body h2:hover .anchor, .markdown-body h3:hover .anchor, .markdown-body h4:hover .anchor, .markdown-body h5:hover .anchor, .markdown-body h6:hover .anchor {
        text-decoration: none
    }

    .markdown-body h1:hover .anchor .octicon-link, .markdown-body h2:hover .anchor .octicon-link, .markdown-body h3:hover .anchor .octicon-link, .markdown-body h4:hover .anchor .octicon-link, .markdown-body h5:hover .anchor .octicon-link, .markdown-body h6:hover .anchor .octicon-link {
        visibility: visible
    }

    .markdown-body h1 tt, .markdown-body h1 code, .markdown-body h2 tt, .markdown-body h2 code, .markdown-body h3 tt, .markdown-body h3 code, .markdown-body h4 tt, .markdown-body h4 code, .markdown-body h5 tt, .markdown-body h5 code, .markdown-body h6 tt, .markdown-body h6 code {
        padding: 0 .2em;
        font-size: inherit
    }

    .markdown-body h1 {
        padding-bottom: .3em;
        font-size: 2em;
        border-bottom: 1px solid var(--color-border-muted)
    }

    .markdown-body h2 {
        padding-bottom: .3em;
        font-size: 1.5em;
        border-bottom: 1px solid var(--color-border-muted)
    }

    .markdown-body h3 {
        font-size: 1.25em
    }

    .markdown-body h4 {
        font-size: 1em
    }

    .markdown-body h5 {
        font-size: .875em
    }

    .markdown-body h6 {
        font-size: .85em;
        color: var(--color-fg-muted)
    }

    .markdown-body summary h1, .markdown-body summary h2, .markdown-body summary h3, .markdown-body summary h4, .markdown-body summary h5, .markdown-body summary h6 {
        display: inline-block
    }

    .markdown-body summary h1 .anchor, .markdown-body summary h2 .anchor, .markdown-body summary h3 .anchor, .markdown-body summary h4 .anchor, .markdown-body summary h5 .anchor, .markdown-body summary h6 .anchor {
        margin-left: -40px
    }

    .markdown-body summary h1, .markdown-body summary h2 {
        padding-bottom: 0;
        border-bottom: 0
    }

    .markdown-body ul, .markdown-body ol {
        padding-left: 2em
    }

    .markdown-body ul.no-list, .markdown-body ol.no-list {
        padding: 0;
        list-style-type: none
    }

    .markdown-body ol[type="1"] {
        list-style-type: decimal
    }

    .markdown-body ol[type=a] {
        list-style-type: lower-alpha
    }

    .markdown-body ol[type=i] {
        list-style-type: lower-roman
    }

    .markdown-body div > ol:not([type]) {
        list-style-type: decimal
    }

    .markdown-body ul ul, .markdown-body ul ol, .markdown-body ol ol, .markdown-body ol ul {
        margin-top: 0;
        margin-bottom: 0
    }

    .markdown-body li > p {
        margin-top: 16px
    }

    .markdown-body li + li {
        margin-top: .25em
    }

    .markdown-body dl {
        padding: 0
    }

    .markdown-body dl dt {
        padding: 0;
        margin-top: 16px;
        font-size: 1em;
        font-style: italic;
        font-weight: 600
    }

    .markdown-body dl dd {
        padding: 0 16px;
        margin-bottom: 16px
    }

    .markdown-body table {
        display: block;
        width: 100%;
        width: max-content;
        max-width: 100%;
        overflow: auto
    }

    .markdown-body table th {
        font-weight: 600
    }

    .markdown-body table th, .markdown-body table td {
        padding: 6px 13px;
        border: 1px solid var(--color-border-default)
    }

    .markdown-body table tr {
        background-color: var(--color-canvas-default);
        border-top: 1px solid var(--color-border-muted)
    }

    .markdown-body table tr:nth-child(2n) {
        background-color: var(--color-canvas-subtle)
    }

    .markdown-body table img {
        background-color: transparent
    }

    .markdown-body img {
        max-width: 100%;
        box-sizing: content-box;
        margin: 0 auto;
        background-color: var(--color-canvas-default)
    }

    .markdown-body .emoji {
        max-width: none;
        vertical-align: text-top;
        background-color: transparent
    }

    .markdown-body span.frame {
        display: block;
        overflow: hidden
    }

    .markdown-body span.frame > span {
        display: block;
        float: left;
        width: auto;
        padding: 7px;
        margin: 13px 0 0;
        overflow: hidden;
        border: 1px solid var(--color-border-default)
    }

    .markdown-body span.frame span img {
        display: block;
        float: left
    }

    .markdown-body span.frame span span {
        display: block;
        padding: 5px 0 0;
        clear: both;
        color: var(--color-fg-default)
    }

    .markdown-body span.align-center {
        display: block;
        overflow: hidden;
        clear: both
    }

    .markdown-body span.align-center > span {
        display: block;
        margin: 13px auto 0;
        overflow: hidden;
        text-align: center
    }

    .markdown-body span.align-center span img {
        margin: 0 auto;
        text-align: center
    }

    .markdown-body span.align-right {
        display: block;
        overflow: hidden;
        clear: both
    }

    .markdown-body span.align-right > span {
        display: block;
        margin: 13px 0 0;
        overflow: hidden;
        text-align: right
    }

    .markdown-body span.align-right span img {
        margin: 0;
        text-align: right
    }

    .markdown-body span.float-left {
        display: block;
        float: left;
        margin-right: 13px;
        overflow: hidden
    }

    .markdown-body span.float-left span {
        margin: 13px 0 0
    }

    .markdown-body span.float-right {
        display: block;
        float: right;
        margin-left: 13px;
        overflow: hidden
    }

    .markdown-body span.float-right > span {
        display: block;
        margin: 13px auto 0;
        overflow: hidden;
        text-align: right
    }
}

@layer components {

    @keyframes morph {
        0% {
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        }

        50% {
            border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        }

        100% {
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        }
    }

    .animation-morph {
        animation: morph 8s ease-in-out infinite 1s
    }

    .width-550px {
        width: 550px;
    }

    .page-mqx-width {
        @apply max-w-[1300px];
    }

    .text-767676 {
         @apply text-[#767676];
    }
}


.item-name
{
    padding-left: 1rem;
    flex: 1 1 0%;
}

.w-27{
    width: 27rem;
}
.h-27{
    height: 27rem;
}

.w-36{
    width: 36rem;
}
.h-36{
    height: 36rem;
}

.lg-zone-max-w{
    max-width: 800px;
}
@media (min-width: 1024px) {
    

}
@media (min-width: 1600px) {
    .lg-left-none{
        padding-left: 0;
    }
    .lg-zone-max-w{
        max-width: 900px;
    }
    .moment-media-sep{
        width: 15%;  
        height: 0   ;
        padding-bottom: 15%; /* 关键就在这里 */
        position: relative;
        margin: 1%;
    }
    .moment-media-sep img{
        position:absolute;
        width:100%;
        height:100%;
        object-fit: cover;
        cursor: zoom-in;
        }
    .moment-media-sep video{
        position:absolute;
        width:100%;
        height:100%;
        object-fit: cover;
    }
}
.px-8{
padding-left: 2rem;
padding-right: 2rem;
}
.py-8{
padding-top: 2rem;
padding-bottom: 2rem;
}
.pb-8{
padding-bottom: 2rem;
}

.moment-media-area{
display: flex;
flex-wrap: wrap;

}
.moment-media{
width: 23%;  
height: 0   ;
padding-bottom: 23%; /* 关键就在这里 */
position: relative;
margin: 1%;

}

.moment-media img{
position:absolute;
width:100%;
height:100%;
object-fit: cover;
cursor: zoom-in;
}
.moment-media video{
position:absolute;
width:100%;
height:100%;
object-fit: cover;
}

.moment-media-sep{
    width: 23%;  
    height: 0   ;
    padding-bottom: 23%; /* 关键就在这里 */
    position: relative;
    margin: 1%;
}
.moment-media-sep img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit: cover;
    cursor: zoom-in;
    }
.moment-media-sep video{
    position:absolute;
    width:100%;
    height:100%;
    object-fit: cover;
}

/* .moment-text-area{
} */
.text-content{
color: black;
font-size: 20px;
}
.text-others{
color: #bcc3ce !important;
font-size: 15px;
}