body {
  background-color: #333c57 ;
  color: white;
  display: flex;
  flex-direction: column;
  font-family: helvetica;
  font-size: 15pt;
  line-height: 1.4;
}

a {
  color: aqua;
}

h1 {
  margin-top: 10pt;
  margin-bottom: 2pt;
}

.Subtitle {
  margin: 0;
  color: #aaaaaa;
  font-style: italic;
}

main {
  width: 800pt;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  text-align: left;
}


@media (max-width: 800pt) {
  main {
    min-width: 400pt;
    width: 100%;
  }
}

p {
  margin-left: 10pt;
  text-indent: 20pt;
}

img {
  width: calc(100% - 50pt);
}

.MainInfo {
  margin: 10pt;
  text-align: center;
}

.CodeList {
  display: flex;
  flex-direction: column;
  row-gap: 10pt;
}

.CodeItem {
  display: grid;
  flex-direction: column;
  border: 1pt solid #aaaaaa;
  grid-template-areas: "title links" "description description";
  padding: 10pt;
  row-gap: 10pt;
}

.CodeItem .links {
  grid-area: links;
  text-align: right;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  column-gap: 5pt;
  justify-content: right; 
}

.CodeItem .description {
  grid-area: description;
  margin: 0;
}

.CodeItem .title {
  grid-area: title;
  margin: 0;
}

code.zig .keyword,
code.zig .keyword_function,
code.zig .keyword_repeat,
code.zig .keyword_return,
code.zig .keyword_conditional,
code.zig .keyword_exception,
code.zig .keyword_modifier {
  color: #ef7d57;
  font-weight: bold;
}

code.zig .number {
  color: #94b0c2;
}

code.zig .type, 
code.zig .type_builtin {
  color: #FFFFFF ;
}

code.zig .variable_parameter {
  color: #FFFFFF;
}

code.zig .function_builtin,
code.zig .function_call {
  color: #41a6f6;
}

code.zig .comment {
  color: #38b764;
}

code.zig .variable_member,
code.zig .variable {
  color: #73eff7;
}

code {
  display: block;
  border-left: 2pt solid white ;
  padding-left: 10pt;
  margin-left: 20pt;
  background-color: #1a1c2c;
  overflow: auto;
}

code.zig {
  border-left-color: #a7f070;
}

.literal {
  font-family: monospace;
  font-style: italic;
}

.label {
  text-indent: -20pt;
}

.download::before {
  content: "download";
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

footer {
  margin-top: 10pt;
  text-align: center;
  color: #636363;
}