@import url(https://fonts.bunny.net/css?family=mulish:400);

abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:0 0}table{border-collapse:collapse;border-spacing:0}input,selec{vertical-align:middle}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}input[type=number] {appearance: textfield; -moz-appearance: textfield;}

:root {
  font-family: 'Mulish', sans-serif;
  
  /* Colour */
  --bg_color: #ffffff;
  --color: #000000;
  --border: #f0f0f0;
  --grey: #D8D8D8;
  
  /* Font */
  --font_L1: 36px;
  --font_L2: 28px;
  --font_L: 22px;
  --font_M: 18px;
  --font_cta: 16px;
  --font_S: 14px;
  --font_XS: 12px;
  
  --line_XL2: 52px;
  --line_XL: 44px;
  --line_L: 36px;
  --line_M: 28px;
  --line_S: 20px;
  
  /* space */
  --space_XS2: 5px;
  --space_XS1: 10px;
  --space_XS: 15px;
  --space_S1: 25px;
  --space_S: 35px;
  --space_M: 50px;
  --space_L: 75px;
  --space_XL: 100px;
  --space_XL2: 150px;
  --space_XL3: 200px;
  
  /* Border */
  --border_XS: 4px;
  --border_S: 7px;
  --border_M: 10px;
  
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 50px;
}

body {
  font-size: var(--font_M);
  line-height: var(--line_M);
  font-weight: 400;
  animation-name: transitionIn;
  animation-duration: 0.7s;
  margin: 0px;
  padding: 75px 15px;
  background-color: var(--bg_color);
  color: var(--color);
  animation-name: transitionIn;
  animation-duration: 0.7s;
  transition: padding 0.3s;
}

/*  */
hr {
  border-color: var(--border);
  border: 0px;
}
.space_below_header {
  margin-block: var(--space_S);
}
.space_between_stream_posts, .space_above_stream_posts {
  margin-block: var(--space_L);
}
main, header, footer, hr, .pages {
  width: 100%;
  max-width: 675px;
  margin: auto;
}
p {
  margin: 25px 0px;
}
img {
  border-radius: var(--border_M);
  width: 100%;
}


/* Links */
a {
  color: var(--color);
  text-decoration-thickness: auto;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity 0.3s cubic-bezier(.42, 0, .58, 1);
}
a:hover {
  opacity: 0.4;
  transition: opacity 0s cubic-bezier(.42, 0, .58, 1);
}
.link_block {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-block-start: 30px;
}
.cta {
  font-size: var(--font_cta);
  line-height: var(--font_cta);
  background-color: var(--color);
  color: var(--bg_color);
  padding: var(--space_XS) var(--space_XS);
  border-radius: var(--border_S);
  text-decoration: none;
}
.cta2 {
  font-size: var(--font_S);
  color: var(--color);
}
/* END */



h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none;
}
blockquote {
  background-color: transparent !important;
  border-radius: 0px !important;
  margin-block: 50px !important;
  /* margin-inline: var(--space-M) !important; */
  margin-left: 0px !important;
  padding: 0px 0px 0px 15px !important;
  border-left: 1px solid var(--color) !important;
  font-style: italic !important;
}
article ul li {
  margin-left: 25px;
}
footer {
  display: none;
}
small {
  font-size: var(--font_S);
}
header, nav  {
  display: flex;
  gap: 25px;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font_S);
  line-height: var(--font_S);
}
header, nav a {
  text-decoration: none;
}
article img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  display: block;
  border-radius: var(--border_M);
}
.video, article iframe {
  border-radius: 10px;
  overflow: hidden;
}


/* Summary and Details */
summary {
  font-weight: 300;
}
summary:focus {
  outline: 0px;
}
summary::marker {
  font-size: 0em;
}
details:not(.popover)>summary::before {
  content: "" !important;
  margin-inline-end: 0px !important;
}
details:not(.popover)>summary::after {
  content: "+";
  display: inline-block;
  margin-inline-start: 0.5ch;
  transition: 300ms;
  font-size: 18px;
}
details[open]:not(.popover)>summary::after {
  transform: rotate(45deg);
  transition: 300ms;
}
details {
  overflow: hidden;
}
details:hover {
  cursor: pointer;
}
details::details-content {
  opacity: 0;
  block-size: 0;
  transition-behavior: allow-discrete;
  transition: opacity 1s;
}
details[open]::details-content {
  opacity: 1;
  block-size: auto;
  transition-behavior: allow-discrete;
  transition: opacity 1s;
  padding-left: 15px !important;
  border-left: 1px solid var(--color) !important;
  /* font-style: italic !important; */
}
details > div {
  padding: 0px !important;
  border-radius: 0px !important;
  background-color: transparent !important;
}
details > div > div > iframe {
  margin-top: 0px !important;
}
/* END */



h1 {
  font-size: var(--font_L1);
  line-height: var(--line_XL);
  font-weight: 300;
  margin-bottom: var(--space_S);
}
h2 {
  font-size: var(--font_L2);
  line-height: var(--line_L);
  font-weight: 300;
  margin-bottom: var(--space_S);
}
.post_footer, .list_footer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  line-height: 20px;
  margin-block-start: 50px;
}
.list_footer {
  margin-block-start: 25px !important;
}
iframe.letterbird-embed {
  max-width: 100% !important;
}

/* Pagination */
.pagination {
  display: flex;
  gap: 15px;
  justify-content: center;
  font-size: var(--font_S);
}
.pagination-current {
  color: var(--grey);
  cursor: not-allowed;
}

@media (max-width: 705px) {
  body {
    padding: 25px 15px;
    transition: padding 0.3s;
  }
}

@media (prefers-color-scheme: dark) {
  .user-site-footer .trix-content a {
    filter: brightness(0) saturate(100%) invert(100%) sepia(54%) saturate(0%) hue-rotate(317deg) brightness(109%) contrast(92%);
  }
  
  body {
    background-color: #1E1D1B;
    color: #DFDDD9;
  }
  a {
    color: #DFDDD9;
  }
  .cta {
    background-color: #DFDDD9;
    color: #1E1D1B;
  }
  .cta2 {
    color: #DFDDD9;
  }
  blockquote {
    border-left: 1px solid #DFDDD9 !important;
  }
  details[open]::details-content {
    border-left: 1px solid #DFDDD9 !important;
  }
  ::selection {
    color: #1E1D1B;
    background: #DFDDD9;
  }
  ::-moz-selection {
    color: #1E1D1B;
    background: #DFDDD9;
  }
}

@keyframes transitionIn {
  from {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);}
  to {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
  }
}

@keyframes transitionOut {
  from {
    opacity: 0;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);}
  to {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    filter:alpha(opacity=100);
  }
}
@keyframes slideUp {
  from { top: 25px; }
  to { top: 0px; }
}
@keyframes slideDown {
  from { top: -25px; }
  to { top: 15px; }
}