@font-face {
    font-family: 'KarioDuplexVar';
    src: URL('fonts/Kario39C3Var-Roman.ttf') format('truetype');
    src: URL('fonts/Kario39C3VarWEB-Roman.woff') format('woff');
    src: URL('fonts/Kario39C3VarWEB-Roman.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    src: URL('fonts/OfficerSansCondWeb-Regular.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    font-weight: bold;
    font-style: italic;
    src: URL('fonts/OfficerSansCondWeb-BoldItalic.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    font-weight: bold;
    src: URL('fonts/OfficerSansCondWeb-Bold.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSansCond';
    font-style: italic;
    src: URL('fonts/OfficerSansCondWeb-RegularItalic.woff') format('woff');
    src: URL('fonts/OfficerSansCondWeb-RegularItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    src: URL('fonts/OfficerSansWeb-Regular.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    font-weight: bold;
    font-style: italic;
    src: URL('fonts/OfficerSansWeb-BoldItalic.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-BoldItalic.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    font-weight: bold;
    src: URL('fonts/OfficerSansWeb-Bold.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'OfficerSans';
    font-style: italic;
    src: URL('fonts/OfficerSansWeb-RegularItalic.woff') format('woff');
    src: URL('fonts/OfficerSansWeb-RegularItalic.woff2') format('woff2');
}

:root {
    --color-dark: #141414;
    --color-neutral: #faf5f5;
    --color-primary: #00ff00;
    --color-secondary: #9673ff;
    --color-additional-01: #ff3719;
    --color-additional-02: #66f2ff;

    --color-primary-tint-01: #009900;
    --color-primary-tint-02: #00be00;
    --color-primary-tint-03: #00d300;
    --color-primary-tint-04: #00ea00;
    --color-primary-tint-05: #a3ff90;
    --color-primary-tint-06: #ccffbe;
    --color-primary-tint-07: #ebffe5;

    --color-secondary-tint-01: #4d2eed;
    --color-secondary-tint-02: #5c33f4;
    --color-secondary-tint-03: #7952fe;
    --color-secondary-tint-04: #b69dfe;
    --color-secondary-tint-05: #d4c4fe;
    --color-secondary-tint-06: #efe7ff;
}

@keyframes font_weight_wave {
    from {
        font-weight: 10;
    } to {
        font-weight: 100;
    }
}
h1 {font-family: 'KarioDuplexVar';
    font-size: 56px;
    font-weight: 10;
    font-kerning: none;
    margin: 0; }
h2 {font-family: 'KarioDuplexVar';
    font-size: 48px;
    font-weight: 10;
    font-kerning: none;
    margin: 0;}
h3 {font-family: 'KarioDuplexVar'; font-size: 28px; }
h1 span, h2 span {
    animation: font_weight_wave 3s ease-in-out 0s infinite alternate both;
   }
body {font-family: 'OfficerSans';
      margin: 0;
      padding: 2em;
      background-repeat: no-repeat;
      background-color: #FAF5F5;
      background-image: url('visual.png');
}
p {text-align: justify;}
a:link { color: #00ff00; }
a:visited { color: #9673ff; }