@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@100;300;400;500;700&display=swap');

@font-face {
  font-family: Chutz-Variable;
  src: url(/assets/fonts/Chutz-Variable.woff2);
  font-weight: 400 900;
}

* {
  --black-olive: #423e37ff;
  --savoy-blue: #3b60e4ff;
  --chefchaouen-blue: #3f8efcff;
  --snow: #fffbfaff;
  --ash-gray: #aeb7b3ff;
  --old-rose: #c17c74ff;
}

html {
  margin: 0px; 
  padding: 0px; 
  height: 100%; 
}

body {
  margin: 0px; 
  padding: 0px; 
  height: 100%; 
  font-family: Cairo;
  background-color: var(--snow);
  color: var(--black-olive)
}

a {
  color: var(--savoy-blue)
}

a:hover {
  color: var(--chefchaouen-blue)
}

#nav {
  padding: 1em 4em;
  border-bottom: 1px dotted var(--ash-gray);
  display: flex;
  align-items: center;
  column-gap: 1em;
}

a.nav {
  text-decoration: none
}

#zach-baylin {
  color: var(--old-rose);
  font-family: Chutz-Variable;
  font-weight: 700;
  font-size: 2em;
}

#page-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  background-image: url("/assets/images/background.svg");
}


#content {
  height: 100%;
  padding: 0em 2em;
  border: 1px dotted var(--ash-gray);
  border-top: none;
  border-bottom: none;
  background-color: var(--snow)
}

@media (max-width: 600px) {
  #content {
    width: 90%;
  }
}

@media (min-width: 601px) {
  #content {
    width: 70%;
  }
}

.inline-icon {
  width: 1em;
  vertical-align: middle;
}

#socials {
  border-collapse: collapse;
}

.social-icon {
  padding-right: 8px;
}

.social-name {
  padding-right: 12px;
}

#footer {
  border-top: 1px dotted var(--ash-gray);
  padding: 1em 4em;
}

blockquote {
  border-left: 2px solid var(--ash-gray);
  margin: 0.25em 8px;
  padding: 0.25em 8px;
}

code {
  font-family: IBM Plex Mono;
  font-size: .9em;
}

hr {
  border-top: 1px solid var(--ash-gray);
  border-bottom: none
}

#published {
  display: none
}

figure {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

figure > img {
  max-width: 100%
}

figcaption {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-size: .75em;
}