style.css

* {
  margin: 0;
  padding: 0;
}
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap")
html {
  line-height: 1;
}
:root {
  --c-blue: rgba(2, 8, 34, 1);
  --c-white: rgba(233, 233, 233, 1);
  --c-gold: rgba(233, 233, 89, 1);
  --c-black: rgba(1, 1, 1, 1);
  --pad-side: max(21px);
  --pad-vertical: max(34px);
}
h1 {
  font-size: 21px;
  font-weight: 300;
}
h2 {
  font-size: 17px;
  font-weight: 300;
}
h2.title {
  padding-top: 8px;
  text-align: center;
}
h3 {
  font-size: 13px;
  font-weight: 300;
}
h2 span {
  font-size: 13px;
}
p {
  font-weight: 300;
}
.image-container {
  margin: 8px;
  display: flex;
  justify-content: center;
}
a {
  font-weight: 300;
  color: var(--c-white);
  text-decoration: none;
  transition: all 0.8s;
}
button {
  border: none;
}
.light a {
  color: var(--c-blue);
}
ol,
ul {
  list-style: none;
}
section {
  margin-bottom: 34px;
}
blockquote {
  border-left: 2px solid var(--c-gold);
  padding-left: 8px;
  padding-bottom: 5px;
}
.light blockquote {
  border-left: 2px solid var(--c-black);
}
main {
  background: var(--c-blue);
  color: var(--c-white);
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  transition: all 0.8s;
}
.link {
  text-decoration: underline;
}
.link:hover {
  color: var(--c-gold);
  border: 0.5px solid var(--c-gold);
}
.light .link:hover {
  color: var(--c-black);
  border: 0.5px solid var(--c-black);
}
.link-new-tab {
  text-decoration: underline;
}
.link-new-tab:hover {
  color: var(--c-gold);
  text-shadow: var(--c-gold) 1px 0 5px;
}
.light .link-new-tab:hover {
  color: var(--c-black);
  text-shadow: var(--c-black) 1px 0 13px;
}
.site-frame {
  position: absolute;
  left: 13px;
  right: 13px;
  top: 8px;
  bottom: 8px;
  border: 1px solid var(--c-white);
  overflow: auto;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.light .site-frame {
  border: 1px solid var(--c-blue);
}
.header {
  position: relative;
  margin-top: 13px;
  margin-bottom: 13px;
  margin-left: 8px;
  margin-right: 8px;
}
span.c2 {
  transition: all 0.8s;
  color: var(--c-gold);
  text-shadow: var(--c-gold) 1px 0 21px;
}
.light span.c2 {
  color: var(--c-black);
  text-shadow: var(--c-black) 5px 0 55px;
}
.header-label {
  margin-top: 5px;
}
.header-nav {
  margin-top: 13px;
  pointer-events: auto;
  width: 89px;
}
.header-nav ol {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.header-nav ol li {
  position: relative;
}
.header-nav ol li a:hover {
  color: var(--c-gold);
  border: 0.5px solid var(--c-gold);
}
.light .header-nav ol li a:hover {
  color: var(--c-black);
  border: 0.5px solid var(--c-black);
}
.frame {
  position: relative;
  margin-top: 13px;
  margin-bottom: 13px;
  margin-left: 8px;
  margin-right: 8px;
  border: 1px solid var(--c-white);
}
.light .home-frame {
  border: 1px solid var(--c-blue);
}
.light .resume-frame {
  border: 1px solid var(--c-blue);
}
.light .projects-frame {
  border: 1px solid var(--c-blue);
}
.light .get-in-touch-frame {
  border: 1px solid var(--c-blue);
}
.content-frame {
  position: relative;
  margin-top: 3px;
  margin-bottom: 3px;
  width: 100%;
  border-top: 1px solid var(--c-white);
  border-bottom: 1px solid var(--c-white);
  overflow: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.light .content-frame {
  border-top: 1px solid var(--c-blue);
  border-bottom: 1px solid var(--c-blue);
}
.content-frame::-webkit-scrollbar {
  display: none;
}
.content {
  position: relative;
  margin-top: 13px;
  margin-bottom: 13px;
  margin-left: 8px;
  margin-right: 8px;
  line-height: 1.3;
}
.content ol {
  display: flex;
  flex-direction: column;
}
.featured-projects ol {
  row-gap: 8px;
}
.publications ol {
  row-gap: 8px;
}
.featured-on ol {
  row-gap: 8px;
}
.publication {
  padding-left: 8px;
  border-left: 2px solid var(--c-gold);
}
.light .publication {
  border-left: 2px solid var(--c-black);
}
.footer {
  position: relative;
  margin-top: 13px;
  margin-bottom: 13px;
  margin-left: 8px;
  margin-right: 8px;
}
.get-in-touch-text {
  margin-bottom: 5px;
}
.get-in-touch-frame {
  border: 1px solid var(--c-white);
}
.get-in-touch-container {
  position: relative;
  margin: 8px;
  pointer-events: auto;
}
.get-in-touch-container ol {
  display: flex;
  flex-direction: column;
  row-gap: 8px;
}
.get-in-touch-container ol li ._text {
  transition: all 0.8s;
}
.get-in-touch-container ol li ._text:hover {
  color: var(--c-gold);
  text-shadow: var(--c-gold) 1px 0 5px;
}
.light .get-in-touch-container ol li ._text:hover {
  color: var(--c-black);
  text-shadow: var(--c-black) 1px 0 13px;
}
.toggle {
  background-color: var(--c-white);
  padding: 0.5px;
  color: var(--c-blue);
  cursor: pointer;
  font-size: 13px;

  position: absolute;
  left: 0px;
  top: 55%;
  margin-top: -55px;

  text-align: center;
}
.light .toggle {
  background-color: var(--c-blue);
  color: var(--c-gold);
}
.toggle:hover {
  text-shadow: var(--c-black) 1px 0 13px;
}
.light .toggle:hover {
  text-shadow: var(--c-gold) 2px 0 5px;
}
.toggle-text {
  transition: all 0.8s;
}
.toggle ._theme-1::before {
  content: "L";
}
.toggle ._theme-2::before {
  content: "I";
  text-align: center;
}
.toggle ._theme-3::before {
  content: "G";
}
.toggle ._theme-4::before {
  content: "H";
}
.toggle ._theme-5::before {
  content: "T";
}
.toggle ._theme-6::before {
  content: "\00a0";
}
.toggle ._theme-7::before {
  content: "M";
}
.toggle ._theme-8::before {
  content: "O";
}
.toggle ._theme-9::before {
  content: "D";
}
.toggle ._theme-10::before {
  content: "E";
}
.light {
  background-color: var(--c-white);
  color: var(--c-blue);
}
.light .toggle ._theme-1::before {
  content: "D";
}
.light .toggle ._theme-2::before {
  content: "A";
}
.light .toggle ._theme-3::before {
  content: "R";
}
.light .toggle ._theme-4::before {
  content: "K";
}
.light .toggle ._theme-5::before {
  content: "S";
}
.light .toggle ._theme-6::before {
  content: "\00a0";
}
.light .toggle ._theme-7::before {
  content: "M";
}
.light .toggle ._theme-8::before {
  content: "O";
}
.light .toggle ._theme-9::before {
  content: "D";
}
.light .toggle ._theme-10::before {
  content: "E";
}

img.rewrite-to-rust-meme {
  width: 233px;
  height: auto;
}

img.design-process {
  width: 233px;
  height: auto;
}

.blob-container {
  display: flex;
  position: relative;
  height: 377px;
  justify-content: center;
  align-items: center;
}
.blob {
  position: relative;
  width: 144px;
  height: 144px;
  color: var(--c-white);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.8s;
}
.blob::before {
  position: absolute;
  border: 0.3px solid var(--c-white);
  border-radius: 89% 55% 89% 55% / 55% 89% 55% 55%;
  width: 100%;
  height: 100%;
  content: "";
  left: 0;
  top: 0;
  animation: rotate 8s ease-in-out infinite;
}
.blob::after {
  position: absolute;
  border: 0.3px solid var(--c-gold);
  border-radius: 55% 55% 55% 55% / 55% 34% 55% 55%;
  box-shadow: var(--c-gold) 1px 0 5px;
  width: 100%;
  height: 100%;
  content: "";
  left: 0;
  top: 0;
  animation: rotate 8s ease-in-out infinite;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(0.8);
  }
  50% {
    transform: rotate(180deg) scale(2.1);
  }
  100% {
    transform: rotate(360deg) scale(0.8);
  }
}
.light .blob {
  color: var(--c-black);
}
.light .blob::before {
  border: 0.3px solid var(--c-blue);
}
.light .blob::after {
  border: 0.3px solid var(--c-black);
  box-shadow: none;
}

@media (min-width: 426px) {
  .site-frame {
    left: var(--pad-side);
    right: var(--pad-side);
    top: var(--pad-vertical);
    bottom: var(--pad-vertical);
  }
  .header {
    margin-top: 13px;
    margin-bottom: 13px;
    margin-left: 21px;
    margin-right: 21px;
  }
  .frame {
    margin-left: 21px;
    margin-right: 21px;
    margin-bottom: 13px;
  }
  .footer {
    margin-left: 21px;
    margin-right: 21px;
    margin-bottom: 13px;
  }
  .get-in-touch-text {
    font-size: 21px;
  }
  .get-in-touch-frame {
    width: 311px;
    border: 1px solid var(--c-white);
  }
  .get-in-touch-container ol {
    row-gap: 13px;
  }
  .toggle {
    padding: 4px;
  }
  img.design-process {
    width: 317px;
    height: auto;
  }
}
@media (min-width: 769px) {
  .header {
    font-size: 17px;
  }
  .header-nav ol {
    row-gap: 13px;
  }
  h1 {
    font-size: 34px;
  }
  h2 {
    font-size: 21px;
  }
  h3 {
    font-size: 17px;
  }
  h2 span {
    font-size: 17px;
  }
  .frame {
    font-size: 17px;
  }
  .footer {
    font-size: 17px;
  }
  .get-in-touch-container ol {
    row-gap: 21px;
  }
  .blob-container {
    height: 610px;
  }
  .blob {
    width: 233px;
    height: 233px;
  }
  img.design-process {
    width: 610px;
    height: auto;
  }
  img.rewrite-to-rust-meme {
    width: 377px;
    height: auto;
  }
}
@media screen and (min-width: 1024px) and (min-height: 500px) {
  .header-label {
    margin-top: 5px;
  }
  .header-nav {
    margin-top: 34px;
  }
  .frame {
    position: absolute;
    right: 21px;
    bottom: 13px;
    margin: 0px;
    border: 1px solid var(--c-white);
  }
  .home-frame {
    height: 322px;
    width: 514px;
  }
  .resume-frame {
    top: 13px;
    width: 514px;
  }
  .projects-frame {
    top: 13px;
    width: 514px;
  }
  .content-frame {
    position: absolute;
    top: 3px;
    bottom: 3px;
    overflow: scroll;
  }
  .content {
    margin-top: 21px;
    margin-bottom: 21px;
    margin-left: 13px;
    margin-right: 13px;
  }
  .footer {
    position: absolute;
    left: 21px;
    bottom: 13px;
    margin: 0px;
    pointer-events: none;
  }
  img.design-process {
    width: 377px;
    height: auto;
  }
}
@media screen and (min-width: 1440px) and (min-height: 500px) {
  .projects-frame {
    top: 13px;
    width: 832px;
  }
  img.design-process {
    width: 610px;
    height: auto;
  }
}