@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');

/*
:root {
    --main-text-color: #ff6699;
    --main-accent-color: #e8336f;
    --secondary-accent-color: #d60047;
    --main-background-color: #000;
    --page-width: 1200px;
    --background-accent-color: #101010;
    --tooltip-color: #181818;
}
*/
:root {
    --main-text-color: #ffffff;
    --main-accent-color: #f05b8d;
    --secondary-accent-color: #e8336f;
    --main-background-color: #111;
    --page-width: 1200px;
    --background-accent-color: #101010;
    --tooltip-color: #333;
}

.tooltip {
    cursor: help;
    position: relative;
    border-bottom: 1px dotted var(--main-text-color);
    text-align: center;
}

.tooltiptext-top, .tooltiptext-bottom {
    padding: 4px;
    font-size: 0.8rem;
    font-weight: normal;
    color: var(--main-text-color);

    visibility: hidden;
    position: absolute;
    left: calc(50% - 4px);
    z-index: 1;

    background: var(--tooltip-color);
    border-radius: 4px;
}

.tooltip:hover .tooltiptext-top, .tooltip:hover .tooltiptext-bottom {
    visibility: visible;
}

.tooltiptext-top, .tooltiptext-bottom {
    border: 1px solid var(--main-text-color);
}

.tooltiptext-top::after, .tooltiptext-bottom::after {
  content: " ";
  position: absolute;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
}

.tooltiptext-top {
    bottom: 140%;
}
.tooltiptext-bottom {
    top: 140%;
}
.tooltiptext-top::after {
    top: 100%;
    border-color: var(--main-text-color) transparent transparent transparent;
}
.tooltiptext-bottom::after {
    bottom: 100%;
    border-color: transparent transparent var(--main-text-color) transparent;
}

body {
    padding: 0 2% 12px;
    max-width: 1200px;
    margin: 0 auto;

    background: var(--main-background-color);
    color: var(--main-text-color);
    font-family: "IBM Plex Mono", monospace;
}

/* COLORS */
a:visited, a { color: var(--main-accent-color); }
a:active, a:hover  { color: var(--secondary-accent-color);}
a { text-decoration: none; font-weight: bold; }
hr { color: var(--main-text-color); }

/* HEADER */
h1 { font-size: 135%; margin: 0;}
nav { text-align: center; }
header {
    margin-top: 16px;
    padding: 4px 12px;
    font-size: 150%;
}

/* BORDER */
#webring, .stream, .sidebar, #sitemap, #musicreviews, #main { border: 6px double var(--main-text-color); }

/* MARGINS + PADDING */
h2, h3 { margin: 8px auto; }
p { margin: 12px auto; }
hr { margin: 16px auto; }
main, #webring, .stream { padding: 12px; }
.sidebar { padding: 0 12px 12px; }
small {
    margin: 0 auto;
}

/* GRID */
#pagecontent:has(#indexmain) {
    width: 100%;
}

@media screen and (max-width: 1000px) {
    #pagecontent:has(#indexmain) {
        display: flex;
        flex-direction: column;
    }
    #indexmain { order: 1; }
    #indexupdates { order: 3; }
    #indexsidebar { order: 2; }
}

@media screen and (min-width: 1001px) {
    #indexmain article.stream {
        padding-bottom: 9px;
        box-sizing: border-box;
    }
    #pagecontent:has(#indexmain) {
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-template-areas:
            "indexmain indexsidebar"
            "indexupdates indexsidebar";
    }
    #indexmain { grid-area: indexmain; }
    #indexupdates { grid-area: indexupdates; }
    #indexsidebar { grid-area: indexsidebar; }
}

/* MISC */
#musicreviews h2 {
    font-style: italic;
    font-family: "Archivo Black";
}

.code pre {
    padding: 24px;
    max-width: 100%;
    overflow: scroll;
    background-color: var(--background-accent-color);
    border-radius: 1rem;
}

main.fiction p {
    white-space: pre-wrap;
    text-indent: 2em;
}