/** Aileron font **/
@font-face {
    font-family: 'AileronBlack';
    src: url('/assets/fonts/Aileron-Black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronBlack-Italic';
    src: url('/assets/fonts/Aileron-BlackItalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronHeavy';
    src: url('/assets/fonts/Aileron-Heavy-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronHeavy-Italic';
    src: url('/assets/fonts/Aileron-HeavyItalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronBold';
    src: url('/assets/fonts/Aileron-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronBold-Italic';
    src: url('/assets/fonts/Aileron-BoldItalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronSemiBold';
    src: url('/assets/fonts/Aileron-SemiBold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronSemiBold-Italic';
    src: url('/assets/fonts/Aileron-SemiBoldItalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronRegular';
    src: url('/assets/fonts/Aileron-Regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronRegular-Italic';
    src: url('/assets/fonts/Aileron-Italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronLight';
    src: url('/assets/fonts/Aileron-Light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronLight-Italic';
    src: url('/assets/fonts/Aileron-LightItalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronThin';
    src: url('/assets/fonts/Aileron-Thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronThin-Italic';
    src: url('/assets/fonts/Aileron-ThinItalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronUltraLight';
    src: url('/assets/fonts/Aileron-UltraLight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'AileronUltraLight-Italic';
    src: url('/assets/fonts/Aileron-UltraLightItalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

/** Serif font **/
@font-face {
    font-family: 'Cormorant-Bold';
    src: url('/assets/fonts/Cormorant-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'Cormorant-BoldItalic';
    src: url('/assets/fonts/Cormorant-BoldItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'Cormorant-Italic';
    src: url('/assets/fonts/Cormorant-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'Cormorant-Light';
    src: url('/assets/fonts/Cormorant-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'Cormorant-LightItalic';
    src: url('/assets/fonts/Cormorant-LightItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'Cormorant-Medium';
    src: url('/assets/fonts/Cormorant-Medium.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'Cormorant-MediumItalic';
    src: url('/assets/fonts/Cormorant-MediumItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'Cormorant-Regular';
    src: url('/assets/fonts/Cormorant-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'Cormorant-Semibold';
    src: url('/assets/fonts/Cormorant-SemiBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'Cormorant-SemiboldItalic';
    src: url('/assets/fonts/Cormorant-SemiBoldItalic.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;}

/** Monospace font **/
@font-face {
    font-family: 'SpaceMono-Regular';
    src: url('/assets/fonts/SpaceMono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'SpaceMono-Bold';
    src: url('/assets/fonts/SpaceMono-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'SpaceMono-Italic';
    src: url('/assets/fonts/SpaceMono-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;}
@font-face {
    font-family: 'SpaceMono-BoldItalic';
    src: url('/assets/fonts/SpaceMono-BoldItalic.woff') format('woff');
    font-weight: normal;
    font-style: normal;}

:root {
    --main-color: #047d50;
    --background-colour: #100f0f;
    --secondary-background: #1c1b1a;
    --primary-text: #CECDC3;
    --muted-text: #878580;
    --faint-text: #575653;
}

body {
    background-color: var(--background-colour);
    color: var(--primary-text);
    font-family: 'AileronRegular';
    line-height: 140%;
    margin: 0 auto;
    max-width: 65ch;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 5%;
    padding-bottom: 5%;
}

.blog-title {
    font-family: 'AileronBlack-Italic';
    font-size: 22.5px;
    color: var(--main-color);
    float: left;
    position: relative;
    word-spacing: 0.4ch;
    padding-bottom: 4px;
    border-style: none none solid none;
    border-color: var(--faint-text);
    border-width: 3px;
    width: 120px;
}

hr {
    height: 1px;
    background-color: var(--faint-text);
    border: none;
    margin-top: 10;
}

/** default styling **/
a:link {
    font-family: 'AileronBold';
    color: var(--primary-text);
    text-decoration-color: var(--main-color);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    transition-duration: 0.5s;
}

a:visited {
    color: var(--primary-text);
    text-decoration-color: var(--main-color);
}

a:hover {
    font-family: 'AileronBold-Italic';
    transition-duration: 0.5s;
    margin-left: 3px; /** This gives the movement effect **/
}

h1 {
    font-family: 'Cormorant-Bold';
    font-size: 32px;
    padding-top: 80px;
    min-height: 40px;
    line-height: 135%;
}

h2 {
    font-family: 'Cormorant-Bold';
    font-size: 25px;
}

h3 {
    font-family: 'AileronSemiBold';
    font-size: 15px;
}

p {
    font-family: 'AileronRegular';
    font-size: 14px;
}

hr {
    margin-top: 25px;
}

.caption {
    font-family: 'SpaceMono-Regular';
    font-size: 12px;
    color: var(--muted-text);
    text-align: right;
}

blockquote{
  font-size: 18px;
  width:60%;
  margin:30px auto;
  font-family: 'Cormorant-Regular';
  font-style: italic;
  padding:1em 30px 1em 75px;
  border-left:3px solid var(--main-color) ;
  line-height:1.6;
  position: relative;
  background:var(--secondary-background);
  color: var(--muted-text);
}

blockquote::before{
    font-family:'Cormorant-Bold';
    content: "\201C";
    color:var(--main-color);
    font-size:4em;
    position: absolute;
    left: 10px;
    top:-10px;
  }

blockquote span{
  display:block;
  color:var(--muted-text);
  text-align: right;
  font-family: 'SpaceMono-Regular';
  font-size: 12px;
  font-style: normal;
  margin-top:1em;
}

/** tables **/
table {
    font-family: 'SpaceMono-Regular';
    font-size: 12px;
    color: var(--primary-text);
    border-spacing: 2.75px;
    width: 100%;
    table-layout: fixed;
}

table th{
    font-family: 'SpaceMono-Bold';
    color: var(--primary-text);
    background-color: var(--main-color);
    cursor: pointer;
    position: relative;
    height: 45px;
}

th:nth-child(1), td:nth-child(1) {
    width: 50%
}

th:nth-child(2), td:nth-child(2) {
    width: 30%
}

th:nth-child(3), td:nth-child(3) {
    width: 20%
}

table tr{
    color: var(--muted-text);
}

tr:nth-child(even) {
    background-color: var(--secondary-background);
}

tr:hover {
    font-family: 'SpaceMono-Bold';
    color: var(--primary-text);
    transition: 0.5s;
}

#searchInput {
    margin-bottom: 10px;
    margin-left: 2.5px;
    font-family: 'SpaceMono-Regular';
    font-size: 12px;
    font-style: italic;
    width: 61%;
    background-color: var(--background-colour);
    border-bottom: 1px solid var(--faint-text);
    border-top: 0px;
    border-right: 0px;
    border-left: 0;
    color: var(--primary-text);
    outline: none;
    transition: border-color 0.5s;
}

#searchInput:focus {
    border-bottom: 1px solid var(--main-color);
}

#searchInput:hover{
    border-bottom: 1px solid var(--main-color);
}

/** nav bar **/
.topnav {
    color: var(--muted-text);
    font-family: 'AileronLight';
    font-size: 16px;
    word-spacing: .75ch;
    text-align: right;
}

.topnav a:link {
    font-family: 'AileronLight';
    color: var(--muted-text);
    text-decoration: none;
    transition-duration: 0.5s;
}

.topnav a:visited {
    color: var(--muted-text);
}

.topnav a:hover {
    font-family: 'AileronBold-Italic';
    color: var(--primary-text);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: var(--main-color);
    text-underline-offset: 4px;
    transition-duration: 0.5s;
    margin-right: 3px; /** This gives the movement effect **/
}

/** home styling **/
.home-post-date {
    font-family: 'SpaceMono-Regular';
    font-size: 12px;
    color: var(--faint-text);
    letter-spacing: 1.5pt;
}

.home-post-title {
    font-size: 17px;
    color: var(--primary-text);
    line-height: 1pt;
}

.home-post-title a:link {
    font-family: 'AileronSemiBold';
    color: var(--primary-text);
    text-decoration-color: var(--main-color);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
    transition-duration: 0.5s;
}

.home-post-title a:visited {
    color: var(--primary-text);
    text-decoration-color: var(--main-color);
}

.home-post-title a:hover {
    font-family: 'AileronSemiBold-Italic';
    transition-duration: 0.5s;
    margin-left: 3px; /** This gives the movement effect **/
}

.home-post-summary {
    font-family: 'AileronLight';
    color: var(--muted-text);
    letter-spacing: 0.04ch;
    font-size: 14px;
    line-height: 2.75ch
}

/** archive styling **/
.archive-feed-date {
    font-family: 'SpaceMono-Regular';
    color: var(--faint-text);
    letter-spacing: 1.5pt;
    padding-left: 10px;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 3;
}

.archive-feed-title a:link {
    font-family: 'AileronLight';
    font-size: 14px;
    color: var(--muted-text);
    letter-spacing: 0.5pt;
    text-decoration-color: var(--muted-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.archive-feed-title a:visited {
    color: var(--muted-text);
    text-decoration-color: var(--muted-text);
}

.archive-feed-title a:hover {
    font-family: 'AileronBold-Italic';
    color: var(--primary-text);
    text-decoration-color: var(--main-color);
}

/** notes styling **/
.note-post-date {
    font-family: 'SpaceMono-Regular';
    color: var(--faint-text);
    letter-spacing: 1.5pt;
    font-size: 12px;
}

.note-tag a:link {
    font-family: 'SpaceMono-Regular';
    font-size: 12px;
    color: var(--muted-text);
    letter-spacing: 1.5pt;
    text-decoration-color: var(--muted-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.note-tag a:visited {
    color: var(--muted-text);
    text-decoration-color: var(--muted-text);
}

.note-tag a:hover {
    font-family: 'SpaceMono-Italic';
    color: var(--primary-text);
    text-decoration-color: var(--main-color);
}

.youtube-video {
    aspect-ratio: 16 / 9;
    width: 100%;
}

/** footer **/
footer {
    color: var(--faint-text);
    text-align: center;
    border-style: solid none none none;
}

.footer-text {
    font-family: 'AileronRegular';
    font-size: 12px;
}

.footer-links {
    font-size: 12px;
    line-height: 1.75;
    padding-bottom: 1ch;
}

.footer-links a:link {
    font-family: 'AileronRegular';
    color: var(--faint-text);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: var(--faint-text);
    text-decoration-thickness: 1px;
}

.footer-links a:visited {
    color: var(--faint-text);
    text-decoration-color: var(--faint-text);
}

.footer-links a:hover {
    font-family: 'AileronBold-Italic';
    color: var(--primary-text);
    text-decoration-color: var(--main-color);
    transition-duration: 0.5s;
}

img {
    max-width: 100%;
    height: auto;
  }