@font-face {
    font-family: 'Core Sans A';
    src: url('./Fonts/Core Sans A/coresansa45.woff2') format('woff2'),
         url('./Fonts/Core Sans A/coresansa45.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Core Sans A';
    src: url('./Fonts/Core Sans A/coresansa45it.woff2') format('woff2'),
         url('./Fonts/Core Sans A/coresansa45it.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Core Sans A';
    src: url('./Fonts/Core Sans A/coresansa55.woff2') format('woff2'),
         url('./Fonts/Core Sans A/coresansa55.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Core Sans A';
    src: url('./Fonts/Core Sans A/coresansa55it.woff2') format('woff2'),
         url('./Fonts/Core Sans A/coresansa55it.woff') format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Core Sans N Ex';
    src: url('./Fonts/Core Sans N/coresansn43-webfont.woff2') format('woff2'),
         url('./Fonts/Core Sans N/coresansn43-webfont.woff') format('woff');
    font-weight: 400 normal;
    font-style: normal;
    size-adjust: calc(50% / 0.518);
}

@font-face {
    font-family: 'Core Sans N Ex';
    src: url('./Fonts/Core Sans N/coresansn63it-webfont.woff2') format('woff2'),
         url('./Fonts/Core Sans N/coresansn63it-webfont.woff') format('woff');
    font-weight: 700 bold;
    font-style: italic;
    size-adjust: calc(50% / 0.518);
}

@font-face {
    font-family: 'Alkes';
    src: url('./Fonts/Alkes/alkes-semibolditalic.woff2') format('woff2'),
         url('./Fonts/Alkes/alkes-semibolditalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    /* size-adjust: calc(50% / 0.518); */
}

@font-face {
    font-family: 'Alkes';
    src: url('./Fonts/Alkes/alkes-bolditalic.woff2') format('woff2'),
         url('./Fonts/Alkes/alkes-bolditalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    /* size-adjust: calc(50% / 0.518); */
}

@font-face {
    font-family: 'Arsilon';
    src: url('./Fonts/Arsilon/arsilon.woff2') format('woff2'),
         url('./Fonts/Arsilon/arsilon.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    /* size-adjust: calc(50% / 0.518); */
}

@font-face {
    font-family: 'Garibaldi';
    src: url('./Fonts/Garibaldi/garibaldi-mediumitalic-webfont.woff2') format('woff2'),
         url('./Fonts/Garibaldi/garibaldi-mediumitalic-webfont.woff') format('woff');
    font-weight: 500 600;
    font-style: italic;
    /* size-adjust: calc(50% / 0.518); */
}

@font-face {
    font-family: 'Garibaldi';
    src: url('./Fonts/Garibaldi/garibaldi-bolditalic-webfont.woff2') format('woff2'),
         url('./Fonts/Garibaldi/garibaldi-bolditalic-webfont.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    /* size-adjust: calc(50% / 0.518); */
}

@font-face {
    font-family: 'Kiperman';
    src: url('./Fonts/Kiperman/kiperman-bolditalic-webfont.woff2') format('woff2'),
         url('./Fonts/Kiperman/kiperman-bolditalic-webfont.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    /* size-adjust: calc(50% / 0.518); */
}

:root {
  --op-green: rgb(120,180,60);
  --op-black: rgb(51,63,72);
  --op-blue: rgb(45,60,150);
  --op-purple: rgb(150,60,150);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  min-height: 100%;
  min-height: 100vh;
  scroll-behavior: smooth;
}

html {

  min-height: 100svh;

  font-family: 'Core Sans A', system-ui, -apple-system, BlinkMacSystemFont, 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Symbol', 'Segoe UI Emoji', Arial, Roboto, sans-serif;
  font-weight: normal;
  font-size: 16px;
  font-size-adjust: 0.5;
  line-height: 1.5;

  text-rendering: optimizeLegibility; /* optimizeSpeed, optimizeLegibility, geometricPrecision */
  -webkit-font-smoothing: subpixel-antialiased; // sub-pixel for retina only */
  -moz-osx-font-smoothing: auto; /* use grayscale for light text on dark backgounds, often in dark mode */

  color: rgb(51,63,72);
  color: var(--op-black);

/*
font-family: -apple-system-body
font-family: -apple-system-headline
font-family: -apple-system-subheadline
font-family: -apple-system-caption1
font-family: -apple-system-caption2
font-family: -apple-system-footnote
font-family: -apple-system-short-body
font-family: -apple-system-short-headline
font-family: -apple-system-short-subheadline
font-family: -apple-system-short-caption1
font-family: -apple-system-short-footnote
font-family: -apple-system-tall-body

unit ex is x-height
unit ch is width of 0
*/

}

body {
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-flex-wrap: wrap;
  -ms-justify-content: flex-start;
  -ms-align-items: center;

  display: flex;
  flex-flow: column wrap; 
  justify-content: flex-start;

  margin: 0; /* or "0 auto" for centred layouts with calculated width */
  padding: 16px;

  text-align: center;
}


xxx-.coding {
  font-family: ui-monospace, Menlo, 'Segoe UI Mono', 'Cascadia Code', 'Cascadio Mono', Consolas, 'DejaVu Sans Mono', 'Roboto Mono', monospace;
}

xxx-.system {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Apple Color Emoji', 'Segoe UI', 'Segoe UI Symbol', 'Segoe UI Emoji', Arial, Roboto, sans-serif;
}

xxx-.script {
  font-family: 'Segoe Print', cursive;
}

xxx-.serif {
  font-family: ui-serif, serif;
  font-variant-ligatures: 
  font-variant-numeric: proportional-nums oldstyle-nums stacked-fractions;
}

xxx-.title {
  font-family: ui-serif, serif;
  font-variant-ligatures: discretionary-ligatures;
  font-variant-numeric: proportional-nums oldstyle-nums stacked-fractions;
}

xxx-.tables {
  font-variant-numeric: lining-nums tabular-nums slashed-zero stacked-fractions;
  font-variant-numeric: 
  font-variant-numeric: 

}

h1 {
  font-size: 20px;
  xxx-font-size-adjust: 0.518;
  font-weight: bold;
  font-style: italic;

  xxx-font-size: -webkit-calc(100vw * 36 / 960);
  xxx-font-size: -moz-calc(100vw * 36 / 960);
  xxx-font-size: calc(100vw * 36 / 960);
  xxx-transition: all 2s ease;
}

h2 {
  font-size: 18px;
  font-weight: bold;
  font-style: normal;
}

p {
  xxx-font-size-adjust: 0.518;
  xxx-color: rgb(45,41,38);
  xxx-font-size: 16px;
  xxx-font-size: -webkit-calc(100vw * 12 / 960);
  xxx-font-size: -moz-calc(100vw * 12 / 960);
  xxx-font-size: calc(100vw * 12 / 960);
  xxx-margin: 2px;
}

xxx-.world {
  width: 240px;
  height: 240px;
  top: -4px
}

xxx-.o {
  border: 2px solid #3399ff;
}

xxx-.hello {
  font-size: 4em;
  text-align: center;
  font-family: arial;
  font-weight: bold;
  width: 400px;
  height: 200px;
}

@keyframes textColor {
  0% {
    color: var(--op-black);
  }
  5% {
    color: var(--op-black);
  }
  15% {
    color: var(--op-purple);
  }
  25% {
    color: var(--op-black);
  }
  35% {
    color: var(--op-black);
  }
  45% {
    color: var(--op-blue);
  }
  55% {
    color: var(--op-blue);
  }
  65% {
    color: var(--op-black);
  }
  75% {
    color: var(--op-black);
  }
  85% {
    color: var(--op-green);
  }
  95% {
    color: var(--op-black);
  }
  100% {
    color: var(--op-black);
  }
}

#colorshift {
  font-family: 'Arsilon';
  font-size: 24px;
  animation: textColor 60s infinite;
}