#width-container {
    max-width: 1000px;
}

h1 {
    text-align: center;
    margin-top: 0;
}

article h3 {
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: pink 2px solid;
    border-image: linear-gradient(90deg, var(--bgpink) 0%, var(--pink-trans) 40%, var(--purple) 75%, var(--blue-trans) 100%) 30;
}

.special {
    color: var(--darkerrose);
    text-decoration: underline dotted 1px var(--pink);
    text-underline-offset: 3px;
}

img {
    max-width: 100%;
}

em { /* used only for "hellomei" */
    font-family: "Source Serif";
    font-weight: 300;
    color: var(--darker);
} 

/** the base sec **/

/*
section {
    background-color: white;
    margin-top: 0;
    margin: 1em 0;
    width: 100%;
    padding: 1em;
    border-radius: 10px;
    box-shadow: 2px 2px var(--shadow);
    break-inside: avoid-column;
    transition: 0.3s;
    } */

/** batch of sections **/

.flex {
    display: flex;
    flex-direction: row;
    column-gap: 1em;
}

/* row 1 */

#r1 {
    margin-bottom: 1.5em;
}

#intro {
    width: calc(60% - 0.5em);
}

#r1extra {
    width: calc(40% - 0.5em);
}

#specs p {
    margin: 0.3em auto;
}

#specs {
    margin: 1em 0;
    padding: 1em;
    border: 1px dashed var(--silhouette);
}

#r1extra nav a {
    display: block;
    background-color: var(--bgpink);
    color: var(--darkerrose);
    margin: 0.2em auto;
    padding: 4px;
    text-decoration: none;
    &:hover {
        background-color: var(--pale);
        color: var(--dots);
    }
}

/* about the site */

#abt-site {
    margin-top: 2em;
    justify-content: space-between;
    margin-bottom: 1.5em;
}

#philosophy {
    width: calc(60% - 1em);
}
#colophon {
    width: calc(40% - 1em);
    padding: 0.7em;
    border: 1px solid var(--silhouette);
}

#lists {
    flex-direction: row-reverse;
    justify-content: space-between;
}

#permissions ul {
    padding: 0 1em;
}

#permissions {
    width: calc(70% - 1em);
}
#todos {
    width: calc(30% - 1em);
}

#todos li {
    list-style-type: "▢ ";
    color: var(--dustyrose);
    font-size: 90%;
    margin-left: -0.5em;
}

/** essential mei **/

#essential summary {
    font-size: 1.1em;
}

#essential summary:hover {
    color: palevioletred;
}

#essential details div {
    margin-left: 1em;
    padding: 0;
    padding-left: 1em;
    border-left: 2px solid palevioletred;
}

/** charas **/

.charas {
    display: flex;
    justify-content: space-evenly;
    margin: 1em 0;
}

.charas img {
    max-width: calc(15% - 1em);
    border-radius: 20px;
}

/* tags for todos */

.faketag {
    display: inline-block;
    padding: 0 5px;
    border-radius: 13px;
    font-family: "Source Sans";
    font-size: 0.8em;
    &:hover {
        transform: translateY(-1px);
        opacity: 0.9;
    }
}

.populate { background-color: #fccbbb; color: #b34b42 }
.revamp { background-color: #fccdd6; color: #ac495c }
.edit { background-color: #c5dffc; color: #3e56b5 }
.newpage { background-color: #a7e2ed; color: #266772 }
.other { background-color: #d6ceea; color: #57467d }

@media only screen and (max-width: 800px) {

    .flex,
    #lists {
        flex-direction: column;
        column-gap: 0;
    }

    .charas {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 0.3em;
        row-gap: 0.3em;
    }

    .charas img {
        max-width: calc(25% - 1em);
    }

    #intro,
    #r1extra,
    #philosophy,
    #colophon,
    #permissions,
    #todos {
        width: 100%;
    }
}