.exode-shipline-heading {
      font-size: 3.5vh;
      font-weight: bold;
      letter-spacing: 3px;
      text-shadow: 0 0 5px #00BFFF, 0 0 10px #00BFFF, 0 0 15px #00BFFF, 0 0 20px #00BFFF, 0 0 30px #00BFFF, 0 0 40px #00BFFF, 0 0 50px #00BFFF;
      color: #FFFFFF;
      margin-left: 6vh;
    }

    .exode-shipline-heading-sizeMedium {
      font-size: 1.75vh;
      font-weight: bold;
      letter-spacing: 1.5px;
      text-shadow: 0 0 2.5px #00BFFF, 0 0 5px #00BFFF, 0 0 7.5px #00BFFF, 0 0 10px #00BFFF, 0 0 15px #00BFFF, 0 0 20px #00BFFF, 0 0 25px #00BFFF;
      color: #FFFFFF;
      margin-left: 3vh;
    }
    /* main container */
    .exode-shipline-container {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* card line */
    .exode-shipline-card {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      background: linear-gradient(to left, #3E54AC 35%, transparent 51%);
      background-size: 200% 100%;
      color: #FFFFFF;
      box-shadow: 0 0 1vh #2E4053;
      margin-bottom: 1.5vh;
      margin-left: -2%;  /* moves lines to the left */
      transition: all 0.5s;
    }
    .exode-shipline-card:hover {
      background-position: bottom right;
      box-shadow: 0 0 2vh #3E54AC;
      border-right-color: #c8eefe;

    }
    .exode-shipline-card-sizeBig {
      width: 75vh;
      height: 12vh;
    }
    .exode-shipline-card-border-sizeBig {
      border: 6px ridge rgba(0, 255, 255, 0.4);
      border-left: none; /* remove left border */
      /*border-radius: 0vh 8vh 8vh 0vh;*/
      border-radius: 0vh 4vh 4vh 0vh;
    }

    .exode-shipline-card-sizeMedium {
      width: 37.5vh;
      height: 6vh;
    }
    .exode-shipline-card-border-sizeMedium {
      border: 6px ridge rgba(0, 255, 255, 0.4);
      border-left: none; /* remove left border */
      /*border-radius: 0vh 8vh 8vh 0vh;*/
      border-radius: 0vh 2vh 2vh 0vh;
    }
    .exode-shipline-card-sizeSmall {
      width: 18.75vh;
      height: 3vh;
    }
    .exode-shipline-card-border-sizeSmall {
      border: 4px ridge rgba(0, 255, 255, 0.4);
      border-left: none; /* remove left border */
      /*border-radius: 0vh 8vh 8vh 0vh;*/
      border-radius: 0vh 1vh 1vh 0vh;
    }
    
    
    
    .exode-shipline-icon-mask-attack {
      min-width: 10vh;
      height: 10vh;
      mask-size: 20vh;
      -webkit-mask-size: 9vh;
      -webkit-mask-image: url(fleet_grid_ship_attack_48_black.png);
      mask-image: url(fleet_grid_ship_attack_48_black.png);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      box-shadow: 0 0 1vh #00FFFF;
    }
    .exode-shipline-icon-mask-cargo {
      min-width: 10vh;
      height: 10vh;
      mask-size: 20vh;
      -webkit-mask-size: 9vh;
      -webkit-mask-image: url(fleet_grid_ship_cargo_48_black.png);
      mask-image: url(fleet_grid_ship_cargo_48_black.png);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      box-shadow: 0 0 1vh #00FFFF;
    }
    .exode-shipline-icon-mask-passenger {
      min-width: 10vh;
      height: 10vh;
      mask-size: 20vh;
      -webkit-mask-size: 9vh;
      -webkit-mask-image: url(fleet_grid_ship_passenger_48_black.png);
      mask-image: url(fleet_grid_ship_passenger_48_black.png);
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      box-shadow: 0 0 1vh #00FFFF;
    }
    .exode-shipline-icon-mask-sizeBig {
      min-width: 10vh;
      height: 10vh;
      mask-size: 20vh;
      -webkit-mask-size: 9vh;
    }
    .exode-shipline-icon-mask-sizeMedium {
      min-width: 5vh;
      height: 5vh;
      mask-size: 10vh;
      -webkit-mask-size: 4.5vh;
    }
    .exode-shipline-icon-mask-sizeSmall {
      min-width: 2.5vh;
      height: 2.5vh;
      mask-size: 5vh;
      -webkit-mask-size: 2.25vh;
    }
        
    /* info text container */
    .exode-shipline-info {
      display: flex;
      font-size: 2.7vh;
      text-transform: capitalize;
    }
    .exode-shipline-info-sizeBig {
      display: flex;
      font-size: 2.7vh;
      text-transform: capitalize;
    }
    .exode-shipline-info-sizeMedium {
      display: flex;
      font-size: 1.35vh;
      text-transform: capitalize;
    }
    .exode-shipline-info-sizeSmall {
      display: flex;
      font-size: 0.8vh;
      text-transform: capitalize;
    }

    .exode-shipline-model-title {
      margin-right: 1vh;
      color: #FFFFFF;
      font-weight: bold;
      text-shadow: 0 0 1vh #00FFFF;
    }

    .exode-shipline-custom-name {
      margin-right: 1vh;
      color: #AAAAAA;
      font-weight: normal;
      text-shadow: 0 0 1vh #00FFFF;
    }

    /* color classes */
    .exode-shipcolor--attack {
      background-color: #FF5733;
    }

    .exode-shipcolor--red1 {
      background-color: #FF5733;
    }

    .exode-shipcolor--red2 {
      background-color: #FF4D4D;
    }

    .exode-shipcolor--cargo {
      background-color: #33CFFF;
    }

    .exode-shipcolor--passenger {
      background-color: #00BFFF;
    }

    /* ANIMATION */
    .ship-list-appear {
      animation: ship-list-appear 1s ease-out backwards;
      transform-origin: 10% 50%;
      animation-delay: 0.5s;
    }


    @keyframes ship-list-appear {
      0% {
        transform: rotate3d(0, 1, 0, 270deg) scaleX(0.1);
        /* or 90deg instead of 270 */
      }

      80% {
        transform: rotate3d(0, 1, 0, 0deg) scaleX(1.1);
      }

      100% {
        transform: rotate3d(0, 1, 0, 0deg) scaleX(1);
      }
    }