body {background-color: var(--light); color: var(--dark); font-family: 'Inconsolata', monospace; font-size: 10px;}

.social-media {position: sticky; top: 0; height: 20vh;}
.dark-mode {position: sticky; top: 0;}
.menu {position: sticky; top: 0; background-color: var(--light); opacity: 0.9; z-index: 1;}
.information {position: sticky !important; top: 0;}
.footer{background-color: var(--light); opacity: 0.9;}

.blog { justify-content: center; display: flex; position:relative}
  .fullYear {transition: 0.2s ease-in-out; opacity: 0.5;transform: translateX(12%); justify-content: center; width: 80%;display: flex; box-shadow: 2px 2px 3px var(--drop-shadow);border-radius: var(--radius); }
  .fullYear:hover {opacity: 1; transition: 0.2s ease-in-out; background-color: var(--yellow);}
    .left-column {width: 20%; flex-direction: column;}
      h3 {color: var(--dark); font-weight: 100; margin: 20px; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
    .right-column {flex: 1; z-index: 2;}
      .post {display: flex; flex-direction: row; align-items: center; margin: 3px;}
        .post h2 {font-size: 20px; font-weight: 100; margin: 5px; margin-left: 20px;transition: 0.3s ease-in-out;}
        .post h2:hover {color: var(--light); transition: 0.3s ease-in-out;  padding: 3px;}
        .post a {color: var(--dark); text-decoration: none;}
        .post p {font-family:Arial, Helvetica, sans-serif;font-size: 10px; font-weight: 100; margin: 2px; color: var(--grey)}

pre {background-color: var(--code-background); border: var(--code-border); border-radius: 6px; margin: 10px; padding: 10px; width: fit-content;}