/*
x-ArchiveSidebar :root {
    --page-width: 800px;
    --bg1: #ffffff;
    --bg2: #e5e5f7;
    --accent1: #f2cd54;
    --accent2: #91d370;
    --accent3: #bca0ff;
    --leftoffset: -80px;
}
*/

x-ArchiveSidebar a {
    background: white;
    color: black;
}

x-ArchiveSidebar a.active {
    background: var(--accent1);
}
x-ArchiveSidebar li {
    font-size: 1.3rem;
    line-height: 2.0rem;
}

x-ArchiveSidebar nav {
    border: 1px solid black;
    padding-top: 20px;
}

x-ArchiveSidebar ul {
    margin-left: -30px;
}

x-ArchiveSidebar ul > h2 {
    font-size: 25px;
    margin-top: 50px;
    /*
    float: left;
    shape-outside: circle();
    height: auto;
    width: 125px;
    */
}
x-ArchiveSidebar ul > h2 {
    text-align: right;
    background: black;
    color: white;
    height: 28px;
}

x-ArchiveSidebar ul > p > span  {
    font-size: 16px;
    background: white;
    font-style: italic;
}


x-ArchiveSidebar .visible-toggle {
    display: none;
}

x-ArchiveSidebar .visible-toggle-overlay {
    opacity: 0.5;
    position: relative;
    top: -20px;
    height: 20px;
    background: repeating-linear-gradient(
        -55deg,
        transparent,
        transparent 10px,
        var(--accent1) 10px,
        var(--accent1) 20px
    );
}

x-ArchiveSidebar ul {
    height: 400px;
    overflow: hidden;
}

x-ArchiveSidebar ul.active {
    height: auto;
}

x-ArchiveSidebar .visibility-controls > label,
x-ArchiveSidebar .comment-controls > button {
    margin-left: 20px;
    font-size: 20px;
    border: 3px var(--accent3) solid;
    padding: 20px;
}

x-ArchiveSidebar .comment-controls > button {
    float: right;
    margin-top: -20px;
    background: transparent;
    margin-right: 20px;
}

x-ArchiveSidebar .visibility-controls > label:hover,
x-ArchiveSidebar .comment-controls > button:hover {
    background: var(--accent3);
    cursor: pointer;
}

x-ArchiveSidebar .visibility-controls > label > input {
    display: none;
}

@media (min-width: 1330px) {
x-ArchiveSidebar nav {
        position: absolute;
        left: calc(2vw);
        top: 100px;
        z-index: 10;
        width: calc(100px + 10vw);
    }
x-ArchiveSidebar ul {
        height: auto;
    }

x-ArchiveSidebar .visibility-controls {
        display: none;
    }
x-ArchiveSidebar .visible-toggle-overlay {
        display: none;
    }
}


@media (max-width: 1400px) {
x-ArchiveSidebar nav {
        padding-top: 400px;
    }
}

@media (max-width: 920px) {
x-ArchiveSidebar nav {
        padding-top: 20px;
    }
}


x-SoundcloudButton a {
            cursor: pointer;
        }
    
/* Base website styles */
:root {
    --page-width: 800px;
    --bg1: #ffffff;
    --bg2: #e5e5f7;
    --accent1: #f2cd54;
    --accent2: #91d370;
    --accent3: #bca0ff;
    --leftoffset: -80px;
}

body {
    background-color: #e5e5f7;
    background-size: 100px 100px;
    background-image: 
        /*
        radial-gradient(var(--accent1) 3%, transparent 3%),
        radial-gradient(farthest-corner at 10px 117px, var(--accent1) 2%, transparent 2%),*/
        repeating-linear-gradient(0deg, var(--accent1), var(--accent1), 1px, #e5e5f7 1px, #e5e5f7);
    overflow-x: hidden;
}

.Page-wrapper {
    z-index: 1;
    margin: auto;
    width: var(--page-width);
    font-family: serif;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    min-height: 100vh;
    background: white;
}

.Page {
    display: flex;
    flex-direction: column;
}

.Page > h1 {
    font-weight: 200;
    z-index: 3;
    font-size: 50px;
    text-align: right;
    margin-bottom: -102px;
}

.Page > h1 > span {
    text-shadow:
        1px 0px #ffffff,
        0px 1px #ffffff,
        1px 1px #ffffff,
        -1px -1px #ffffff;
}

.Page > img:first-of-type,
.Page .coolfx {
    /*transform: skew(-15deg, -15deg);*/
    margin-left: var(--leftoffset);
    z-index: 3;
    margin-bottom: -100px;
    margin-top: 14px;
    width: 170px;
    float: right;
    box-shadow:
        -10px -10px 0 0 var(--accent1)
        ,3px 8px 0 0 var(--accent3)
        ,0px 10px 0 10px var(--accent2)
        ,-10px -10px 0 20px var(--accent1)
        ,3px 8px 0 30px var(--accent3)
        ,0px 10px 0 40px var(--accent2)
        ,0px 0px 0 80px var(--bg2)
        ,0px 0px 0 82px var(--accent1)
        ;
}

.Page > h2 {
    text-transform: uppercase;
    box-shadow: -30px -1px 0 0 var(--accent1);
    margin-top: 70px;
    margin-left: var(--leftoffset);
    width: 100vw;
    z-index: 3;
    font-size: 60px;
    font-weight: lighter;
    color: black;
    text-shadow:
        2px -2px #111
        ,1px -1px #222
        ,-1px 1px #333
        ,-2px 2px #444
        ,-3px 3px #555
        /*,600px 0px var(--bg2)
        ,300px 0px var(--bg2)*/
        /*,-400px -24px var(--accent2)
        ,900px -24px var(--accent3)*/
        ,-400px -24px var(--accent1)
        ,900px -24px var(--accent1)
    ;
    /*
    font-weight: 800;
    color: black;
    text-shadow:
        -1px 1px #000
        ,1px -1px #000
        ,2px -2px #000
        ,-2px 2px #000
        ,-6px 0 var(--accent3)
        ,6px 0 var(--accent2)
    ;
    */
        /*,2px -2px var(--bg2)
        ,-2px 2px var(--bg2)*/
    /*
    text-shadow:
        -2px 0 var(--accent3),
        2px 0 var(--accent2);
    */
}

.Page > h2,
.Page > h2.Page-articleTitle {
    text-transform: none;
    font-weight: bold;
    margin-top: 100px;
    text-shadow: -200px -40px var(--accent1) ,900px -24px var(--accent1) ;
}
.Page > h2.Page-articleTitle {
    width: 100%;
    z-index: 100;
}

.Page > h2.Page-articleTitle {
    text-shadow: 
    -700px -24px var(--accent1) ,
    900px -24px var(--accent1),
    -700px 900px var(--accent1) ,
    900px 900px var(--accent1),
    -700px 1900px var(--accent1) ,
    900px 1900px var(--accent1)
    ;
}

.Page > h2 > span {
    background: white;
}

.Page > blockquote {
    margin-left: 200px;
    font-size: 20px;
}

.Page > blockquote > .circle {
    float: left;
    height: 200px;
    width: 300px;
    shape-outside: circle();
}
.Page > blockquote > .circle:nth-of-type(odd) {
    float: right;
    width: 100px;
}


.Page > hr:first-of-type,
.Page .rainbow-square {
    height: 10px;
    background-color: #91d370;
    border: none;
    /*background-image: linear-gradient(319deg, var(--accent2) 0%, var(--accent3) 37%, var(--accent1) 100%);*/
    background-image: linear-gradient(
        319deg, var(--accent2) 0%,
        var(--accent3) 37%,
        var(--accent1) 80%,
        var(--accent1) 100%);
    width: 100%;
    z-index: 2;
    margin-bottom: 100px;
    box-shadow:
        -10px -10px 0 0 var(--bg2)
        ,3px 8px 0 0 var(--bg2)
        ,0px 10px 0 10px var(--accent2)
        ,-10px -10px 0 20px var(--bg2)
        ,0px 0px 0 80px var(--bg2)
        ,0px 0px 0 82px var(--accent1)
        ;
}

.Page .rainbow-square {
    height: auto;
}

.Page .glitchydots {
    background-image:
        radial-gradient(
            transparent 20%,
            #fff 20%,
            #fff 60%,
            transparent 60%);
    background-size: 100px 10px;
    background-position: 0px 0px;
    transition: 
        background-position 0.1s,
        background-size 0.3s;
}

.Page .glitchydots:hover {
    background-size: 2px 2px;
    background-position: -50px -50px;
}

/*
.Page .glitchypattern {
	background-image:
        repeating-linear-gradient(
            13deg,
            var(--accent2) 4px,
            var(--accent2) calc(8px),
            var(--accent1) calc(8px), 
            var(--accent1) calc(12px),
            var(--accent3) calc(12px),
            var(--accent3) calc(16px)
        ), none;
	background-size: 10px 100%, 10px 100%;
}
*/


.Page .glitchypattern {
	background-image:
        repeating-linear-gradient(
            15deg,
            transparent 4px,
            transparent calc(8px),
            var(--accent3) calc(8px), 
            var(--accent3) calc(12px),
            transparent calc(12px),
            transparent calc(16px)
        ), none;
	background-size: 10px 100%, 10px 100%;
}


.Page hr.glitchypattern {
    height: 13px;
    margin: 15px;
    border: none;
}

.Page-relative {
    position: relative;
}

.Page > section {
    display: flex;
    flex-direction: row;
}

.Page > section > aside {
    border: 1px solid var(--accent3);
    margin-left: 20px;
    padding: 20px;
}

.Page-trNav {
    position: absolute;
    top: 80px;
    right: 0;
    border: 1px solid var(--accent3);
    border-radius: 8px;
    padding: 8px;
    z-index: 50;
    padding-left: 0;
}

.Page-bcNav {
}
.Page-bcNav > ul > li::before {
    content: "\25B7";
    color: var(--accent2);
}

.Page-bcNav > ul ,
.Page-trNav > ul {
    display: flex;
}
.Page-trNav > ul > li,
.Page-bcNav > ul > li {
    font-size: 20px;
    margin-right: 40px;
    padding-left: -10px;
}

.Page-linkList {
    position: relative;
    z-index: 1;
}
.Page-linkList li {
    font-size: 20px;
    text-align: justify;
    margin-right: 40px;
    margin-left: -10px;
    min-width: 400px;
}

.Page-linkList li a {
    font-weight: bold;
}

.Page-linkList .Page-messyImage {
    position: absolute;
    z-index: 0;
    height: 150px;
    padding: 5px;
    border: 1px solid var(--accent3);
}
.Page-linkList .Page-messyImage:nth-of-type(1) {
    top: -100px;
    right: -200px;
    padding-right: 50px;
    border-radius: 100px 0 0 0;
}
.Page-linkList .Page-messyImage:nth-of-type(2) {
    top: 0px;
    right: -240px;
    padding-top: 50px;
    height: 190px;
    border-radius: 0 50px 0 0;
}
.Page-linkList .Page-messyImage:nth-of-type(3) {
    top: 150px;
    right: -190px;
    padding-left: 50px;
    border-radius: 0 0 100px 0;
}
.Page-linkList .Page-messyImage:nth-of-type(4) {
    top: 250px;
    right: -130px;
    height: 190px;
    padding-bottom: 50px;
    border-radius: 0 0 0 200px;
}

.Page .Btn {
    border: 1px solid var(--accent2);
    padding: 5px;
    text-decoration: none;
    font-weight: bold;
    color: var(--accent2);
    display: inline-block;
    border-radius: 4px;
    margin: 2px;

    background-image:
        radial-gradient(
            var(--accent2) 20%,
            #fff 20%,
            #fff 60%,
            var(--accent2) 60%);
    transition: 
        background-position 0.1s,
        background-size 0.3s,
        color 0.5s;
    background-size: 2px 2px;
    background-position: -50px -50px;
}

.Page .Btn:hover {
    color: black;
    background-size: 4px 4px;
    background-position: 0px 0px;
}

.Page .glitchydots:hover {
}

footer {
    padding: 20px;
    margin: 20px;
    text-align: center;
}

@media (max-width: 920px) {
    :root {
        --leftoffset: 1px;
    }
    .Page-wrapper {
        width: 100vw;
    }
    .Page > section {
        flex-direction: column;
    }
}


/*
  Originally based on Josh's Custom CSS Reset tutorial:
    https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html, body {
  height: 100%;
}
body {
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}
input, button, textarea, select {
  font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* HEADER TYPOGRAPHY */
.Page-article h1 { margin-top: 30px; }
.Page-article h2 { margin-top: 20px; }
.Page-article h3 { margin-top: 17px; }
.Page-article h4 { margin-top: 15px; }
.Page-article h5 { margin-top: 10px; }
.Page-article h6 { margin-top: 5px; }

.Page-article h1 { font-size: 35px; }
.Page-article h2 { font-size: 25px; }
.Page-article h3 { font-size: 22px; }
.Page-article h4 { font-size: 20px; }
.Page-article h5 { font-size: 15px; }
.Page-article h6 { font-size: 10px; }

.Page-article h1,
.Page-article h2,
.Page-article h3,
.Page-article h4,
.Page-article h5,
.Page-article h6 {
    font-weight: bold;
    /*margin-left: -10px;*/
    /*clear: both;*/
}

.Page-article p {
    line-height: 1.4;
    font-size: 18px;
    line-height: 24px;
    margin-top: 5px;
    /*margin-left: 5px;*/
}

.Page-article h1.title {
    display: none;
}

.Page-article p + p:not(blockquote p, li p) {
    /* Typesetting like a book */
    text-indent: 30px;
}

.Page-article pre {
    display: block;
    border: 1px dotted var(--accent3);
    border-left-width: 5px;
    border-radius: 5px;
    padding: 8px;
    margin: 8px;
    font-size: 15px;
    clear: both;
}

.Page-article hr {
    border: none;
    border-top: 5px dotted var(--accent3);
    margin: 20px;
    margin-left: 80px;
    margin-right: 80px;
}

.Page-article blockquote {
    float: right;
    display: block;
    border: 1px solid var(--accent3);
    border-radius: 5px;
    padding: 8px;
    margin: 8px;
    width: 40%;
}

.Page-article blockquote > :first-child {
    margin-top: 0;
}

@media (max-width: 920px) {
    .Page-article blockquote {
        float: clear;
        clear: both;
        margin: auto;
        width: 80%;
    }
}

/*
.Page-article p:not(blockquote p, li p):first-of-type:first-letter {
    color: var(--accent3);
    font-size: 45px;
    font-family: monospace;
    font-style: italic;
}
*/