/*
 *
 * Global Variables
 *
 *  - borrowed from hylia.website
 */
:root {
  --color-primary: #53766f;
  --color-primary-shade: #102538;
  --color-primary-glare: #22547c;
  --color-highlight: #fedb8b;
  --color-light: #ffffff;
  --color-mid: #cccccc;
  --color-dark: #333333;
  --color-slate: #404040;
  --color-mode: "light";
  --color-bg: #ffffff;
  --color-bg-glare: #ffffff;
  --color-text: #333333;
  --color-text-glare: #333333;
  --color-selection-text: #ffffff;
  --color-selection-bg: #333333;
  --color-stroke: #cccccc;
  --color-action-bg: #173854;
  --color-action-text: #ffffff;
  --color-theme-primary: #173854;
  --color-theme-primary-glare: #22547c;
  --color-theme-highlight: #fedb8b;
  --color-theme-highlight-block: #fedb8b;
  --color-details: #8db3ab;
  --flow-space: 1rem;

  --blur-radius: 12px;
  --animation-length: 0.3s;
}

::selection {
  color: var(--color-selection-text);
  background-color: var(--color-selection-bg);
}

/* small screen */
body {
  padding: 1em;
  background-color:#e1eee1;
}

ul li ul{
  display:none;
}

/*desktop layout*/
@media(min-width: 48rem) {
    body {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(1, 1fr);
        gap:1rem;
    }     
    body > .sidebar {
        padding-left:3rem;
        grid-column: span 1 / span 1;
        grid-row: span 1 / span 1;
        grid-column-start: 1;
        grid-row-start: 1;
    }

    body > main {
        grid-column: span 4 / span 4;
        grid-column-start: 2;
        grid-row-start: 1;
        padding:2rem 1rem 1rem 1rem;
    }

    body > footer {
        grid-column: span 5 / span 1;
        grid-row-start: 2;
        text-align:center;
        padding-top:4rem;
    }   
    #content{
      max-width:40rem;
    }
    
}


/* these are images. gallery-set is images in blog posts. art-gallery is the images in galleries. */
ul.art-gallery,
ul.gallery-set{
  list-style-type:none;
  padding:0;
  display:grid;
  grid-template-columns: repeat(1, 1fr);
}
ul.art-gallery li,
div.gallery-set li{
  padding:0;
  margin:0 0 1rem 0;
}
ul.art-gallery li:nth-child(3n+1),
div.gallery-set image{
  grid-column:1 / span 1;
  border-bottom:none;
  border-top:none;
}
ul.art-gallery li img,
div.gallery-set img{
  width:100%;
  height:100%;
  object-fit:cover;
}

@media(min-width: 48rem) {
    ul.art-gallery,
    div.gallery-set{
      list-style-type:none;
      padding:0;
      display:grid;
      grid-template-columns: repeat(2, 1fr);
    }
    div.gallery-set{
      display:block;
    }
    ul.art-gallery li,
    div.gallery-set img{
      padding:0;
      margin:0;
    }
    ul.art-gallery li:nth-child(3n+1){
      grid-column:1 / span 2;
      border-bottom:1px solid var(--color-details);
      border-top:1px solid var(--color-details);
      padding:2rem 0;
      margin:2rem 0;
    }
    ul.art-gallery li img,
    div.gallery-set figure{
      width:100%;
      height:100%;
      object-fit:cover;
    }
}


/* font stuff */
@font-face {
  font-family: 'Raleway', sans-serif;
  font-style: normal;
  font-weight: 300;}

body {
  line-height: 1.56;
  font-family: 'Raleway', sans-serif;
  color: var(--color-text);
}

main {
  font-smooth: always;
  font-size: 1rem;
  font-weight: 400;
}
strong{
  font-weight: 600;
}
a {
  color: var(--color-primary);
}

h1, h2 {
  font-weight: 500;
}
@font-face {
  font-family: share-button-combined;
  font-weight: 1 999;
  font-display: block;
  src: url(data:font/woff2;base64,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)format("woff2")
}
.socials{
  font-family: share-button-combined;
}
article > *+* {
  margin-top: var(--flow-space);
}

article > header > time {
  display: block;
  margin: 0 0 1em;
  font-size: 1rem;
}

article > header > h2 {
  display: block;
  margin: 0 0;
}

p.cc {
  font-size:0.8rem;
}

header h1 {
  text-align:left;
}

header img {
  --blur-radius: 2px;
  --animation-length: 0s;
}

blockquote {
  font-style: italic;
}



/* mobile main menu is on */
aside > nav > ul {
  font-weight: 400;
  font-size: 1rem;
  text-decoration-skip-ink: auto;
  list-style: none;
  padding-left: 2rem;
  margin:0 0 2rem 0;
}

aside > nav > ul li{
  display:inline-block;
  padding:0;
  margin:0 0.4rem 0 0;
}
.sidebar{
  text-align:center;
}
.sidebar header{
  display:inline-block;
  margin:0;
  padding:0;
}
.sidebar header h1{
  margin:0;
  padding:0;
}
#logo{
  width: 3rem;
}

/* desktop menu is on the side */
@media(min-width: 48rem) {

  aside ul li ul{
    display:block;
    border-bottom:1px solid var(--color-details);
    padding-top:1rem;
    padding-bottom:1rem;
    margin-bottom:1rem;
    padding-left: 0;
    list-style: none;
  }
  aside ul li ul li{
    padding-bottom:0.5rem;
  }
  aside {
    display: flex;
    justify-content: space-between;
    min-width:10rem;
  }
  aside > nav{
    margin-top:4rem;
  }
  aside > nav > ul {
    display: block;
    align: center;
    padding:0;
    margin:0;
  }
  aside > nav > ul li{
    display:block
  }
  aside > nav > ul li.socials{
    display:inline-block;
    padding-top:1rem;
  }
  aside > nav{
    margin-top:0;
  }
  aside{
    padding:1rem;
  }
  .sidebar{
    text-align:left;
  }
  .sidebar header h1{
    text-align:center;
    margin-bottom:0;
    padding-bottom:0;
  }
  #logo{
    aspect-ratio: auto 100 / 100; 
    width: 10rem;
  }
}



figure{
  margin:0.5rem;
}
aside > nav > ul a:not(:hover),
header a:not(:hover) {
  text-decoration: none;
}
a:hover{
    background-image: linear-gradient(90deg, #F79533 0%, #F37055 15%, #EF4E7B 30%, #A166AB 44%, #5073B8 58%, #1098AD 72%, #07B39B 86%, #6DBA82 100%);
    background-size: cover;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.skipLink {
  text-decoration: none;
}

/*
 *
 * Blurry image preview utilities.
 *
 */
@keyframes unblur {
  0% {
    filter: blur(var(--blur-radius));
  }

  100% {
    filter: blur(0);
  }
}

img.loaded {
  animation: unblur var(--animation-length) ease-out forwards;
  will-change: filter;
}

img.unloaded {
  filter: blur(var(--blur-radius));
  will-change: filter;
}


/*
 *
 * Overrides for plugin styling and legacy WP positioning
 *
 */
.tweet-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

article{
  margin-bottom:3em;
}

article > .aligncenter {
  display: block;
  margin: 0 auto;
}

/* TODO(slightlyoff): rework w/ variables */
article > blockquote:not(.tweet-card) {
  border: none;
  border: 1px solid #dbd9e6;
  background-color: #e4f1ff;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding: 0.1em 1.5em 0.1em 1.5em;
  font-size: 1em;
  font-style: italic;
  border-radius: 4px;
  background: linear-gradient(to bottom, #eeecfa, #d3d7f1);
}


form{
  width:80%;
} 

form input,
form textarea,
form select{
  padding:0.5em;
  width:100%;
  font-size:1em;
}
@media(min-width: 48rem) {
  form{
  width:60%;
  } 
}