/** used for pages that use the layouts beginning with main **/

* {
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
}

#width-container {
    max-width: 850px;
    margin: 1em auto;
    padding: 1em; 
}

/** header **/

header {
    margin: 1em 0;
} 

#masthead {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    margin-bottom: 1em;
    padding: 0 0.5em 0 0;
}

#masthead a {
    text-decoration: none;
    color: unset;
    &:hover {
        transform: translateY(-2px);
        filter: brightness(1.05);
    }
}

#pagetitle {
    font-size: 2.3em;
    transition: 0.2s;
    line-height: normal;
    font-family: "Source Serif";
    font-weight: 200;
    font-style: italic;
    width: calc(min-content + 2em);
    padding: 0 5px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 30%,rgba(255,200,200,0.4) 31%, rgba(255,200,200,0.4) 75%, rgba(255,255,255,0) 76%);
    &::after {
        content: "*:･ﾟ+₊*ﾟ✉";
        font-family: "Roboto Mono";
        font-size: 60%;
        font-style: normal;
        background: linear-gradient(90deg, var(--vibrant) 0%, var(--lite) 50%, var(--blue) 100%);
        color: transparent;
        background-clip: text;
    }
}

header #mail {
    display: block;
    background: url(/images/assets/decorative/v3_headers/mailbox1.png);
    width: 61px;
    height: 60px;
    image-rendering: pixelated;
    &:hover {
        background: url(/images/assets/decorative/v3_headers/mailbox2.png);
    }
}


/** navigation **/

header nav {
    display: flex;
    flex-wrap: wrap;
    row-gap: 5px;
    column-gap: 5px;
    justify-content: center;
}

.dropdown button {
    border-image: url(/images/assets/border/lace.png) 8 fill round;
    border-width:7px;
    border-style:solid;
    border-color: transparent;
    color: var(--lite);
    background-color: transparent;
    font-size: 1em;
    text-decoration: none;
    font-family: "Spectral", serif;
    &:hover {
        color: var(--dark); 
        transform: translateY(-2px);
    } 
}

.dropdown-content {
    display: none;
}

.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;
    padding: 5px 0;
    z-index: 1;
}

.dropdown-content a {
    display: block;
    font-family: "Spectral", serif;
    font-size: 1.1em; 
    border-radius: none; 
    padding: 5px 10px; 
    background-color: var(--bgpink);
    color: var(--dark);
    text-decoration: none;
}

.dropdown-content a:hover {
    background-color: var(--silhouette); 
    color: var(--darker); 
}

.dropdown-content a.notyet,
.dropdown-content a.notyet:hover {
    background-color: var(--bgpink);
    color: var(--dark);
    text-decoration: line-through;
    color: var(--deadrose); 
    cursor:not-allowed;
}

/** ze body **/

#wrapper {
/** background-image: url(/images/assets/backgrounds/creampaper.png);
    border-radius: 20px; **/
    border-image: url(/images/assets/border/lace.png) 8 fill round;
    border-width:7px;
    border-style:solid;
    border-color: transparent; 
    padding: 1em;
    padding-bottom: 2em;
    width: 100%;
    margin-bottom: 2em;
} 


/** FOOTER PORTION **/

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    padding: 7px;
    font-size: 90%;
    border-top: 1px solid var(--border);
    background-color: var(--deadwhite);
}

footer a { 
    color: var(--dustyrose);
    text-decoration: none;
}

/** BODY PORTION **/

article h3,
article h4,
article h5,
article h6 {
    color: var(--dustyrose);
}

article h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
}

article h1 {
    margin-top: 0;
}

article h2 {
    color: var(--darkerrose);
    padding-bottom: 7px;
    border-bottom: 2px solid var(--pink-trans);
}

article h3 {
    text-decoration: 1px dashed var(--dots) underline;
    text-underline-offset: 3px;
}

article li {
    padding-bottom: 0.4em;
}

/** article sidenotes **/

article { 
    counter-reset: sidenotes; 
}

article aside {
	line-height: 1.1;
    font-size: 0.9em;
	margin-left: 10%;
    margin-right: 1em;
    margin-top: -0.5em;
    margin-bottom: 1em;
	color: var(--deadrose);
}
article aside, 
article aside:before {
	transition-property: color, background-color, font-weight;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}
article aside:hover, 
article aside:focus, 
article aside:hover:before , 
article aside:focus:before {
	z-index: 1;
	color: var(--text-accent);
}

/** details -- applicable to site.html **/

/*
details {
    border: 1px solid var(--dots);
}

summary {
    background-color: var(--pink-trans);
    padding: 5px 10px;
    &:hover {
        background-color: var(--border);
        color: white;
        cursor: pointer;
    }
}
    */

@media only screen and (min-width: 800px) {
    header nav {
        justify-content: space-between;
    }
    
    .dropdown button {
        min-width: 6em;
    }

    #pagetitle {
        font-size: 2.5em;
        min-width: 6em;
    }
}