:root {
  font-family: 'Gridlite'; /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}

body {
  background-color: #522398;
  margin: 0;
  padding: 0;
}

#gridcontainer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  width: 100vw;
  height: 100vh;
}

/* Chicago-Schriftzug 1 */

#chicago1 {
  color: #f9461c;
  font-size: 1200%;
  line-height: 0.6;
  font-variation-settings: "wght" 198, "BACK" 1, "RECT" 1, "ELSH" 4;
  text-align: center;
  margin: 0;
  grid-area: 1 / 1 / 13 / 3;
  justify-self: center; 
  align-self: start; 
  transition-property: all;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}

#chicago1:hover {
  color: #f9e300;
  font-variation-settings: "wght" 900, "BACK" 102, "RECT" 1, "ELSH" 4;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

/* Transit-Schriftzug 1 */

#transit1 {
  color: #f9461c;
  font-size: 1000%;
  line-height: 0.8;
  font-variation-settings: "wght" 230, "BACK" 1, "RECT" 0, "ELSH" 4;
  text-align: center;
  margin: 0;
  grid-area: 1 / 8 / 13 / 10;
  justify-self: center; 
  align-self: start; 
  transition-property: all;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}

#transit1:hover {
  color: #f9461c;
  font-variation-settings: "wght" 850, "BACK" 360, "RECT" 200, "ELSH" 3.94;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

/* Authority-Schriftzug 1 */

#authority1 {
  color: #f9461c;
  font-size: 700%;
  line-height: 0.8;
  font-variation-settings: "wght" 0, "BACK" 200, "RECT" 100, "ELSH" 4;
  text-align: center;
  margin: 0;
  grid-area: 1 / 10 / 13 / 11;
  justify-self: center; 
  align-self: end; 
  transition-property: all;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}

#authority1:hover {
  color: #f9e300;
  font-variation-settings: "wght" 0, "BACK" 900, "RECT" 738, "ELSH" 4;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

/* CTA-Schriftzug 1 */

#cta1 {
  color: #f9461c;
  font-size: 1800%;
  line-height: 0.8;
  font-variation-settings: "wght" 100, "BACK" 0, "RECT" 0, "ELSH" 4;
  text-align: center;
  margin: 0;
  grid-area: 4 / 3 / 7 / 7;
  justify-self: center; 
  align-self: start; 
  transition-property: all;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}

#cta1:hover {
  color: #f9e300;
  font-variation-settings: "wght" 600, "BACK" 100, "RECT" 5, "ELSH" 3.5;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

/* CTA-Schriftzug 2 */

#cta2 {
  color: #f9461c;
  font-size: 50vw;
  line-height: 0.8;
  font-variation-settings: "wght" 70, "BACK" 0, "RECT" 0, "ELSH" 4;
  text-align: right;
  margin: 0;
  grid-area: 1 / 1 / 12 / 12;
  justify-self: end; 
  align-self: start; 
  transition-property: all;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}

#cta2:hover {
  color: #f9e300;
  font-variation-settings: "wght" 150, "BACK" 20, "RECT" 5, "ELSH" 3.8;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

/* ChicagoTransitAuthority-Schriftzug 1 */

#chicagotransitauthority1 {
  color: #f9461c;
  font-size: 400%;
  line-height: 0.8;
  font-variation-settings: "wght" 100, "BACK" 0, "RECT" 0, "ELSH" 1.5;
  text-align: left;
  margin: 0;
  grid-area: 10 / 2 / 12 / 6;
  justify-self: start; 
  align-self: end; 
  transition-property: all;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}

#chicagotransitauthority1:hover {
  color: #f9e300;
  font-variation-settings: "wght" 756, "BACK" 1, "RECT" 50, "ELSH" 1;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}

/* ChicagoTransitAuthority-Schriftzug 2 */

#chicagotransitauthority2 {
  color: #f9461c;
  font-size: 1300%;
  line-height: 0.5;
  font-variation-settings: "wght" 100, "BACK" 0, "RECT" 0, "ELSH" 4;
  text-align: right;
  margin: 0;
  grid-area: 6 / 3 / 11 / 13;
  justify-self: end; 
  align-self: end; 
  transition-property: all;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}

#chicagotransitauthority2:hover {
  color: #f9e300;
  font-variation-settings: "wght" 400, "BACK" 0, "RECT" 0, "ELSH" 4;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}