@font-face {
    font-family: 'InterVar';
    font-weight: 100 900;
    font-style: normal;
    src: url('Inter-VariableFont_opsz\,wght.ttf') format('truetype-variations');
    font-display: swap;
  }
:root {
    --FontFamilyPrimary: 'Inter', 'InterVar', 'Arial';
    --Typography-HeadingFontSizeH1: 30px;
    --ColorBackground: #fff;
    --ColorForeground: #222;
    --Typography-HeadingFontSizeH1: 40px;
    --Typography-HeadingLineHeightH1: 40px;
    --Typography-HeadingLetterSpacingH1: -1px;
    --LetterSpacingLetterSpacing1: 0;
    --LineHeightLineHeight4: 32px;
    --FontSizeFontSize3: 18px;
    --ColorHoverBackground: rgba(0,0,0,0.15);
}
@media (prefers-color-scheme: dark) {
    :root {
        --ColorBackground: #151515;
        --ColorForeground: #fff;
        --ColorHoverBackground: rgba(255,255,255,0.15);
    }
}
p {
  margin: 0 0 1em 0;
}
a {
    color: var(--ColorForeground);
    font-weight: bold;
}
a:hover, a:focus {
    background: var(--ColorHoverBackground);
}
body, html {
    background: var(--ColorBackground);
    color: var(--ColorForeground);
    font-family: var(--FontFamilyPrimary);
}
header {
    flex: 2;
}
main {
    flex: 3;
    font-family: var(--FontFamilyPrimary);
    font-size: var(--FontSizeFontSize3);
    font-weight: 400;
    line-height: var(--LineHeightLineHeight4);
    letter-spacing: var(--LetterSpacingLetterSpacing1);
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
header, header h1 {
    font-family: var(--FontFamilyPrimary);
    font-size: var(--Typography-HeadingFontSizeH1);
    font-weight: 700;
    line-height: var(--Typography-HeadingLineHeightH1);
    letter-spacing: var(--Typography-HeadingLetterSpacingH1);
    text-align: left;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
}
header h1 {
    display: inline;
}
.layout-container {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0px 20px;
    display: flex;
    gap: 126px;
    flex-flow: row wrap;
}
aside {
    max-width: 1200px;
    margin: 65px auto 20px;
    padding: 0px 20px;
    display: block;
    flex-flow: row wrap;
}
aside img {
    width: 100%;
}

@media only screen and (max-width: 800px) {
    .layout-container, aside {
        display: block;
    }
}