.h--tootshead img {
    width: 2em;
    border-radius: 50%;
    margin-right: 1rem;
    mix-blend-mode: multiply;
}
.h--tootshead--divider {
    margin-left: 9%;
    padding-left: 5%;
    border-top: 1px #cecece solid;
    margin-top: -11px;
    height: 1px;
    width: 18%;
}
.article .h--tootshead--description {
    font-family: "Josefin Sans", "Helvetica Neue", Hevetica;
    font-weight: 300;
    font-size: 1.6em;
    line-height: 0.8em;
    width: fit-content;
    margin-left: 17%;
    margin-top: 4px;
}

.toots {
    display: grid;
    grid-template-columns: repeat( auto-fill, minmax( 33ch, 1fr ) );
    row-gap: 1rem;
    margin-bottom: 5em;
    margin-left: 0.6rem
}

.toot {
    opacity: 0;
	animation: dissolve 0.7s ease-in 0.3s forwards;
    padding: 0 0.6rem 1rem;
}

@keyframes dissolve {
    0% {	opacity: 0;}
    100% {	opacity: 1;}
}

.toot:nth-child(2n) {
    background-image: linear-gradient(333deg, #e4e4e4, transparent);
    border-bottom-right-radius: 2rem;
    corner-bottom-right-shape: bevel;
}

.h--toot, .h--toot * {
    font-family: "Courier New", Courier, Monaco, monospace;
    font-size: 1.66rem;
}


h2 .h--toot a {
    display: block;
    white-space: nowrap;
    max-width: 10.82ch;
    text-overflow: ellipsis;
    overflow: clip;
}    

.toot h4 {
    word-wrap: break-word;
}

span.ellipsis { /* , .toots .xbtn, .toots a:has(:not(.preview)) */
    display: inline-block;
    max-width: 17ch;
    text-overflow: ellipsis;
    overflow: clip;
    white-space: nowrap;
    }

.toot :is(img,iframe,video) {
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}
.toot__content div {
    overflow: clip;
}
.toot .adult {
    filter: blur(32px) contrast(1.6) grayscale(0.6);
    zoom: 22%;
}

.toot a {
    margin-left: 0px !important;
    margin-right: 0px !important;
}
.toot a:has(.preview) {
    display: block;
}

.toot a > img.preview {
    display:block;
    opacity: 1;
    width:100%;
}

.article a[href*="youtu"]:has(.preview):before {
    display: block;
    position: relative;
    z-index: 11;
    margin-top: -22px;
    top: 22px;
    left: 11px;
}

a[rel="tag"],a[rel="user"] {
    background-color: snow;
    padding: 0 4px;
    border-radius: 3px;
}

#cover {
    transition: 0.3s all;
}
.canDrop {
    border: 8px;
    box-sizing: border-box;
    border-color: skyblue;
    border-style: groove;
}


@media (prefers-color-scheme: dark) {
    .h--tootshead img {
		mix-blend-mode: luminosity;
	}

    .toot:nth-child(2n) {
        background-image: linear-gradient(333deg, #444040, transparent);
    }
	a[rel="tag"], a[rel="user"]{
		background-color: steelblue;
		color: snow;
		text-shadow: #555 2px 1px 3px;
	}
	a[rel="tag"]:hover, a[rel="user"]:hover {
        color: snow;
		background-color: rgb(92 154 204);
	}
    .toot :is(img,iframe,video) {
        mix-blend-mode: normal;
    }
    

}