@font-face {
  font-family: "Nimbus Sans Regular";
  src: url("/fonts/Nimbus\ Sans\ Cond\ L\ Black.otf Sans\ Cond\ L\ Black.otf")
    format("opentype");
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: "Nimbus Sans Cond L Black", sans-serif;
  height: 100vh;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  font-weight: bold;
}
.container {
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.container.grid,
.container.grid-return,
.container.rows,
.container.columns {
  align-content: stretch;
  align-items: stretch;
  flex-wrap: wrap;
}

.letter {
  text-align: center;
  color: rgb(255, 255, 255);
  font-size: 9vmax;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
}
.container.grid .letter {
  flex-basis: 100%;
}
.container.rows .letter {
  flex-basis: 100%;
}
.container.grid-return .letter {
  flex-basis: 100%;
}
.container.columns .letter {
  flex-basis: 33.3%;
}
.for,
.gsap {
  font-size: 5vmax;
  color: rgb(255, 255, 255);
}
.for, .gsap {
  font-size: 5vmax;
  color: var(--color-surface-white);
}
.for {
  padding: 2px 1.6vmax;
  display: none;
}
.gsap {
  margin-left: 2rem;
  padding: 2px 0;
  display: none;
}

.container.final .for,
.container.final .gsap {
  display: block;
}
.F {
  background: #0063af;
}
.l {
  background: #0063af;
}
.i {
  background: #0063af;
} 
.letter>div{
  overflow: hidden;
  width: 6vmax;
}
.txt1{
  transition: all 0.5s ease-in-out;
}
.txt2{
  transition: all 0.5s ease-in-out 0.3s;
}
.txt3{
  transition: all 0.5s ease-in-out 0.6s;
}
.grid-return>.letter>div{
  transition: all 0.5s ease-in-out !important;
}
.rows>.letter>div{
  width: 100%;
}
.final>.letter>div{
  width: 6vmax;
  transition: all 0.01s ease-in-out;
}

.container.plain .letter {
  background: transparent;
  color: rgb(0, 0, 0);
  padding: 0;
}