/* CSS Variables */

::selection {
  background: #F4F2EF;
  color: #030617;
}

:root {
  --txt-color-bright: #f4eff0;
  --txt-color-dark: #100F0C;
  --txt-color-highlight: #2221ff;
  --txt-color-highlight-2: #FF6969;

  --c-background-bright: #F4F2EF;
  --c-background-dark: #100F0C;

  --font-Regular-body: "Riegla-Regular", Fallback, sans-serif;
  --font-Bold-headings: "Riegla-Bold", Fallback, sans-serif;
  --font-Italic-emphasised: "Riegraf-Italic", Fallback, sans-serif;

  /* ––––––––––––––––– Responsive Font Variables –––––––––––––––––  */
  --font-size-60: clamp(2rem, 3.8vw, 7rem);
  /* font-size: 60px; Was 1.8 rem as min. value*/
  --font-size-30: clamp(1.3rem, 1.8vw, 2.6rem);
  /* font-size: 30px; */
  --font-size-20: clamp(1rem, 1.25vw, 1.8rem);
  /* font-size: 20px; */
  --font-size-18: clamp(0.9rem, 1vw, 1.4rem);
  /* font-size: 18px; */
  --font-size-16: clamp(0.75rem, 0.8vw, 1.35rem);
  /* font-size: 16px; */

  --shadow: 0px 0px 50px rgba(104, 104, 104, 0.3);

  --shadow-2: 0px 0px 10px rgba(104, 104, 104, 1);

  --font-size-huge: 60px;

  --border-radius: 4px;
}

html {
  box-sizing: border-box;
  /*     font-family: Afirst_frial, Helvetica, sans-serif; */
  font-family: var(--font-Regular-body);
}

body {
  margin: 0px 0px;
  line-height: 1.4;
  background-color: #F4F2EF;
}

.btn {
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
}

img {
  max-width: 100%;
  /*   box-shadow: var(--shadow); */
  display: block;
  border-radius: var(--border-radius);
}

video {
  max-width: 100%;
  /*   box-shadow: var(--shadow); */
  display: block;
  border-radius: 0px;
  border-radius: var(--border-radius);
}

.image {
  max-width: 100%;
  /* box-shadow: var(--shadow); */
  border-radius: 0px;
  border-radius: var(--border-radius);
}

.wrapper {
  padding: 0px 0px;
  overflow-x: hidden;
  width: 100%;
}

/* ––––––––––––––––––––––––––––– General Font Style Classes ––––––––––––––––––––––––– */

.regular {
  font-family: var(--font-Regular-body);
}

.italic {
  font-family: var(--font-Italic-emphasised);
}

.highlight-1 {
  color: var(--txt-color-highlight);
}

.highlight-2 {
  color: var(--txt-color-highlight-2);
}

.bold {
  font-family: var(--font-Bold-headings);
}

.darkText {
  color: var(--txt-color-dark);
}

.brightText {
  color: var(--txt-color-bright) !important;
}

.opacityLow {
  opacity: 0.6;
}

.shadow {
  box-shadow: var(--shadow);
}

.shadow2 {
  box-shadow: var(--shadow-2);
}

.borderR {
  border-radius: var(--border-radius);
}


.textShadow {
  /* text-shadow: var(--c-background-dark) 1px 1px 120px; */
  text-shadow: 0px 4px 20px rgba(16, 15, 12, 0.25);
}

figure {
  margin: 0px;
}

/* Navigation */

.head {
  background-color: #F4F2EF;
  opacity: 1;
}

.main-nav {
  display: grid;
  grid-row-gap: 120px;
  grid-column-gap: 40px;
  list-style: none;
  grid-template-columns: repeat(12, 1fr);
  padding: 15px 0px 15px 0px;
}

.main-nav a {
  text-decoration: none;
  color: #030617;
}

.main-nav a:hover {
  text-decoration: none;
  opacity: 1;
}


.link {
  grid-column: 2/4;
  font-size: var(--font-size-20);
  align-self: center;
}

.link1 {
  grid-column: 9;
  text-align: right;
  font-size: var(--font-size-20);
  align-self: center;
  opacity: 0.62;
}

.link2 {
  grid-column: 10;
  text-align: right;
  font-size: var(--font-size-20);
  align-self: center;
  opacity: 1;
}

.link3 {
  grid-column: 11;
  text-align: right;
  font-size: var(--font-size-20);
  align-self: center;
  opacity: 0.62;
}

/* Section: Top Container */

.top-container {
  display: grid;
  grid-row-gap: 10px;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(1, 1fr);
  padding-top: 3em;
  opacity: 1;
  transition: opacity 0.01s ease-in-out;
  -moz-transition: opacity 0.01s ease-in-out;
  -webkit-transition: opacity 0.01s ease-in-out;
  padding-top: 3em;
}

.top-container div {
  /*     border: #333 1px solid; */
  line-height: 1.4em;
  margin-bottom: 2em;
}


.arrow {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 16px;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––-–––––––––––––– Canvas Content Placement –––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.work {
  display: grid;
  grid-row-gap: 200px;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: minmax(200px, auto);
  opacity: 0;
  padding-bottom: 10em;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––-––––––––––––––––– Secondary Grids  –––––––––––––––––––––––––––––––––––––––– */


.section_Grid {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  margin-top: 8em;
  margin-bottom: 4em;
  padding-top: 8em;
  padding-bottom: 8em;
  grid-column: 1/13;
}

.section_GridLow {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  margin-top: 8em;
  margin-bottom: 4em;
  padding-top: 0em;
  padding-bottom: 4em;
  grid-column: 1/13;
}

.figure_Grid {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 14vh);
  margin-top: 8em;
  margin-bottom: 4em;
  grid-column: 1/13;
}

.figure_GridLow {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  margin-top: 0em;
  margin-bottom: 3em;
  grid-column: 1/13;
}

.figure_Grid_BGCol {
  display: grid;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  margin-top: 4em;
  margin-bottom: 4em;
  grid-column: 1/13;
  padding-top: 12em;
  padding-bottom: 8em;
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––-–––––––––––––––––––––––––– Styles  ––––––––––––––––––––––––––––––––––––––––––– */


.caption {
  /* font-family: var(--font-Regular-body); */
  font-size: var(--font-size-20);
  /* color: var(--txt-color-highlight); */
  /* color: var(--txt-color-dark); */
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  /* opacity: 0.65; */
}

#captionBright {
  font-family: var(--font-Regular-body);
  font-size: var(--font-size-20);
  color: var(--txt-color-bright);
  /* color: var(--txt-color-dark); */
  margin-top: 0.5em;
  margin-bottom: 0.6em;
  /* opacity: 0.65; */
}

.italic {
  font-family: var(--font-Italic-emphasised);
}


/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––-––––––––––––––––– Content –––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


#f_ML_videoHands {
  grid-column: 6/11;
  align-content: center;
  /* margin: 6em; */
}

/* #figure_ML_Hands {
  grid-column: 2/7;
  grid-row: 2/3;
  align-self: center;
  transform: translate(0px, 0px);
} */

#f_ML_library {
  grid-column: 1/6;
  grid-row: 2/3;
  align-self: center;
  z-index: 1;
}

/* –––––––––––––––––––––––-–––––––––––––––––––– ML Confetti  –––––––––––––––––––––––––––––––––––––––––––– */


#f_ML_videoConfetti {
  grid-column: 3/8;
}

/* –––––––––––––––––––––––-–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––-–––––––––––––––––––– Circle Freqel  –––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––-–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */


.first_f {
  max-width: 100%;
  grid-column: 1/6;
  grid-row: 3;
}

/* –––––––––––––––––––––––-–––––––––––––––––––– Layer For 3D effect  –––––––––––––––––––––––––––––––––––––––––––– */

#layer {
  /* background-color: red; */
  width: 500px;
  height: 500px;
  transform: translateZ(30px);
  transform-style: preserve-3d;
}

#layer2 {
  /* background-color: blue; */
  width: 400px;
  height: 400px;
  transform: translateZ(1px);
  transform-style: preserve-3d;
  position: absolute;
  top: 18%;
  left: 18%;
}

#layer3 {
  /* background-color: yellow; */
  width: 300px;
  height: 300px;
  transform: translateZ(20px);
  position: absolute;
  top: 18%;
  left: 18%;
  background-blend-mode: multiply;
}

/* –––––––––––––––––––––––-–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––-––––––––––––––––––– Red Freqel Drawing  –––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––-–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.second_f {
  max-width: 100%;
  grid-column: 5/11;
  grid-row: 4;
  align-self: center;
  background-color: #ED244B;
  /* transform: translate(0px, 400px); */
}

/* –––––––––––––––––––––––-–––––––––––––––––––– Layer For 3D effect  –––––––––––––––––––––––––––––––––––––––––––– */


#layer_f1 {
  width: 550px;
  height: 660px;
  transform: translateZ(30px);
  transform-style: preserve-3d;
}

#layer_f2 {
  width: 550px;
  height: 660px;
  transform: translateZ(20px);
  transform-style: preserve-3d;
  position: absolute;
  top: 0.01%;
  left: 0.01%;
}

#layer_f3 {
  width: 550px;
  height: 660px;
  transform: translateZ(20px);
  transform-style: preserve-3d;
  position: absolute;
  top: 0.01%;
  left: 0.01%;
}

#layer_f4 {
  width: 550px;
  height: 660px;
  transform: translateZ(15px);
  position: absolute;
  top: 0.01%;
  left: 0.01%;
}



/* –––––––––––––––––––––––-–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––-––––––––––––––––––– Data Frame  –––––––––––––––––––––––––––––––––––––––––––––––– */
/* –––––––––––––––––––––––-–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

.upTuneDate {
  grid-column: 8/12;
  grid-row: 3/4;
  margin-top: 6em;
}

#dataLink {
  font-size: 40px;
  font-family: var(--font-Italic-emphasised);
}

.arrowLink {
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 36px;
}


/* Section: Footer */

.copyright {
  background-color: transparent;
  display: grid;
  grid-row-gap: 120px;
  grid-column-gap: 40px;
  grid-template-columns: repeat(12, 1fr);
  margin-top: 20em;
  margin-bottom: 2em;
}


.copyright p {
  grid-column: 5/9;
  text-align: center;
  font-size: var(--font-size-18);
}

.copyright a {
  text-decoration: underline;
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  color: var(--txt-color-dark);
  transition: text-decoration 300ms ease;
}

.copyright a:hover {
  text-decoration: underline transparent;
  cursor: pointer;
}



/* Media Queries */

@media (max-width: 768px) {

  .wrapper {
    padding: 0px 0px;
  }

  .top-container {
    display: grid;
    grid-row-gap: 10px;
    grid-column-gap: 2.7vw;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(1, 1fr);
    padding-top: 0em;
    opacity: 1;
    transition: opacity 0.01s ease-in-out;
    -moz-transition: opacity 0.01s ease-in-out;
    -webkit-transition: opacity 0.01s ease-in-out;
  }

  /* Section: Top Nav */

  .main-nav {
    display: grid;
    grid-row-gap: 120px;
    grid-column-gap: 2.7vw;
    list-style: none;
    grid-template-columns: repeat(12, 1fr);
    padding: 15px 0px 15px 0px;
  }

  .link1 {
    grid-column: 7/8;
    text-align: right;
    align-self: center;
    opacity: 0.62;
  }

  .link2 {
    grid-column: 9/10;
    text-align: right;
    align-self: center;
    opacity: 1;
  }

  .link3 {
    grid-column: 11/12;
    text-align: right;
    align-self: center;
    opacity: 0.62;
  }


  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
  /* ––––––––––––––––––––––––––––––––––––––– Alt Article PLacement –––––––––––––––––––––––––––––––––––––––– */
  /* –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */

  .section_Grid {
    grid-column-gap: 2.7vw;
    margin-top: 2.4em;
    margin-bottom: 2.4em;
    padding-top: 2.4em;
    padding-bottom: 2.4em;
    grid-column: 1/13;
  }

  .section_GridLow {
    grid-column-gap: 2.7vw;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
    padding-top: 0em;
    padding-bottom: 1.2em;
    grid-column: 1/13;
  }

  .figure_Grid {
    grid-column-gap: 2.7vw;
    margin-top: 0.6em;
    margin-bottom: 1.6em;
    grid-column: 1/13;
  }

  .figure_GridLow {
    grid-column-gap: 2.7vw;
    margin-top: 0.2em;
    margin-bottom: 1.4em;
    grid-column: 1/13;
  }

  .figure_Grid_BGCol {
    grid-column-gap: 2.7vw;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    grid-column: 1/13;
  }

  #hello {
    font-size: 36px;
    font-weight: 600;
    display: grid;
    grid-column: 2/12;
    grid-row: 1;
    align-content: center;
    font-family: var(--font-Regular-body);
    color: #F4F2EF;
    opacity: 0;
    margin-top: 0.5em;
    margin-bottom: 0em;
  }

  #hint {
    grid-column: 2/11;
    grid-row: 2;
    align-content: center;
    font-family: var(--font-Regular-body);
    padding-top: 5em;
    padding-bottom: 1em;
    margin-top: 0em;
    margin-bottom: 0em;
    font-size: 16px;
    color: #F4F2EF;
    opacity: 0;
  }

  /* Background */
  .bg-fade-top {
    padding-bottom: 0em;
  }

  .arrow {
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 22px;
  }

  /* Thumbnail Positions*/

  .work {
    display: grid;
    grid-row-gap: 100px;
    grid-column-gap: 2.7vw;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: minmax(200px, auto);
    /* grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); */
    opacity: 0;
    padding-bottom: 40em;
  }

  .copyright {
    background-color: transparent;
    display: grid;
    grid-row-gap: 120px;
    grid-column-gap: 2.7vw;
    grid-template-columns: repeat(12, 1fr);
    margin-top: 2em;
    margin-bottom: 2em;
  }


  .copyright p {
    grid-column: 5/9;
    text-align: center;
  }
}