:root {
    --content-padding: 15px;
}
/* IMPORTANT */
body {
    --colour-scrollbar: var(--colour-accent);
    --colour-selection: var(--colour-accent);
}

body:not(.night) {
    --sidebar-image-padding: var(--day-sidebar-image-padding);
    --sidebar-image-sizing: var(--day-sidebar-image-sizing);
    --sidebar-image-horizontal-alignment: var(--day-sidebar-image-horizontal-alignment);
    --sidebar-image-vertical-alignment: var(--day-sidebar-image-vertical-alignment);

    --background-image: var(--day-background-image);
    --container-image: var(--day-container-image);

    --colour-text: var(--day-colour-text);
    --colour-border: var(--day-colour-border);
    --colour-accent: var(--day-colour-accent);
    --colour-accent-2: var(--day-colour-accent-2);
    --colour-open-tab: var(--day-colour-open-tab);
    --colour-container-background: var(--day-colour-container-background);
    --colour-post-background: var(--day-colour-post-background);
    --colour-sidebar-background: var(--day-colour-sidebar-background);
    --colour-background: var(--day-colour-background);
}
body:not(.night) [data-mode-button="day"] { display: none; }
body:not(.night) .night { display: none; }

body.night {
    --sidebar-image-padding: var(--night-sidebar-image-padding);
    --sidebar-image-sizing: var(--night-sidebar-image-sizing);
    --sidebar-image-horizontal-alignment: var(--night-sidebar-image-horizontal-alignment);
    --sidebar-image-vertical-alignment: var(--night-sidebar-image-vertical-alignment);

    --background-image: var(--night-background-image);
    --container-image: var(--night-container-image);

    --background-image: var(--night-background-image);
    --container-image: var(--night-container-image);
    --colour-text: var(--night-colour-text);
    --colour-border: var(--night-colour-border);
    --colour-accent: var(--night-colour-accent);
    --colour-accent-2: var(--night-colour-accent-2);
    --colour-open-tab: var(--night-colour-open-tab);
    --colour-container-background: var(--night-colour-container-background);
    --colour-post-background: var(--night-colour-post-background);
    --colour-sidebar-background: var(--night-colour-sidebar-background);
    --colour-background: var(--night-colour-background);
}
body.night [data-mode-button="night"] { display: none; }
body.night .day { display: none; }

/* body */

body {
  background-color: rgb(var(--colour-background));
  background-image: var(--background-image);
  background-position: center;
  background-size: cover;

  color: rgb(var(--colour-text));
  font-size: var(--font-size);
  font-family: var(--body-font);
  word-wrap: break-word;
}
a { color: rgb(var(--colour-accent)); }
a:hover { color: rgb(var(--colour-accent-2)); }

/* night mode */
.mode_button {
    padding: 5px;
    display: flex;
    position: fixed;
    bottom: 5px;
    left: 5px;
    z-index: 99;

    background: rgb(var(--colour-post-background));
    border-radius: var(--border-radius);
}

/**/
body.contained main > section {
    max-height: calc(100vh - (var(--body-margin) + var(--border-size)) * 2);
    overflow: auto;
    align-content: flex-start;
}
body.contained main {
    align-items: center; overflow: hidden;
    max-height: calc(100vh - (var(--body-margin) + var(--border-size)) * 2);
    grid-template-rows: 100%;
}


/* break long urls */
section a { word-break: break-all; }

/* container image */
body.contained main, body:not(.contained) section, aside .sidebar_image, .sidebar_nav a.open {
    background: rgb(var(--colour-container-background)) var(--container-image) no-repeat center fixed;
    background-size: cover;
}

/* styling */
body.contained main, body:not(.contained) section, body:not(.contained) aside {
    border-style: solid!important;;
    border-color: rgb(var(--colour-border))!important;
    border-width: var(--border-size)!important;
    border-radius: var(--border-radius);
}
body:not(.contained) aside {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0px!important;
}
body:not(.contained) section {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-left: 0px!important;
}

/* other */
section {
    padding: var(--posts-margin);
}
aside {
    background: rgb(var(--colour-sidebar-background));
}

/* article background */
section article:not(.no_background) {
    background: rgb(var(--colour-post-background));
    border-radius: var(--border-radius);
}
/* border between post sections */
article > *:not(:first-child) { border-top: 1px solid rgba(var(--colour-accent), 0.5); }

/* center everything */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* main */
main {
    margin: var(--body-margin);
    display: grid;
    grid-template-columns: calc( var(--sidebar-width) + var(--sidebar-margin)*2 ) minmax(50%, calc( var(--post-width) + var(--posts-margin)*2 ) ) ;
}

/* sidebar */
aside {
    width: calc( var(--sidebar-width) + var(--sidebar-margin)*2 );
    height: 100%;
    display: grid;
    grid-template-columns: 1fr min-content;
}

body:not(.contained) aside > * {
    position: sticky;
    top: var(--body-margin);
    height: 100%;
    max-height: calc( 100vh - var(--body-margin)*2 - var(--border-size)*2);
}

/* nav */
aside .sidebar_nav {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: var(--sidebar-margin) 0px;
    grid-gap: var(--content-padding);
}
aside .sidebar_nav a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.5em;
    padding: var(--content-padding);
    flex-grow: 1;
}
aside .sidebar_nav a:hover { color: rgb(var(--colour-accent-2)); }
aside .sidebar_nav a.open {
    cursor: default;
    color: rgb(var(--colour-open-tab));
    border-radius: var(--border-radius) 0px 0px var(--border-radius);
}
aside .sidebar_nav text { display: none; }
aside .sidebar_nav a:not(.open) { background: rgb(var(--colour-sidebar-background)); }

/* main sidebar */
aside .sidebar_main {
    padding: var(--sidebar-margin);
    display: grid;
    grid-gap: var(--content-padding);
    justify-items: center;
    align-content: center;
    overflow: hidden;
}

/* sidebar image */
aside .sidebar_image {
    overflow: hidden;
    position: relative;
    height: 100%;
    height: var(--sidebar-image-height);
    width: 100%;
    flex-grow: 1;
    border-radius: var(--border-radius);
}
aside .sidebar_image img {
    height: 100%;
    width: 100%;
    object-position: var(--sidebar-image-horizontal-alignment) var(--sidebar-image-vertical-alignment);
    object-fit: var(--sidebar-image-sizing);
    padding: var(--sidebar-image-padding);
}

/* icon */
aside .sidebar_icon {
    height: var(--avatar-size);
    width: var(--avatar-size);
    border-radius: var(--border-radius);
    object-fit: cover;
    position: relative;
    margin-top: calc( -1 * var(--avatar-size)/2 - var(--content-padding) );
}
aside .sidebar_icon.circle { border-radius: 100%; }
aside .sidebar_title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-size: 1.5em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    text-align: center;
    flex-shrink: 0;
    padding: calc(var(--content-padding));
    min-width: var(--avatar-size);
}
aside .sidebar_description { text-align: justify; flex-shrink: 0; }

/* sections & articles */
main > section { display: grid; grid-gap: var(--content-padding); align-content: center; }
[data-popup]:not(.open) { display:none!important; }
section article {
    width: 100%;
    overflow: hidden;
    display: grid;
    align-content: start;
    grid-template-columns: 100%;
}
article content { display: grid; grid-gap: var(--photoset-spacing); }
.article_heading, .title_block, .header_block, .link_block {
    padding: var(--content-padding);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    color: rgb(var(--colour-accent));
}
.title_block { font-size: 1.5em; }
.header_block { background: rgba(var(--colour-accent), 0.3); }
.article_heading, .header_block.original_reblog { background: rgba(var(--colour-accent), 0.5); }

/* popups */

/* links */
.links content {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--content-padding);
}
.links a {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1em;
    padding: calc(var(--content-padding)/2);
    background-color: rgb(var(--colour-post-background));
    border-radius: var(--border-radius);
    overflow: hidden;
    flex-grow: 1;
}

/* search */
.search content { grid-auto-flow: column; grid-gap: var(--content-padding); }
.search form { display: contents; }
.search form > * {
    padding: var(--content-padding);
    background-color: rgb(var(--colour-post-background));
    overflow: hidden;
    border-radius: var(--border-radius);
    color: inherit;
    border: 0;
    outline: 0;
    letter-spacing: 1px;
}
.search form button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.5em;
    color: rgb(var(--colour-accent));
    transition: 1s;
    -webkit-transition: 1s;
}
.search form button:hover { color: rgb(var(--colour-accent-2)); }


/* popups */
.profile_item, .faq_item {
    display: flex;
    flex-wrap: wrap;
    grid-gap: var(--content-padding);
    justify-content: left;
    align-items: center;
    padding: calc( var(--content-padding) );
}
.profile_label, .faq_question {
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.profile_label { color: rgb(var(--colour-accent)); }