@font-face {
  font-family: 'Nomaden';
  src: url('fonts/Nomaden.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {

  font-family: 'Cormorant Infant';
  src: url('fonts/CormorantInfant-VariableFont_wght.woff') format('woff2-variable');
  font-style: normal;
  font-weight: 100 700;
}

@font-face {
  font-family: 'Cormorant Infant';
  src: url('fonts/CormorantInfant-Italic-VariableFont_wght.woff2') format('woff2-variable');
  font-style: italic;
  font-weight: 100 700;
}
@font-face {
  font-family: 'Quattrocento Sans';
  src: url('fonts/QuattrocentoSans-Regular.woff') format('woff');
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: 'Quattrocento Sans';
  src: url('fonts/QuattrocentoSans-Bold.woff') format('woff');
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: 'Quattrocento Sans';
  src: url('fonts/QuattrocentoSans-Italic.woff') format('woff');
  font-style: italic;
  font-weight: normal;
}
@font-face {
  font-family: 'Quattrocento Sans';
  src: url('fonts/QuattrocentoSans-BoldItalic.woff') format('woff');
  font-style: italic;
  font-weight: bold;
}



:root {

    /* colors */
    --white: #f3e1ceff;
    --light: #c7adc6;
    --accent: #335d4d;
    --dark: rgb(92, 54, 75);
    --black: rgb(21, 24, 25);


    --text: var(--black);
    --background: var(--dark);
    --article: var(--light);
    --acc-light: var(--white);
    --acc-dark: var(--dark);
    --acc: var(--accent);
    --shadow: var(--white);

    /* fonts */
    --basefont: 'Quattrocento Sans',  'Helvetica', 'Verdana', sans-serif;
    --accentfont: 'Cormorant Infant', 'Garamond', serif;
    --headerfont: 'Nomaden';
    --titlefont: 'Nomaden';
    --text-size: 17px;
    --bullets: "♥︎";

    /* misc styling */
    --scroll-height: 200px;
    --max-width: 1200px;
    --sidebar-base-width: 200px;
    --main-base-width: 400px;
    --spacing: 15px;
    --border-radius: 10px;
    --underline: wavy currentColor 1px;
    --hover-cursor: pointer;
    --shadow-size: var(--spacing);

    /* calculations - don't worry about this */
    --halfspacing: calc(var(--spacing) / 2);
    --quarterspacing: calc(var(--halfspacing) / 2);
    --doublespacing: calc(var(--spacing) * 2);
    --x4spacing: calc(var(--spacing) * 4);
    --negativespacing: calc(var(--spacing) * -1);
    --max-height: calc(100vh - var(--doublespacing) - var(--spacing) - var(--nav-height));
    --halfradius: calc(var(--border-radius) / 2);
        --bg-accent: color-mix(in lab, var(--light) 30%, var(--accent) 30%, var(--background) 90%);
    --mix-acc-white: color-mix(in hwb, var(--accent) 50%, var(--white) 70%);
    --mix-article-white: color-mix(in lab, var(--article) 50%, var(--white) 50%);
}



* {
    box-sizing: border-box;
    max-width: 100%;
    scrollbar-color: var(--light) transparent;
    -ms-overflow-style: none;
}

/* basic page layout */
body {
    background-color: var(--background);
    background-image: linear-gradient(var(--bg-accent) 1px, transparent 1px), linear-gradient(to right, var(--bg-accent) 1px, var(--background) 1px);
    background-size: 60px 60px;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: var(--x4spacing) var(--doublespacing);
    margin: 0;
    /* background: var(--background); */
    color: var(--text);
    font-family: var(--basefont);
    font-size: var(--text-size);
    line-height: 1.5em;
}

.flex {
    display: flex;
    flex-flow: row wrap;
    gap: var(--spacing);
    align-items: flex-start;
}

#container {
    max-width: var(--max-width);
    margin: 0 auto;
}

aside {
    flex: 1 2 var(--sidebar-base-width);
}

main {
    flex: 1 1 var(--main-base-width);
    padding-right:var(--halfspacing)
}

footer {
    flex: 1 0 100%;
    border-radius: var(--border-radius);
    display: block;
    padding: var(--spacing);
    margin: 0;
    text-align: center;
    color:var(--white);
    a {
        color: var(--light)
    }
    b {
        color: var(--mix-acc-white);
        padding:0 var(--spacing)
    }
    img {
      max-height:1.6em;
      vertical-align:middle;
    }  
}

  .float {
    z-index:10;
    position:relative;
    display:block;
   &.right {
            float: right;
            margin: var(--doublespacing) calc(var(--doublespacing) * -1.9) var(--spacing) var(--halfspacing);
        }

        &.left {
            float: left;
            margin: var(--spacing) var(--doublespacing) var(--spacing) calc(var(--doublespacing) * -1.8);
        }
  }
article {
    background: var(--article);
    color: var(--text);
    padding: var(--spacing) var(--doublespacing);
    box-shadow: var(--shadow) var(--shadow-size) var(--shadow-size);
    border-radius: var(--border-radius);
    position: relative;
    margin-bottom:var(--doublespacing);

    &.accent {
        --article: var(--accent);
        --text: var(--white);
        --shadow: var(--black);
        --acc-light: var(--white);
        --acc-dark: var(--light);
        --acc: var(--light);
          --mix-article-white: color-mix(in lab, var(--article) 50%, var(--white) 50%);
        --shadow-size: var(--halfspacing);
        max-width: clamp(200px, var(--main-base-width), 50%);
        z-index: 10;
        position:relative;
        margin-top: var(--doublespacing);
        padding: var(--spacing);
        text-wrap: balance;

        /* tab-style headers on floating boxes */
        h2 {
            font-size: 2.5em;
            margin-top: calc(var(--doublespacing) * -1);
            margin-bottom: 0;
            background: inherit;
            max-width: fit-content;
            padding: var(--halfspacing) var(--spacing);
            line-height: .8em;
            border-radius: var(--border-radius);
        }
    }

}

.scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: var(--scroll-height);
  }
  


#status {
    text-align:left;
    #statuscafe-username {
        font-size:.8em;
        color:var(--article);
        width:fit-content;
        margin-left:auto;
        background:var(--mix-acc-white);
        font-weight:bold;
        padding:0 var(--halfspacing);
        border-radius:var(--halfradius);
        margin-bottom:var(--halfspacing);
        a {
            display:none;
        }
        &::first-letter {
            margin-right:var(--halfspacing);
        }
    }
    #statuscafe-content {
        text-align:left;
    }
}

.callout {
    background: var(--white);
    color: var(--dark);
    font-style: italic;
    font-family: var(--accentfont);
    font-weight:500;
    padding: var(--spacing);
    border-radius: var(--border-radius);
    outline: var(--accent) 2px dashed;
    outline-offset: 5px;
    text-align: center;
    font-size: 1.2em;
    margin: var(--doublespacing) auto;
    text-wrap: balance;

}

/* elements */
a,
details summary,
button {
    cursor: var(--hover-cursor);
}


a {
    color: var(--acc);
    text-decoration: underline var(--underline);
    padding:0 var(--quarterspacing);
    margin:0 calc(var(--quarterspacing) * -.5);

    &:hover {
        background: var(--dark);
        color: var(--acc-light);
        border-radius: var(--halfradius)
    }
}

.button-links a {
    background: var(--acc-light);
    display: block;
    margin: var(--halfspacing);
    text-align: center;
    padding: var(--halfspacing);
    text-decoration: none;

    &:hover {
        background: var(--acc-dark);
        color: var(--acc-light);
    }
}



img {
    max-height: 100%;
    max-width: 100%;
    
     &.center {
        margin:0 auto;
        display:block }
}

.center {
  text-align:center }
  

ul,
ol,
blockquote {
    position: relative;
    margin: unset;
    padding: unset;
    margin: var(--spacing) auto;
    padding-left: var(--x4spacing);
    margin-left: var(--negativespacing)
}

li {
    padding-left: var(--spacing);

}

blockquote {
    margin: var(--spacing);
    margin-left: var(--doublespacing);
    padding-left: var(--doublespacing);
    border-left: var(--acc) solid 2px;
    font-style: italic;
    color: var(--acc-dark);
    position: relative;
}

li::marker {
    color: var(--acc)
}

ul li {
    list-style: none;

    &::before {
        position: absolute;
        left: var(--doublespacing);
        color: var(--acc);
        content: var(--bullets);
        display: block;
        width: 1em;
        text-align: center;
    }
}

::selection {
    color: var(--article);
    background: var(--acc-dark);
}

b,
strong {
    color: var(--acc-dark);
}


h1,
h2,
h3,
h4,
h5 {
    margin: var(--doublespacing) 0 var(--spacing) 0;
    padding: var(--halfspacing) var(--spacing);
    font-family: var(--headerfont);
    color: var(--acc-light);
    font-weight: normal;
    line-height: .3em;
}

h1 {
    color: var(--acc-light);
    font-size: 4em;
    display: block;
    width: 100%;
    text-align: center;
    text-align-last: center;
    line-height: .9em;

}

h2:not(.accent h2) {
    font-size: 2.75em;
    position: relative;
    background: var(--text);
    color: var(--article);
    padding-top: var(--spacing);
}

h3 {
    font-size: 2.5em;
    background:var(--accent);
    
    padding-top: var(--spacing);
}

h4 {
    font-size: 2em;
    color:var(--accent);
    background:linear-gradient(to top, var(--acc-light) var(--halfspacing), transparent 1px)
}
h5 {
    font-size:1.8em;
}

mark {
    background: var(--mix-article-white);
}

code, button {
   border-radius: var(--halfradius);
     line-height: 1.4em;
         display: inline-block;
    vertical-align:middle;
}
code {
    border: 1px solid var(--acc);
    background: var(--acc-light);
    color: var(--accent);
 
    padding: 1px var(--quarterspacing);
  
    font-size:.8em;
    font-family: 'Courier New', Courier, monospace;


}

button {

    background: var(--acc);
    padding: 0 var(--halfspacing);
    border: 2px outset var(--acc);
    text-wrap: balance;
    color: var(--shadow);


    &:hover,
    &:focus {
        box-shadow: var(--quarterspacing) var(--quarterspacing) var(--shadow);
    }

    &:active {
        transform: scale(.95);
    }
}

u {
    text-decoration: underline var(--underline);
    text-decoration-color: var(--mix-light);
}

hr {
    border: none;
    border-top: var(--acc-dark) double 4px;
    margin: var(--spacing);
}



/* sidebar styling (name + links) */
nav {
    font-size: 1.3em;
    gap: var(--spacing) var(--doublespacing);
    text-wrap: balance;
    text-align:center;
    width:100%;

    a {
        letter-spacing: 2px;
        font-family:var(--accentfont);
        background: var(--text);
        color: var(--article);
        text-decoration: none;
        padding: var(--quarterspacing) var(--halfspacing);
        margin:var(--halfspacing);
        display:inline-block;
    }

    .socials {
        flex: 1 1 100%;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        padding-top: var(--spacing);

        a {
            font-size: calc(var(--text-size) * 1.2);
            border-radius: 100%;
            padding: .5em;
            aspect-ratio: 1 / 1;
            overflow: hidden;
            display: flex;
            flex-flow: column;
            justify-content: center;
        }
    }
}

a.name {
    display: inline-block;
    max-width: fit-content;
    align-self: center;
    margin: 0 auto;
    text-decoration: none;
    background: none;

    h1 {
        font-size: 6em;
        color: var(--acc-light);
        font-family: var(--titlefont);
        display: block;
        line-height: .85em;

        padding: 0;
        margin: 0 auto;

        &:hover {
            color: var(--article);
            background: none !important;
            transition: .5s
        }
    }
}