/* RESET */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl,
dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, input, ins, kbd, label, legend,
li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th,
thead, time, tr, tt, u, ul, var, video, main {
  border: 0;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

a, button {
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

article, aside, button, details, figcaption, figure, hgroup, img, menu, nav, svg { display: block; }

button::-moz-focus-inner { border: 0; padding: 0; }

menu, ol, ul { list-style: none; }

::-moz-selection { background: transparent; text-shadow: none; }
     ::selection { background: transparent; text-shadow: none; }





/* HTML, BODY */

html,
body {
  width: 100vw; /* 100vw = 1600px = 160rem; 1vw = 16px = 1.6rem; */
  height: auto;
}

html {
  background-color: var(--clr255);
  color: var(--clr15);
  font-size: 62.5%; /* 100% = 16px = 1rem; 62.5% = 10px = 1rem; */
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
       -o-text-size-adjust: 100%;
          text-size-adjust: 100%;
}

body { /*
  background: repeating-linear-gradient(180deg, transparent 0 2.3rem, var(--clrb2) 2.3rem 2.4rem); 
  background: repeating-linear-gradient(180deg, transparent 0 1.9rem, var(--clrb2) 1.9rem 2rem); */

  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
      -ms-overflow-style: none;
          overflow-x: hidden;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-user-select: none;
   -khtml-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

body::-webkit-scrollbar {
  display: none;
}





/* MAIN, HEADER, SECTION, FOOTER */

main {
  position: relative;
  display: block;
  height: auto;
  min-height: 100vh;
  padding: 0;

  overflow-x: visible;
}

header,
section,
footer {
  position: relative;
  display: grid;
  margin: 0;
  gap: 0 0;

  align-content: normal;
  align-items: normal;
  align-self: normal;
  justify-content: normal;
  justify-items: normal;
  justify-self: normal;
}

header,
section {
  height: auto;
}

footer {
  color: var(--clr38);
  content-visibility: visible;
}

footer:focus,
footer:hover {
  color: var(--clr15);
}





/* TEXT */

a, h1, h2, h3, h4, h5, h6, li, p, span, sup {
  margin: 0;
  padding: 0;

  font-family: "InterVariable", -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: 350;
  -webkit-font-feature-settings: "calt" 1, "cpsp" 1, "liga" 1;
     -moz-font-feature-settings: "calt" 1, "cpsp" 1, "liga" 1;
      -ms-font-feature-settings: "calt" 1, "cpsp" 1, "liga" 1;
          font-feature-settings: "calt" 1, "cpsp" 1, "liga" 1;
  -webkit-font-variant-alternates: character-variant(cv03,cv04,cv09,cv10,cv12,cv13);
     -moz-font-variant-alternates: character-variant(cv03,cv04,cv09,cv10,cv12,cv13);
      -ms-font-variant-alternates: character-variant(cv03,cv04,cv09,cv10,cv12,cv13);
          font-variant-alternates: character-variant(cv03,cv04,cv09,cv10,cv12,cv13);
}

a, em, i, span, sup {
  display: inline-block;
}

em, i {
  font-style: normal;
}

h1, h2, h3, h4, h5, h6, li, p {
  display: block;
}

h2 {
  color: var(--clrb7);
}

span, sup {
  color: var(--clr38);
}

sup {
  vertical-align: super;
}





/* LINKS */

a:active,
a:focus,
a:hover,
a {
  -webkit-transition: color .2s ease-in-out, fill .2s ease-in-out;
     -moz-transition: color .2s ease-in-out, fill .2s ease-in-out;
      -ms-transition: color .2s ease-in-out, fill .2s ease-in-out;
       -o-transition: color .2s ease-in-out, fill .2s ease-in-out;
          transition: color .2s ease-in-out, fill .2s ease-in-out;
}

a:active,
a:focus,
a:hover {
  color: var(--clrb7);
  fill: var(--clrb7);
}

a {
  background-color: transparent;
  color: inherit;
  fill: inherit;
  font-family: inherit;
}

a.a1 {
  text-decoration-color: var(--clr210);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: .1rem;
  text-underline-offset: .4rem;
}





/* OTHER */

li:first-child {
  padding: 0;
}

menu {
  width: auto;
  height: auto;
}

.mb { margin-bottom: 2.4rem; }
.ml { margin-left: 2.4rem; }
.mr { margin-right: 2.4rem; }
.mt { margin-top: 2.4rem; }

.pb { padding-bottom: 2.4rem; }
.pl { padding-left: 2.4rem; }
.pr { padding-right: 2.4rem; }
.pt { padding-top: 2.4rem; }

.nom { margin: 0; }
.nop { padding: 0; }

.ti { text-indent: 2.4rem; }

.th {
  text-indent: -2.4rem;
  margin-left: 2.4rem;
}





/* IPHONE */

@media all and (max-width: 960px) { /*
  body { 
    background: repeating-linear-gradient(180deg, transparent 0 4.9vw, var(--clrb2) 4.9vw 5vw);
  } */

  .mb { margin-bottom: 5vw; }
  .ml { margin-left: 5vw; }
  .mr { margin-right: 5vw; }
  .mt { margin-top: 5vw; }

  .pb { padding-bottom: 5vw; }
  .pl { padding-left: 5vw; }
  .pr { padding-right: 5vw; }
  .pt { padding-top: 5vw; }

  .ti { text-indent: 5vw; }
  
  .th {
    text-indent: -5vw;
    margin-left: 5vw;
  }
}





/* COLORS */

:root {
  --clr15: rgba(15,15,15,1); /* text */
  --clr30: rgba(30,30,30,1);
  --clr45: rgba(45,45,45,1);
  --clr60: rgba(60,60,60,1);
  --clr75: rgba(75,75,75,1);
  --clr90: rgba(90,90,90,1);
  --clr105: rgba(105,105,105,1);
  --clr120: rgba(120,120,120,1);
  --clr135: rgba(135,135,135,1);
  --clr150: rgba(150,150,150,1);
  --clr165: rgba(165,165,165,1); /* span */
  --clr180: rgba(180,180,180,1);
  --clr195: rgba(195,195,195,1);
  --clr210: rgba(210,210,210,1);
  --clr225: rgba(225,225,225,1);
  --clr240: rgba(240,240,240,1);
  --clr255: rgba(255,255,255,1); /* background */
  
  --clr38: rgba(15,15,15,.38); /* text with opacity 38% */
  --clr62: rgba(15,15,15,.62); /* text with opacity 62% */

  --clrb1: rgba(237,245,255,1); /* IBM Blue 10 */
  --clrb2: rgba(207,226,255,1); /* IBM Blue 20 */
  --clrb3: rgba(166,200,255,1); /* IBM Blue 30 */
  --clrb4: rgba(120,169,255,1); /* IBM Blue 40 */
  --clrb5: rgba(069,137,255,1); /* IBM Blue 50 */
  --clrb6: rgba(015,098,254,1); /* IBM Blue 60 */
  --clrb7: rgba(000,067,206,1); /* IBM Blue 70 links */
  --clrb8: rgba(000,045,156,1); /* IBM Blue 80 */
  --clrb9: rgba(000,029,108,1); /* IBM Blue 90 */

  --clrg1: rgba(222,251,230,1); /* IBM Green 10 */
  --clrg2: rgba(167,240,186,1); /* IBM Green 20 */
  --clrg3: rgba(111,220,140,1); /* IBM Green 30 */
  --clrg4: rgba(066,190,101,1); /* IBM Green 40 */
  --clrg5: rgba(036,161,072,1); /* IBM Green 50 */
  --clrg6: rgba(025,128,056,1); /* IBM Green 60 */
  --clrg7: rgba(014,096,039,1); /* IBM Green 70 */
  --clrg8: rgba(004,067,023,1); /* IBM Green 80 */
  --clrg9: rgba(002,045,013,1); /* IBM Green 90 */

  --clrr1: rgba(255,241,241,1); /* IBM Red 10 */
  --clrr2: rgba(255,215,217,1); /* IBM Red 20 */
  --clrr3: rgba(255,179,184,1); /* IBM Red 30 */
  --clrr4: rgba(255,131,137,1); /* IBM Red 40 */
  --clrr5: rgba(250,077,086,1); /* IBM Red 50 */
  --clrr6: rgba(218,030,040,1); /* IBM Red 60 */
  --clrr7: rgba(162,025,031,1); /* IBM Red 70 */
  --clrr8: rgba(117,014,019,1); /* IBM Red 80 */
  --clrr9: rgba(082,004,008,1); /* IBM Red 90 */

  --clry: rgba(241,194,027,1); /* IBM Yellow */
}

@media (prefers-color-scheme:dark) {
  :root {
    --clr255: rgba(15,15,15,1); /* background */
    --clr240: rgba(30,30,30,1);
    --clr225: rgba(45,45,45,1);
    --clr210: rgba(60,60,60,1);
    --clr195: rgba(75,75,75,1);
    --clr180: rgba(90,90,90,1);
    --clr165: rgba(105,105,105,1); /* span */
    --clr150: rgba(120,120,120,1);
    --clr135: rgba(135,135,135,1);
    --clr120: rgba(150,150,150,1);
    --clr105: rgba(165,165,165,1);
    --clr90: rgba(180,180,180,1);
    --clr75: rgba(195,195,195,1);
    --clr60: rgba(210,210,210,1);
    --clr45: rgba(225,225,225,1);
    --clr15: rgba(240,240,240,1); /* text */
    --clr30: rgba(255,255,255,1);

    --clr38: rgba(255,255,255,.38);
    --clr62: rgba(255,255,255,.62);

    --clrb9: rgba(237,245,255,1);
    --clrb8: rgba(207,226,255,1);
    --clrb7: rgba(166,200,255,1); /* links */
    --clrb6: rgba(120,169,255,1);
    --clrb5: rgba(069,137,255,1);
    --clrb4: rgba(015,098,254,1);
    --clrb3: rgba(000,067,206,1);
    --clrb2: rgba(000,045,156,1);
    --clrb1: rgba(000,029,108,1);

    --clrg9: rgba(222,251,230,1);
    --clrg8: rgba(167,240,186,1);
    --clrg7: rgba(111,220,140,1);
    --clrg6: rgba(066,190,101,1);
    --clrg5: rgba(036,161,072,1);
    --clrg4: rgba(025,128,056,1);
    --clrg3: rgba(014,096,039,1);
    --clrg2: rgba(004,067,023,1);
    --clrg1: rgba(002,045,013,1);

    --clrr9: rgba(255,241,241,1);
    --clrr8: rgba(255,215,217,1);
    --clrr7: rgba(255,179,184,1);
    --clrr6: rgba(255,131,137,1);
    --clrr5: rgba(250,077,086,1);
    --clrr4: rgba(218,030,040,1);
    --clrr3: rgba(162,025,031,1);
    --clrr2: rgba(117,014,019,1);
    --clrr1: rgba(082,004,008,1);
  }
}

.clr15 { color: var(--clr15); fill: var(--clr15); }
.clr30 { color: var(--clr30); fill: var(--clr30); }
.clr45 { color: var(--clr45); fill: var(--clr45); }
.clr60 { color: var(--clr60); fill: var(--clr60); }
.clr75 { color: var(--clr75); fill: var(--clr75); }
.clr90 { color: var(--clr90); fill: var(--clr90); }
.clr105 { color: var(--clr105); fill: var(--clr105); }
.clr120 { color: var(--clr120); fill: var(--clr120); }
.clr135 { color: var(--clr135); fill: var(--clr135); }
.clr150 { color: var(--clr150); fill: var(--clr150); }
.clr165 { color: var(--clr165); fill: var(--clr165); }
.clr180 { color: var(--clr180); fill: var(--clr180); }
.clr195 { color: var(--clr195); fill: var(--clr195); }
.clr210 { color: var(--clr210); fill: var(--clr210); }
.clr225 { color: var(--clr225); fill: var(--clr225); }
.clr240 { color: var(--clr240); fill: var(--clr240); }
.clr255 { color: var(--clr255); fill: var(--clr255); }

.clr38 { color: var(--clr38); fill: var(--clr38); }
.clr62 { color: var(--clr62); fill: var(--clr62); }

.clrb1 { color: var(--clrb1); fill: var(--clrb1); }
.clrb2 { color: var(--clrb2); fill: var(--clrb2); }
.clrb3 { color: var(--clrb3); fill: var(--clrb3); }
.clrb4 { color: var(--clrb4); fill: var(--clrb4); }
.clrb5 { color: var(--clrb5); fill: var(--clrb5); }
.clrb6 { color: var(--clrb6); fill: var(--clrb6); }
.clrb7 { color: var(--clrb7); fill: var(--clrb7); }
.clrb8 { color: var(--clrb8); fill: var(--clrb8); }
.clrb9 { color: var(--clrb9); fill: var(--clrb9); }

.clrg1 { color: var(--clrg1); fill: var(--clrg1); }
.clrg2 { color: var(--clrg2); fill: var(--clrg2); }
.clrg3 { color: var(--clrg3); fill: var(--clrg3); }
.clrg4 { color: var(--clrg4); fill: var(--clrg4); }
.clrg5 { color: var(--clrg5); fill: var(--clrg5); }
.clrg6 { color: var(--clrg6); fill: var(--clrg6); }
.clrg7 { color: var(--clrg7); fill: var(--clrg7); }
.clrg8 { color: var(--clrg8); fill: var(--clrg8); }
.clrg9 { color: var(--clrg9); fill: var(--clrg9); }

.clrr1 { color: var(--clrr1); fill: var(--clrr1); }
.clrr2 { color: var(--clrr2); fill: var(--clrr2); }
.clrr3 { color: var(--clrr3); fill: var(--clrr3); }
.clrr4 { color: var(--clrr4); fill: var(--clrr4); }
.clrr5 { color: var(--clrr5); fill: var(--clrr5); }
.clrr6 { color: var(--clrr6); fill: var(--clrr6); }
.clrr7 { color: var(--clrr7); fill: var(--clrr7); }
.clrr8 { color: var(--clrr8); fill: var(--clrr8); }
.clrr9 { color: var(--clrr9); fill: var(--clrr9); }

.clry { color: var(--clry); fill: var(--clry); }

/* COLUMNS, ROWS */

.c1 { grid-column: 1/2; }
.c2 { grid-column: 2/3; }
.c3 { grid-column: 3/4; }
.c4 { grid-column: 4/5; }

.r1 { grid-row: 1/2; }
.r2 { grid-row: 2/3; }
.r3 { grid-row: 3/4; }
.r4 { grid-row: 4/5; }

/* FONTS */

@font-face {
  font-display: swap;
  font-family: "InterVariable";
  font-kerning: normal;
  font-style: normal;
  font-weight: 350;
  src: url("i.woff2") format("woff2");
}

@font-feature-values "InterVariable" {
  @character-variant { cv03: 3; cv04: 4; cv09: 9; cv10: 10; cv12: 12; cv13: 13; }
}