/*begin body*/
body { 
    background: url(fabrish4.jpg);
    background-size: 374px; background-position: center; 
}
.background {  
  background: url(rac5.png); 
  opacity: .7;
  background-position: center;
}
#wrapper { 
  width: 100%; 
  flex-direction: column; 
  z-index: 3; 
  color: #ebaacc; 
}

/*begin header*/

header { 
    display: flex; 
    margin: 10px; 
    justify-content: center; 
} 
header span {
    position: relative;
    color: #e8cff6;
    font-size: 36px;
    font-family: Times;
    margin-top: 36px;
    z-index: -1;
}
header span b {
    font-family: Fortalesia; 
    font-size: 1.4em; 
}
header img {
    width: 160px;
    margin-top: 20px;
    image-rendering: optimizequality;
}.
#title {
    text-align: center;
    letter-spacing: -7px;
    word-spacing: 0px;
}

#dir span {
    position: relative;
}


nav span {
    display: block; 
}

/*begin mane*/
.avataru {
    background: #0f0102; 
}
.pf::first-letter {
    font-family: modfrak !important;
}
.p2::first-letter {
    font-family: warnock;
    font-size: 24px; 
}
p {
    text-align: justify; 
} 

.sep2 {
    margin: 12px; margin-top: 14px; 
}

.sub {
    display: block; 
    padding-left: 30px !important; 
    border-left: 1px solid #610c20 !important; 
    margin-left: 16px; 
}

.desc {
    margin-bottom: 20px; 
    color: #9c1f3d; 
}
#mezzo {
    display: flex; 
}
#mezzo > aside {
    width: 120px; 
    position: relative; 
    box-sizing: border-box;
    margin: 2.7%;
    background: url(OL6.jpg);
    border: 4px double #1c0102;
    max-height: 6600px;
    overflow: hidden;
    background-size: 120px; 
    background-position: center top;
}
/* #mezzo > aside div {
    background: url(https://wishihadthat.com/images/products/detail/OL153.1.jpg); 
    width: 100%;
    height: 100%;
    position: absolute; 
    mix-blend-mode: soft-light;
    opacity: .32;
    background-position: center top;
    background-size: 120px;
} */
#mezzo > aside span {
    display: block; width: 100%; text-align: center; 
    font-size: 40px;
    font-family: moderne fraktur;
    padding: 77.2px 0px; 
    color: #50111c;
    z-index: 2;
    position: relative;
}
#mezzo > aside span:nth-of-type(3n - 1) {
    color: #815c78; 
}
main { 

}
a:hover, span a:nth-of-type(1):hover::before, .ke:hover::after {
    color: #9d6f9c !important; 
}
a:hover {
    text-decoration: underline;
}
#hov {
    color: #9d6f9c;
    text-decoration: underline;
}
#greetings b {
    font-family: modfrak;
    display: inline-block;
    scale: 2; 
}
#greetings i {
    font-size: 18px; 
}
#greetings a {
    text-decoration: underline; 
}
#firstnav img, #secondnav img {
    width: 240px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
    margin-bottom: 10px; 
}
#dir span b {
    font-style: normal;
    font-family: modfrak;
    display: inline-block;
    position: absolute;
    left: -1.1em;
    scale: 1.9;
}

#dir {
    padding: 5px; 
    display: flex; 
    color: #ebaacc; 
    line-height: 25px; 
    flex: 1;
    max-height: min-content;
} 

#dir aside {
    width: calc(100%/3); 
    display: block;
    padding: 10px; 
    margin: 7px; 
    position: relative; 
}
#dir section {
    flex-direction: column; 
}
.sep2 {
    color:#7e0f29;
}
#dir span a {

}
a {
    padding: 5px 0px; 
}
h2 {
    margin: 5px 0px;
    margin-top: 24px;
    font-family: Warnock;
    font-weight: normal;
    font-size: 24px;
    font-variant: small-caps;
    border-bottom: 1px solid #610c20;
    color: #7e0f29;
}
h3 {
    color: #7e0f29;
    font-variant: all-petite-caps;
    text-align: center;
    margin: 10px;
    font-size: 22px;
    font-weight: normal;
}
h4 {
    font-variant: petite-caps; 
    margin: 0px; 
    color: #8b6eae; 
    letter-spacing: 3px; 
    border-bottom: 4px double;
    width: fit-content;
    padding-right: 24px; 
}
#dir h1 {
    margin: 10px;
    padding: 50px 0px;
    margin-bottom: 0px; 
    text-align: center; 
    font-weight: normal;
    font-size: 30px; 
    font-family: Times; 
    color: #e8cff6; 
    font-variant: small-caps;
}
#dir h1::first-letter {
    font-family: fortalesia;
    font-weight: bold; 
    font-size: 1.3em;
}
#greetings {
    padding: 10px 300px;
    width: 90%; 
    margin: auto; 
    text-align: left; 
    box-sizing: border-box; 
    background: #0c0103;
    border: 1px solid #280106;
}

/*begin footer, or something*/

footer {
    margin: 30px 100px; 
    background: #0f0102; 
    border: 4px double #2c0004; 
    box-sizing: border-box; 
    color: #e8cff6;
}

/* other */

#secondnav {
    display: none; 
}

@media screen and (max-width: 1488px) {
    #mezzo > aside:nth-of-type(2) {
        display: none; 
    }
    #wrapper {
        width: 100% !important; 
    }
}

@media screen and (max-width: 1080px) {
    #wrapper {
        width: 90% !important;  
        margin: 0px; 
    }
    .lyud {
        justify-content: left; 
    }
    #mezzo > aside {
        margin: 0px; 
        margin-right: 10px; 
        width: max-content; 
    }
    #dir {
        display: block !important; 
    }
    #dir aside {
        width: 100% !important; 
    }
    #greetings {
        width: 100%; 
        padding: 10px; 
    }
    header span {
        display: none; 
    }
    #greetings p {
        text-align: left; 
    }
    #firstnav {
        display: none; 
    }
    #secondnav {
        display: block; 
    }
}
#dir p {
    display: inline-block !important;
    color: #860a27;
    font-variant: small-caps;
    margin: 0px;
    margin-left: 3px;
    font-weight: bold;
}

.kk {
    color: #8abf99;
}
.kkl {
    color: #cd7ab8; 
}
.parts {
    display: block;
}
#dir span .parts a:nth-of-type(2n) {
    color: #89c47c; 
}
.parts a {
    display: inline-block; 
}
.parts a {
    color: #9a79ba; 
    padding: 0px 12px;
    margin-bottom: 3px; 
    text-align: center;
    border: 1px solid #330007;
    background: #120104;
}
.parts a:hover {
    border: 1px solid #5a020b;
}
.ms {
    margin: 5px 0px; 
}
.ms > span {
    border-left: 4px double; 
    padding-left: 9px; 
}
.ms > span, .ms > hr, h4 {
    border-color: #4b2c57;
}
.ms > span:first-of-type {
    padding-top: 5px; 
}
.ms > span:last-of-type {
    /*padding-bottom: 12px; */
}
.ms > hr {
    height: 0px;
    width: 20%;
    color: transparent;
    margin: 0px;
    display: none; 
    border-top: 4px double #4b2c57; 
}
.ms > span > span {
    margin-left: 15px; 
}

.kk b {
    color: #70a17e !important;
}

.kx {
    color: #860a27 !important;
}
.ks { 
    color: #9e7ab7; 
}
.kf > a:nth-of-type(1), .kf b, .kf > a::before {
    color: #8ab05c; 
}
.ki > a:nth-of-type(1), .ki b, .ki > a::before {
    color: #e75736;
}
.ki b {
    color: #ad452d !important; 
}
.kt > a:nth-of-type(1), .kt b, .kt > a::before {
    color: #a491bf;
}
.kt {
    padding: 4px;
    background: #0f0102;
    border: 4px double #332c41;
    margin: 5px 0px;
    text-align: center; 
}
.kr > a:nth-of-type(1), .kr b, .kr > a::before  {
    color: #d8aa79;
}
.krp a::before {
    color: #c5a275;; 
}
.kr b {
    color: #d8aa79 !important;
}

.kp > a:nth-of-type(1), .kp > b:nth-of-type(1), #greetings .kp {
    color: #e8cff6;
}

.kg {
    color: #e1d17b; 
}
.kg b {
    color: #ccbe70;
}
.kq::after {
    content: " lhc";
    font-variant: super;
    font-weight: bold; 
    font-style: italic;
    font-size: 18px; 
}
.ke::after {
    content: " ehc ♔";
    color: #e8cff6; 
    font-weight: bold;
    font-size: 18px; 
    font-variant: super small-caps;
}
.ka {
    color: #dc4292; 
}
.re {
    color: #ebaacc; /* same as WRAPPER BECAUSE CSS IS HARD */
}
#dir span a:nth-of-type(2n) {
    color: #e679ac; 
    font-variant: small-caps;
}
span > a:nth-of-type(2n + 1) {
    font-variant: small-caps;
}
span a:nth-of-type(1) {
    font-variant: normal; 
}
span > a:nth-of-type(3) {
    color: #d89eda; 
}
span > a:nth-of-type(5) {
    color: #d89eda; 
}
#dir .ks a:nth-of-type(even) {
    color: #a95eb3; 
}


.kka {
    color: #b0dad3;
}
.kka a:nth-of-type(1) { font-variant: small-caps; }
.krp a:nth-of-type(1) { font-variant: small-caps; }
.krp {
    padding: 4px;
    border: 4px double #280609;
    color: #dfc19e;
    margin: 5px;
    margin-left: 0px; 
    background: #0f0102;
}
.krp b {
    margin-left: -3px; 
}

.ks a:nth-of-type(1)::before, span a:nth-of-type(1)[href*="youtube.com"]::before {
    color: #7c609d; 
    font-variant: small-caps;
}
span a:nth-of-type(1)[href*="youtube.com"]::before {
    content: "(yt) ";
}
.ks > a:nth-of-type(1)[href*="tumblr.com"]::before {
    content: "(tumblr) ";
}
span a:nth-of-type(1)[href*="/x.com"]::before {
    content: "(twt) ";
}
span a:nth-of-type(1)[href*="?list="]::before {
    content: "(yt list) ";
}
span a:nth-of-type(1)[href*="odysee.com"]::before {
    content: "(odysee) ";
}
span a:nth-of-type(1)[href*="altcensored"]::before {
    content: "(altcensored) ";
}
span a:nth-of-type(1)[href*="medium.com"]::before {
    content: "(medium) ";
}
span a:nth-of-type(1)[href*="github.com"]::before {
    content: "(github) ";
    font-variant: small-caps;
}

#dir span > i {
    color: #9c1f3d; 
    font-variant: normal;
}
#dir span > i::before {
    content: " - "; 
}



/* 'CHIVES */
span a::before {
    color: #b286b0; 
}
span > a:nth-of-type(1)[href*="archive"]::before {
    font-variant: small-caps;
}
span > a:nth-of-type(1)[href*="archive"]::after {
    content: "*";
    color: #ef174a;
    padding-left: 2px;
}

span > a:nth-of-type(1)[href*="archive.org"]::before {
    content: "(ia) ";
}
span > a:nth-of-type(1)[href*="archive.is"]::before {
    content: "(.is) ";
}
span a:nth-of-type(1)[href*="archive.md"]::before {
    content: "(.md) ";
}
span a:nth-of-type(1)[href*="archive.ph"]::before {
    content: "(.ph) ";
}
.kk a:nth-of-type(1)[href*="archive"]::before {
    color: #5fab8b; 
}







.kka a:nth-of-type(1)[href*=".pdf"]::before {
    content: "pdf ";
    font-variant: small-caps;
    position: relative;
    top: -1px; 
}

#dir .sub.krp {
    margin-left: 16px; 
}