/* ====================== */
/* FONTS */
/* ====================== */

@font-face {
  font-family: AmazonEmberDisplayHeavy;
  src: url("../fonts/AmazonEmberDisplay_He.otf") format("opentype");
}

@font-face {
  font-family: AmazonEmber;
  src: url("../fonts/AmazonEmber_Rg.otf") format("opentype");
}

@font-face {
  font-family: AmazonEmberMono;
  src: url("../fonts/AmazonEmberMono_Rg.otf") format("opentype");
}

@font-face {
  font-family: AmazonEmberDisplayLight;
  src: url("../fonts/AmazonEmberDisplay_Lt.otf") format("opentype");
}

/* ====================== */
/* VARIABLES */
/* ====================== */

html {
  font-size: 16px;
}

// colors
$squid-ink: #232f3e;
$bg-color: #feefd7; //$squid-ink; // rgba(255, 97, 56, 0.8);
$bg-color2: #feefd7; // rgb(246, 233, 218); //rgb(154, 222, 222);
$font-color: $squid-ink;
$color: rgb(8, 183, 183);
$test-color: $color;
$train-color: #ff8f00;
$ai_color: $color;
// Font-Size
$base-font-size: 1em;
$main-font: AmazonEmber;

// Line-Height
$base-line-height: 1.5;
$header-line-height: 1.25;

/* ====================== */
/* BASE STYLLES */
/* ====================== */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  min-height: 1280px;
  color: #3b3b3b;
  font-size: 24px;
}

.body-text {
  // font-size: 1.1rem;
  text-align: left;
  color: $font-color;
  font-family: $main-font;
  padding: 1rem;
  // padding: 4%;
  line-height: 1.5;
  font-size: 21px;
  // max-width: 500px;
}

.model-header,
.subtitle {
  font-family: AmazonEmberDisplayHeavy;
  font-size: 2.2rem;
  text-align: left;
  padding: 1rem;
  padding-top: 2rem;
}

p,
h1,
h2,
h3,
h4,
a {
  margin: 0;
  font-weight: 400;
  color: $font-color;
}

h2 {
  text-align: left;

  color: $font-color;
}

a:visited,
a:hover {
  color: $color;
  text-decoration: none;
}

a {
  text-decoration: underline;
  font-family: AmazonEmberDisplayHeavy;
}

a:hover {
  color: $font-color;
  background-color: $color;
  text-decoration: none;
}

#intro {
  max-width: 50rem;
  margin: 1rem auto;
  text-align: center;
  padding-top: 3rem;
}

#intro-hed {
  font-size: 6.5rem;
  margin-top: 5px;
  margin-bottom: 0;
  letter-spacing: 1.5px;
  font-family: AmazonEmberDisplayHeavy;
  text-transform: uppercase;
  max-width: 100%;
  margin: auto;
  color: $squid-ink;
}

.intro-sub {
  font-size: 2.2rem;
  text-align: center;
  margin: 1rem;
  font-family: AmazonEmberDisplayHeavy;
  color: $color;
  padding: 2rem;
}
#intro__author,
#intro__date {
  font-size: 1.1rem;
  margin: 0px;
  margin-top: 15px;
  font-family: AmazonEmber;
  padding-bottom: 0px;
  margin-bottom: 0px;
  color: $squid-ink;
  padding-bottom: 3rem;

  a {
    color: $font-color;
  }
}

.model-header {
  font-family: AmazonEmberDisplayHeavy;
  font-size: 2.2rem;
  text-align: left;
}

.model-text {
  max-width: 45rem;
  margin: 0 auto;
  text-align: left;
  font-size: 21px;
  line-height: 1.5em;
  font-family: $main-font;
}

hr {
  max-width: 15%;
  margin: 3rem auto;
  border: 1px solid $font-color;
  opacity: 0.5;
}

#intro {
  margin-bottom: 4rem;
}

/* ====================== */
/* LAYOUT STYLES */
/* ====================== */

#ai {
  color: $color;
  font-family: AmazonEmberDisplayHeavy;
}

body {
  background-color: $bg-color;
}

.section-title {
  font-family: AmazonEmberDisplayHeavy;
  font-size: 2.2rem;
  text-align: center;
}

.bold {
  font-family: AmazonEmberDisplayHeavy;
}

ul {
  margin-left: auto;
  list-style-position: outside;
  // max-width: 45rem;
  margin: 0 auto;
  text-align: left;
  font-size: 21px;
  line-height: 1.5em;
  font-family: $main-font;
}
li {
  text-align: left;
  padding-bottom: 8px;
  font-family: AmazonEmberDisplayLight;

  a {
    font-family: AmazonEmberDisplayHeavy;
  }
}

@media (max-width: 600px) {
  #intro {
    padding-right: 0;
    padding: 20px;
  }

  #intro-hed {
    margin-top: 0;
    font-size: 3.6rem;
    padding-top: 3rem;
  }

  #intro-icon {
    padding-bottom: 0;
  }

  #intro-icon h2 {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .intro-text {
    line-height: 1.5;
    font-size: 21px;
    max-width: 500px;
    // width: 95%;
  }

  .section-title {
    font-size: 2.2rem;
    text-align: center;
    padding-bottom: 1.5rem;
  }

  .body-text,
  .model-text {
    padding: 4%;
    line-height: 1.5;
    font-size: 21px;
    max-width: 500px;
    // width: 95%;
  }

  .model-header {
    padding-top: 2rem;
    font-size: 1.75rem;
    padding-left: 4%;
  }

  /* ====================== */
  /* LAYOUT  */
  /* ====================== */
  #intro {
    padding-right: 0;
    padding: 20px;
  }

  .intro-hed {
    margin-top: 0;
    font-size: 2.5rem;
  }

  #intro-icon {
    padding-bottom: 0;
  }

  #intro-icon h2 {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .section-title {
    font-size: 1.8rem;
  }
}

.katex-eq {
  font-size: 20px;
}

.block-text {
  font-size: 19px;
  text-align: left;
  color: $font-color;
  font-family: $main-font;
  padding: 1rem;
  padding-left: 2rem;
  font-family: AmazonEmberDisplayLight;
  border: 4px solid $squid-ink;
  padding: 1rem;
  width: 80%;
  margin: 1rem auto;

  .katex-eq {
    font-size: 18px;
  }
}

p.list-text {
  font-size: 20px;
  text-align: left;
  color: $font-color;
  font-family: $main-font;
  padding-top: 1rem;
}

.list {
  text-align: left;
  padding: 1rem;
  padding-left: 2rem;
}

.katex-eq-prop {
  font-size: 1rem;
  padding-bottom: 1rem;
}

.katex-eq-list {
  display: block;
  font-size: 1rem;
  // padding-bottom: 1rem
  padding-top: 0.5rem;
  text-align: center;
}

/* ====================== */
/* CHART STYLES  */
/* ====================== */

.scatter-line {
  stroke: red;
  stroke-width: 10;
}

.axis {
  font-family: AmazonEmberDisplayHeavy;
}

.tick line {
  opacity: 0.2;
  stroke-width: 1;
}

#scatter-y-axis {
  font-size: 0.75rem;
  .domain {
    opacity: 0;
  }
}
#scatter-x-axis {
  font-size: 0.75rem;
  .domain {
    stroke-width: 2;
  }
}

.scatter-circle {
  fill: $squid-ink;
  stroke-width: 1.5;
}

.scatter-line {
  fill: none;
  opacity: 0.85;
  stroke: $train-color;
  stroke-width: 4;
}

line.vertical-line {
  stroke: #08b7b7;
  stroke-width: 3;
  opacity: 0.5;
}

/* ====================== */
/* DELTA CHART  */
/* ====================== */

#delta-y-axis {
  .tick,
  .domain {
    opacity: 0;
  }
}
#delta-x-axis {
  font-size: 0.75rem;
  .domain {
    opacity: 0;
  }
}
line.interpretation-vertical-line {
  stroke: $font-color;
  stroke-width: 3;
  opacity: 0.3;
  stroke-dasharray: 3, 3;
}

line.delta-line {
  stroke: $font-color;
  stroke-width: 3;
  opacity: 0.5;
}

.axis-text {
  font-family: AmazonEmberMono;
}

/* ====================== */
/* REFERENCES  */
/* ====================== */

#references {
  padding-top: 2rem;
  ul {
    margin-left: auto;
    list-style-position: outside;
    max-width: 45rem;
    margin: 0 auto;
    text-align: left;
    font-size: 1.2rem;
    line-height: 1.5em;
    font-family: $main-font;
    border: none;
  }
  li {
    text-align: left;
    font-size: 0.95;
  }

  h3 {
    font-family: AmazonEmberDisplayLight;
    font-size: 1.1rem;
    padding: 1rem;
  }
}

#intro-icon {
  display: flex;
  text-transform: uppercase;
  font-weight: 700;
  color: $ai_color;
  flex-direction: row;
  padding-top: 1rem;
  justify-content: center;
}

#intro-icon h2 {
  padding-left: 5%;
  font-family: AmazonEmberDisplayHeavy;
  font-size: 21px;
  margin-top: 10px;
  margin-bottom: 10px;
}
#intro-icon > a {
  display: flex;
  text-decoration: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.logo {
  color: black;
  width: 10rem;
}

#intro-icon a:hover {
  background-color: $bg-color;
}

#top-note {
  font-family: AmazonEmberDisplayLight;
  padding: none;
  text-align: center;
  color: $squid-ink;
  font-size: 1.1rem;
  font-style: italic;
  padding-bottom: 2rem;
}

@media (max-width: 600px) {
  #intro {
    // padding-right: 0;
    padding: 5px;
  }

  #intro-hed {
    margin-top: 0;
    font-size: 3.6rem;
    padding-top: 1rem;
  }

  #intro-icon {
    padding-bottom: 0;
    padding-top: 2rem;
  }

  #intro-icon h2 {
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .intro-sub {
    font-size: 1.5rem;
    margin: 0;
    padding: 2rem 0;
  }

  p.intro-text {
    line-height: 1.5;
    font-size: 21px;
    max-width: 500px;
    // width: 95%;
  }

  .section-title {
    font-size: 2.2rem;
    text-align: center;
    padding-bottom: 1.5rem;
  }

  .body-text,
  .model-text {
    padding: 4%;
    line-height: 1.5;
    font-size: 17.5px;
    max-width: 500px;
    // width: 95%;
  }

  .katex-eq {
    font-size: 16.5px;
  }

  .model-header {
    padding-top: 2rem;
    font-size: 1.75rem;
    padding-left: 4%;
  }

  .subtitle {
    font-size: 21px;
    // padding-bottom: 1rem;
  }

  .block-text {
    width: 95%;
    font-size: 17px;

    .katex-eq {
      font-size: 16px;
    }
  }

  .list {
    padding-left: 1rem;
  }

  p.list-text {
    font-size: 17.5px;
  }

  ul {
    font-size: 17.5px;
  }
}

a.reference-link {
  font-family: AmazonEmber;
}
