:root {
  --bg-color: rgb(245, 245, 245);
  --text-color: rgb(40, 40, 40);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: rgb(33, 33, 33);
    --text-color: rgb(187, 187, 187);
  }

  a{
    color: rgb(139, 139, 224);
  }
}

body {
    max-width: 45em;
    margin: auto;
    padding: 1.5em;
    font-family: Arial, Helvetica, sans-serif;

    color: var(--text-color);
    background-color: var(--bg-color);

}

nav > a {
    font-size: larger;
}

h2{
    display: inline;
}

li{
    margin-bottom: 0.5em;
}

#projects > li {
    margin:0;
    padding: 0.5em;
    list-style: none;
}

#projects{
    margin: 0;
    padding: 0;
}

#projects > :not(li:last-child) {
    border-bottom: 1.4px solid rgba(134, 134, 134, 0.521);
}

.sub-link{
    display: inline-block;
    border: 1px solid rgb(116, 116, 228);
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px;
    line-height: 1.5em;
    margin:3px
}

h4{
    margin-bottom: 0.5em;
    margin-top: 2em;
}

.thumbnail{
    width: 100%;
}

.halfthumbnail{
    height: 300px;
    margin: 0;
    display: inline-block;
}