/* universal selector */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; }

/* everything related to font gets specified in the body */
body {
  font-family: 'Arial';
  box-sizing: border-box;
  /*so that padding and borders aren't added to total width and height of boxes*/
  font-weight: 400; }

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

.lines {
  width: fit-content;
  background-color: #ff9999; }

.line {
  height: 170px;
  width: fit-content;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 45px; }
  @media only screen and (max-width: 600px) {
    .line {
      height: 70px;
      letter-spacing: 5px; } }
  .line:nth-child(even) {
    left: -25px; }
  .line:nth-child(odd) {
    left: -150px; }
  .line:nth-child(3n) {
    left: -90px; }

.main {
  position: relative;
  width: 100%;
  height: auto; }
  .main--hidden {
    opacity: 0; }
  .main__name {
    word-break: break-all;
    text-align: center; }
    .main__name__letter {
      font-size: 160px;
      position: relative;
      color: rgba(255, 184, 212, 0.6); }
      @media only screen and (max-width: 600px) {
        .main__name__letter {
          font-size: 55px; } }
      .main__name__letter--L {
        animation: animateName 2s ease-in-out 0s infinite alternate; }
      .main__name__letter--A {
        animation: animateName 2s ease-in-out .2s infinite alternate; }
      .main__name__letter--i {
        animation: animateName 2s ease-in-out .4s infinite alternate; }
        .main__name__letter--i::before {
          content: '';
          height: 24px;
          width: 25px;
          display: block;
          position: absolute;
          background: #fffdd0;
          top: 12px;
          left: 10px;
          animation: animateDot 2s ease-in-out .4s infinite alternate;
          z-index: 2; }
          @media only screen and (max-width: 600px) {
            .main__name__letter--i::before {
              height: 9px;
              width: 8px;
              top: 10px;
              left: 4px;
              animation: animateDotMobile 2s ease-in-out .4s infinite alternate; } }
        .main__name__letter--i::after {
          background-color: #ff9999;
          content: '';
          height: 24px;
          width: 25px;
          display: block;
          position: absolute;
          top: 31px;
          left: 10px; }
          @media only screen and (max-width: 600px) {
            .main__name__letter--i::after {
              height: 9px;
              width: 8px;
              top: 10px;
              left: 4px; } }
      .main__name__letter--L-2 {
        animation: animateName 2s ease-in-out .6s infinite alternate; }
      .main__name__letter--A-2 {
        animation: animateName 2s ease-in-out .8s infinite alternate; }

@keyframes animateName {
  @media only screen and (max-width: 600px) {
    from {
      top: 0; }
    to {
      top: 10px; } }
  from {
    top: 0; }
  to {
    top: 35px; } }

@keyframes animateDotMobile {
  from {
    top: 0; }
  to {
    top: 10px; } }

@keyframes animateDot {
  @media only screen and (max-width: 600px) {
    from {
      top: 0; }
    to {
      top: 10px; } }
  from {
    top: 12px; }
  to {
    top: 31px; } }