@font-face {
    font-family: 'Futura Bk BT';
    font-display: swap;
    font-weight: 100;
    font-stretch: normal;
    font-style: normal;
    src: url(../fonts/FuturaBT-Book.woff) format('truetype');
  }
  @font-face {
    font-family: 'Futura Lt BT';
    font-display: swap;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    src: url(../fonts/FuturaLT-Light.ttf) format('truetype');
  }
  .rowflex {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
  .colflex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }
  .header {
    font-size: 20px;
    font-family: 'Futura Bk BT', Futura, sans-serif;
    color: white;
  }
  .header2 {
    font-size: 14px;
    font-weight: bolder;
    font-family: 'Futura Lt BT', Futura, sans-serif;
    color: white;
  }
  .alttext {
    font-size: 10px;
    font-style: italic;
    color: white;
    opacity: 90%;
  }
  .listreset li {
    list-style: none;
    user-select: none;
  }
  .listreset li a {
    color: var(--link-color);
    text-decoration: none;
    transition: none;
  }
  .listreset li a:hover {
    color: var(--link-hover-color) !important;
  }
  html,
  body,
  ul,
  p,
  h1,
  h2,
  h3 {
    margin: 0;
    padding: 0;
  }
  html {
    background-color: #2b2a33;
    overflow-x: hidden;
    height: 100%;
  }
  li {
    list-style: none;
    user-select: none;
  }
  li a {
    color: var(--link-color) !important;
    text-decoration: underline 0.1em rgba(255, 255, 255, 0);
    transition: text-decoration-color 300ms;
  }
  li a:hover {
    text-decoration-color: var(--link-hover-color);
  }
  body {
    height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    justify-content: unset;
    gap: 2rem;
    overflow-x: hidden;
    background-color: #181a1b;
  }

  main {
    height: inherit;
    overflow-y: scroll;
  }
  main p,
  main a {
    color: white;
    font-family: 'Futura Bk BT', Futura, sans-serif;
  }
  header {
    background-color: url("/assets/images/bg.jpg");
    background-position-y: 40%;
    user-select: none;
  }
  header nav {
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }
  header nav #navmenu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    font-size: 1.3rem;
    margin-top: 1rem;
    font-family: 'Futura Bk BT', Futura, sans-serif;
    margin-bottom: 0.5rem;
  }
  header nav #navmenu a {
    color: white;
  }

  #page a {
    color: crimson !important;
  }
  
  #notpage a {
    color: white !important;
  }

  #redtext {
    color: crimson !important;
  }

  #redtext-centre {
    color: crimson !important;
    text-align: center;
  }

  header #title {
    text-align: center;
    font-family: 'Futura Bk BT', Futura, sans-serif;
    font-size: 32px;
    font-style: bold;
    color: transparent;
    background: crimson;
    background-clip: text;
  }
  footer {
    text-align: center;
    font-family: 'Futura Bk BT', Futura, sans-serif;
    font-size: 14px;
    font-style: normal;
    bottom: 0;
    position: relative;
  }
  main #socials {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    gap: 0.5rem;
  }
  main #socials img {
    filter: brightness(0) saturate(100%) invert(91%) sepia(9%) saturate(500%) hue-rotate(275deg) brightness(105%) contrast(98%) invert(var(--img-invert));
    width: 1.6rem;
    height: 1.6rem;
  }
  main #socials img:hover {
    filter: brightness(0) saturate(100%) invert(92%) sepia(18%) saturate(400%) hue-rotate(290deg) brightness(95%) contrast(90%) invert(var(--img-invert));
  }
  footer #buttons {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    gap: 0.1rem;
  }

  footer p {
    color: white;
  }

  h1 {
    font-size: 20px;
    font-family: 'Futura Bk BT', Futura, sans-serif;
    color: white;
  }
  h2 {
    font-size: 14px;
    font-weight: bolder;
    font-family: 'Futura Lt BT', Futura, sans-serif;
    color: white;
  }
  main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    gap: 2rem;
    justify-content: flex-start;
  }
  main li {
    list-style: none;
    user-select: none;
  }
  main li a {
    color: white;
    text-decoration: none;
    transition: none;
  }
  main li a:hover {
    color: white !important;
  }
  main #intro {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }

  main #intro3 {
    padding-left: 40px;
    padding-right: 40px;
  }

  main #intro p {
    width: 50%;
    align-self: center;
  }
  main #intro2 {
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }
  main #intro2 #peoplediv,
  main #intro2 ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
  }
  main #posts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    justify-content: flex-start;
    gap: 1rem;
  }
  main #posts #blogpostpreview {
    border-bottom: 0.05rem solid #353535;
    border-spacing: 1rem;
  }
  main #posts #blogpostpreview ul {
    display: flex;
    justify-content: left;
    gap: 0.1rem;
  }
  main #posts #blogpostpreview #Summary {
    color: white;
  }
  main #posts #blogpostpreview #BlogPostTitle {
    font-size: 14px;
    font-weight: bolder;
    font-family: 'Futura Lt BT', Futura, sans-serif;
    color: white;
  }

  .d2000 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

  .project-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;
  }