:root {
  color-scheme: light dark;
}

body {
  margin: 0px;
  font-family: "Solway", sans-serif;
  margin-bottom: 60px;
  margin-top: 90px;
  color: light-dark(black, #dadad1);
  background-color: light-dark(#f6f6ef, #1a1a1a);
}

html {
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

@media screen and (max-width: 900px) {
  #navbar {
    padding: 0px 20px !important;
    width: calc(100% - 40px) !important;
  }
  .content {
    width: auto !important;
    margin-left: 50px !important;
    margin-right: 50px !important;
  }
  .screenshot-grid {
    display: flex !important;
    flex-flow: row wrap !important;
  }
  .screenshot-grid .screenshot {
    width: calc(50% - 20px) !important;
  }
}
@media screen and (max-width: 670px) {
  #name {
    display: none !important;
  }
  .prog-github {
    position: static !important;
    color: black !important;
  }
  .screenshot-grid {
    display: block !important;
  }
  .screenshot-grid .screenshot {
    width: 100% !important;
    margin: 0px 0px 20px 0px !important;
  }
  .game-link {
    position: static !important;
    margin-bottom: 20px !important;
  }
}
@media screen and (max-width: 490px) {
  .content {
    margin-left: 30px !important;
    margin-right: 30px !important;
  }
  #navbar {
    padding: 0px 5px 0px 10px !important;
    width: calc(100% - 15px) !important;
    font-size: 0.75em !important;
  }
  #navbar .navbar-button {
    padding: 0px 6px !important;
  }
  .article-thumbnail {
    display: none !important;
  }
}
#navbar {
  user-select: none;
  box-shadow: 0px 1px 20px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8));
  padding: 0px calc((100% - 850px) / 2);
  height: 60px;
  position: fixed;
  top: 0px;
  width: 850px;
  color: light-dark(black, #dadad1);
  background-color: light-dark(#f6f6ef, #252527);
  z-index: 1;
}
#navbar .brand .profile-pic {
  background-color: rgb(190, 210, 243);
  width: 44px;
  height: 44px;
  top: 8px;
  float: left;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
#navbar .brand .profile-pic-image, #navbar .brand .profile-pic-shadow {
  border-radius: 10px;
  width: 100%;
  height: 100%;
  position: absolute;
}
#navbar .brand .profile-pic-image {
  top: 0px;
  transition: top 0.1s;
}
#navbar .brand .profile-pic-shadow {
  box-shadow: inset 0px 2px 5px rgb(106, 122, 148);
  position: absolute;
}
#navbar .brand #name {
  display: inline-block;
  line-height: 60px;
  font-size: 1.6em;
  position: relative;
  padding-left: 15px;
}
#navbar .brand:hover #name {
  color: rgb(120, 120, 120);
}
#navbar .brand:hover .profile-pic-image {
  top: 5px;
}
#navbar .navbar-button {
  float: right;
  line-height: 60px;
  padding: 0px 12px;
  font-size: 1.15em;
  color: rgb(110, 110, 110);
  height: 100%;
}
#navbar .navbar-button, #navbar .brand {
  cursor: pointer;
}
#navbar .navbar-button .highlight, #navbar .brand .highlight {
  width: 0px;
  left: 50%;
  height: 4px;
  position: relative;
  top: -4px;
  transition: all 0.2s;
}
#navbar .navbar-button:hover, #navbar .brand:hover {
  color: light-dark(black, #f6f6ef);
}
#navbar .navbar-button:hover .highlight, #navbar .brand:hover .highlight {
  width: 100%;
  left: 0px;
}
#navbar .navbar-button .highlight-about, #navbar .brand .highlight-about {
  background-color: rgb(106, 156, 81);
}
#navbar .navbar-button .highlight-blog, #navbar .brand .highlight-blog {
  background-color: rgb(190, 81, 73);
}
#navbar .navbar-button .highlight-projects, #navbar .brand .highlight-projects {
  background-color: rgb(139, 81, 156);
}
#navbar .navbar-button .highlight-contact, #navbar .brand .highlight-contact {
  background-color: rgb(81, 117, 156);
}
#navbar .navbar-button .highlight-cv, #navbar .brand .highlight-cv {
  background-color: rgb(214, 134, 49);
}

.content {
  position: relative;
  width: 700px;
  margin-left: calc((100% - 700px) / 2);
}
.content .content-header {
  font-size: 2em;
  margin-bottom: 20px;
  color: light-dark(black, #dadad1);
}
.content .headshot {
  width: 150px;
  border-radius: 10px;
  float: right;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.content .content-subheader {
  font-size: 0.9em;
  color: rgb(150, 150, 150);
  position: relative;
  top: -22px;
}
.content .game-link, .content .game-link-second {
  position: absolute;
  display: inline-block;
  top: 8px;
  right: 0px;
  font-size: 1em;
  border-radius: 4px;
  padding: 4px 6px;
  text-shadow: 1px 2px rgba(0, 0, 0, 0.2);
  color: white;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  transition: all 0.1s;
}
.content .game-link .fab, .content .game-link-second .fab {
  padding-left: 6px;
}
.content .game-link:hover, .content .game-link-second:hover {
  transform: scale(1.05);
}
.content .itch-link {
  background-color: rgb(170, 79, 79);
  border: 2px solid rgb(209, 102, 102);
}
.content .play-link {
  background-color: rgb(61, 141, 90);
  border: 2px solid rgb(60, 160, 97);
}
.content .github-link {
  background-color: rgb(178, 87, 231);
  border: 2px solid rgb(121, 35, 109);
}
.content .bitbucket-link {
  background-color: rgb(83, 114, 180);
  border: 2px solid rgb(54, 35, 121);
}
.content .steam-link {
  background-color: rgb(33, 50, 111);
  border: 2px solid rgb(12, 23, 88);
}
.content .game-link-second {
  right: 160px;
  margin-left: 5px;
}
.content .content-body {
  margin-bottom: 50px;
  font-size: 1.05em;
}
.content .content-body .content-text a {
  color: #597c20;
}
.content .content-body .content-text a:hover {
  color: #94ff8e;
}
.content .content-body .game-grid {
  display: flex;
  justify-content: space-evenly;
  flex-flow: row wrap;
}
.content .content-body .game-grid .game-container {
  width: 225px;
  margin: 0px 4px 10px 4px;
}
.content .content-body .game-grid .game-container.small {
  width: 200px;
}
.content .content-body .game-grid .game-container.small .game-thumbnail-container {
  height: 160px;
}
.content .content-body .game-grid .game-container .game-thumbnail-container {
  border-radius: 8px;
  overflow: hidden;
  height: 180px;
  position: relative;
  transition: all 0.2s;
  margin-bottom: 10px;
}
.content .content-body .game-grid .game-container .game-thumbnail-container .game-thumbnail {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.2s;
}
.content .content-body .game-grid .game-container .game-name {
  font-size: 1.4em;
  text-align: center;
  color: light-dark(rgb(60, 60, 60), rgb(220, 220, 220));
  transition: all 0.1s;
  white-space: nowrap;
}
.content .content-body .game-grid .game-container .label-container {
  text-align: center;
  margin-bottom: 6px;
}
.content .content-body .game-grid .game-container:hover .game-thumbnail {
  transform: scale(1.05);
}
.content .content-body .game-grid .game-container:hover .game-name {
  color: light-dark(black, white);
}
.content .content-body .prog-container {
  display: block;
  position: relative;
  background-color: light-dark(rgb(235, 235, 235), #2f2f31);
  border-radius: 6px;
  padding: 5px 10px 10px 10px;
  margin-bottom: 10px;
}
.content .content-body .prog-container .prog-name {
  font-size: 1.1em;
}
.content .content-body .prog-container .prog-desc {
  color: rgb(120, 120, 120);
  font-size: 0.9em;
  padding-top: 4px;
}
.content .content-body .prog-container .prog-github {
  position: absolute;
  top: 7px;
  right: 10px;
  color: rgb(120, 120, 120);
  transition: all 0.1s;
}
.content .content-body .prog-container .prog-github .fab {
  padding-left: 6px;
  transition: all 0.1s;
}
.content .content-body .prog-container:hover .prog-github {
  color: light-dark(black, white);
}
.content .content-body .prog-container:hover .prog-github .fab {
  transform: scale(1.2);
  color: rgb(178, 87, 231);
}
.content .content-body .screenshot-grid {
  position: relative;
  margin-top: 25px;
  margin-bottom: 25px;
  text-align: center;
}
.content .content-body .screenshot-grid .screenshot {
  display: inline-block;
  vertical-align: top;
  width: calc(50% - 24px);
  margin: 12px 10px;
}
.content .content-body .screenshot-grid .screenshot img {
  width: 100%;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.4);
  border-radius: 6px;
}
.content .content-body .article-list-item {
  background-color: light-dark(rgb(234, 232, 228), #2f2f31);
  border-radius: 6px;
  padding: 5px 10px 10px 10px;
  margin-bottom: 20px;
}
.content .content-body .article-list-item .article-title {
  font-size: 1.4em;
  color: light-dark(black, white);
}
.content .content-body .article-list-item .article-preview {
  margin: 20px 0px;
}
.content .content-body .article-list-item .article-thumbnail {
  width: 140px;
  float: right;
  margin: 5px 0px 5px 10px;
  margin-left: 15px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.content .content-body .image-container {
  text-align: center;
  margin: 25px 0px;
}
.content .content-body .image-container img, .content .content-body .image-container video {
  border-radius: 10px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.4);
  max-width: 100%;
  margin: 5px 10px;
}
.content .content-body embed {
  margin-top: 32px;
}
.content .content-footer {
  user-select: none;
}

.link-icon {
  font-size: 2em;
  color: rgb(150, 150, 150);
  margin-right: 15px;
  transition: transform 0.2s, color 0.1s;
  display: inline-block;
}
.link-icon:hover {
  transform: scale(1.2);
}
.link-icon:hover.icon-github {
  color: rgb(178, 87, 231);
}
.link-icon:hover.icon-itch {
  color: rgb(242, 114, 114);
}
.link-icon:hover.icon-play {
  color: rgb(73, 186, 114);
}
.link-icon:hover.icon-twitter {
  color: rgb(72, 178, 240);
}
.link-icon:hover.icon-linkedin {
  color: rgb(53, 110, 184);
}

.label-container {
  margin-top: 4px;
  font-size: 16px;
}

.tech-label {
  border-radius: 12px;
  position: relative;
  margin-left: 3px;
  bottom: 1px;
  color: white;
  font-size: 13px;
  padding: 1px 6px;
  user-select: none;
  white-space: nowrap;
}
.tech-label.label-cplusplus {
  background-color: rgb(55, 65, 79);
}
.tech-label.label-csharp {
  background-color: rgb(66, 68, 189);
}
.tech-label.label-java {
  background-color: rgb(173, 115, 65);
}
.tech-label.label-html {
  background-color: rgb(77, 90, 69);
}
.tech-label.label-scss {
  background-color: rgb(112, 86, 117);
}
.tech-label.label-unity {
  background-color: rgb(86, 88, 90);
}
.tech-label.label-android {
  background-color: rgb(64, 156, 92);
}
.tech-label.label-procgen {
  background-color: rgb(172, 61, 57);
}
.tech-label.label-shadergraph {
  background-color: rgb(149, 131, 51);
}
.tech-label.label-javascript {
  background-color: rgb(165, 143, 46);
}
.tech-label.label-team {
  background-color: #18765f;
}

.article-date, .image-label {
  color: rgb(100, 100, 100);
}

.equation-container {
  margin-left: 7%;
  display: table;
}

.equation-container, .equation {
  background-color: light-dark(rgb(240, 240, 240), rgb(55, 54, 58));
  font-family: Consolas, monospace, serif;
  padding: 4px 6px;
  border-radius: 6px;
}

/*# sourceMappingURL=style.css.map */