:root {
  --checkerboard-side: 5vw;
  --lighter-green: #99e550;
  --darker-green: #37946e;
}

.light-green {
  color: var(--lighter-green);
}

.dark-green {
  color: var(--darker-green);
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 100;
  font-style: normal;
  src: url('font/IBMPlexMono-Thin.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 100;
  font-style: italic;
  src: url('font/IBMPlexMono-ThinItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 200;
  font-style: normal;
  src: url('font/IBMPlexMono-ExtraLight.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 200;
  font-style: italic;
  src: url('font/IBMPlexMono-ExtraLightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 300;
  font-style: normal;
  src: url('font/IBMPlexMono-Light.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 300;
  font-style: italic;
  src: url('font/IBMPlexMono-LightItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-style: normal;
  src: url('font/IBMPlexMono-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-style: italic;
  src: url('font/IBMPlexMono-Italic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-style: normal;
  src: url('font/IBMPlexMono-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-style: italic;
  src: url('font/IBMPlexMono-MediumItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 600;
  font-style: normal;
  src: url('font/IBMPlexMono-SemiBold.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 600;
  font-style: italic;
  src: url('font/IBMPlexMono-SemiBoldItalic.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 700;
  font-style: normal;
  src: url('font/IBMPlexMono-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 700;
  font-style: italic;
  src: url('font/IBMPlexMono-BoldItalic.ttf') format('truetype');
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--lighter-green);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 400;
  font-size: 16px;
}

a {
  color: var(--darker-green);
  font-weight: 700;
  text-decoration: none;
}

.container {
  display: flex;
  position: absolute;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

@media (max-width: 800px) {
  .container {
    flex-direction: column;
  }

  :root {
    --checkerboard-side: 5vh;
  }
}

.left {
  background-color: white;
  flex: 35%;
  display: flex;
  align-items: center;
}

.intro {
  padding: 2% 5% 0% 5%;
}

.divider {
  --s: var(--checkerboard-side);
  --c1: var(--darker-green);
  --c2: var(--lighter-green);

  --_g: var(--c1) 0 25%, #0000 0 50%;
  background:
    repeating-conic-gradient(at 50% 50%, var(--_g)),
    repeating-conic-gradient(at 50% 50%, var(--_g)),
    var(--c2);
  background-size: var(--s) var(--s);

  flex: 10%;
  min-height: 10%;
}

.right {
  flex: 55%;
  display: flex;
  align-items: center;
}

.projects {
  padding: 2% 5% 5% 5%;
}

.project-item {
  border-bottom: 0.8em dotted var(--darker-green);
  width: 100%;
  padding: 0;
}