header {
    background: var(--background-color-secondary);
    height: 50px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

#themeSwitch {
    cursor: pointer;
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 25px;
    height: 25px;
    background: url('../images/theme/sun.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#themeSwitch:checked {
    background: url('../images/theme/moon.svg');
}


body {
    margin-top: 20px;
    background-color: var(--bs-body-bg);
    color: #41464d;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

.btn-a-brc-tp:not(.disabled):not(:disabled).active,
.btn-brc-tp,
.btn-brc-tp:focus:not(:hover):not(:active):not(.active):not(.dropdown-toggle),
.btn-h-brc-tp:hover,
.btn.btn-f-brc-tp:focus,
.btn.btn-h-brc-tp:hover {
    border-color: transparent;
}

.btn-outline-blue {
    color: #0d6ce1;
    border-color: #5a9beb;
    background-color: transparent;
}

.btn {
    cursor: pointer;
    position: relative;
    z-index: auto;
    border-radius: .175rem;
    transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s, opacity .15s;
}

.border-2 {
    border-width: 2px !important;
    border-style: solid !important;
    border-color: transparent;
}

.bgc-white {
    background-color: #fff !important;
}


.text-green-d1 {
    color: #277b5d !important;
}

.letter-spacing {
    letter-spacing: .5px !important;
}

.font-bolder,
.text-600 {
    font-weight: 600 !important;
}

.text-170 {
    font-size: 1.7em !important;
}

.text-purple-d1 {
    color: #6d62b5 !important;
}

.text-primary-d1 {
    color: #276ab4 !important;
}

.text-secondary-d1 {
    color: #5f718b !important;
}

.text-180 {
    font-size: 1.8em !important;
}

.text-150 {
    font-size: 1.5em !important;
}

.text-danger-m3 {
    color: #e05858 !important;
}

.rotate-45 {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.position-l {
    left: 0;
}

.position-b,
.position-bc,
.position-bl,
.position-br,
.position-center,
.position-l,
.position-lc,
.position-r,
.position-rc,
.position-t,
.position-tc,
.position-tl,
.position-tr {
    position: absolute !important;
    display: block;
}

.mt-n475,
.my-n475 {
    margin-top: -2.5rem !important;
}

.ml-35,
.mx-35 {
    margin-left: 1.25rem !important;
}

.text-dark-l1 {
    color: #56585e !important;
}

.text-90 {
    font-size: .9em !important;
}

.text-left {
    text-align: left !important;
}

.mt-25,
.my-25 {
    margin-top: .75rem !important;
}

.text-110 {
    font-size: 1.1em !important;
}

.deleted-text {
    text-decoration: line-through;
    ;
}



.highlight {
    cursor: pointer;
    position: relative;
    padding: 0.75rem 1.5rem;
    background-color: var(--bs-secondary-bg);
}

@media (min-width: 768px) {
    .highlight {
        padding:.75rem 1.25rem;
        border-radius: calc(var(--bs-secondary-bg) - 1px)
    }
}
h3 {
    color: var(--bs-emphasis-color)
}

.containerTrain{
    justify-content: center;
    position:relative;
}

.contentTrain {
    position: relative;
    width: 400px;
    height: 311px; 
    margin:0 auto;
    overflow: hidden;
  }
  
  .trackTrain {
    position: absolute;
    width:400px;
    height:5px;
    background-color: #333;
    top:210px;
  }
  
  .trackTrain:before {
    content:"";
    position: absolute;
    width:10px;
    height:5px;
    background-color: #333;
    top:4px;
    box-shadow: 20px 0 #333, -20px 0 #333, -40px 0 #333, -60px 0 #333, -80px 0 #333, 40px 0 #333, 60px 0 #333, 80px 0 #333, 100px 0 #333, 120px 0 #333, 140px 0 #333, 160px 0 #333, 180px 0 #333, 200px 0 #333, 220px 0 #333, 240px 0 #333, 260px 0 #333, 280px 0 #333, 300px 0 #333, 320px 0 #333, 340px 0 #333, 360px 0 #333, 380px 0 #333, 400px 0 #333, 420px 0 #333, 440px 0 #333, -100px 0 #333, -120px 0 #333, -140px 0 #333, 460px 0 #333, 480px 0 #333;
    animation: move 1s linear infinite reverse;
  }
  
  @keyframes move {  
    from { left: -100px; }
      to { left: 100px; }
  }
  
  .trainTrain {
    position: absolute;
    width: 60px;
    height: 40px;
    border:5px solid #333;
    background-color: #9e2a2b;
    border-radius:0 10px 0 0;
    top:140px;
    left:285px;
    animation: scale 1s linear infinite;
  }
  
  @keyframes scale {
    0% {transform: scaleY(1);}
    50% {transform: scaleY(0.99);}
    100% {transform: scaleY(1);}
  }
  
  .trainTrain:before {
    content:"";
    position: absolute;
    border:5px solid #333;
    background-color: #335c67;
    width: 45px;
    height: 70px;
    left:-45px;
    top:-35px;
  }
  
  .trainTrain:after {
    position: absolute;
    content:"";
    width: 113px;
    height: 15px;
    border-radius: 10px;
    border: 5px solid #333;
    background-color: #fff3b0;
    top:30px;
    left:-50px;
  }
  
  .frontTrain {
    position: absolute;
    border: 5px solid #333;
    background-color: #aed9e0;
    box-shadow: inset 2px -5px rgba(255,255,255,0.3);
    width: 28px;
    height: 40px;
    left:-36px;
    top:-20px;
  }
  
  .frontTrain:before {
    content:"";
    position: absolute;
    background-color: #333;
    width:15px;
    height:5px;
    border-radius:10px;
    top: 25px;
    left:70px;
    box-shadow: 0px 10px #333, -50px -45px #333, -86px -45px #333, -22px -41px #333,-11px -41px #333;
  }
  
  .frontTrain:after {
    content:"";
    position: absolute;
    width: 22px;
    height: 30px;
    border: 5px solid #333;
    left:50px;
    top:-16px;
    background-color:#adb5bd;
  }
  
  .wheelsTrain {
    position: absolute;
    z-index:1;
  }
  
  .smallOneTrain, .smallTwoTrain, .smallThreeTrain, .smallFourTrain, .smallFiveTrain, .smallSixTrain {
    position: absolute;
    border: 5px solid #333;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    top: 40px;
    background-color: #e09f3e;
    box-shadow: inset 2px 2px white;
    z-index: 2;
  }
  
  .smallOneTrain {
    left: 30px;
    animation: spin .5s infinite linear;
  }
  
  .smallTwoTrain {
    left:0;
    animation: spin .5s infinite linear;
  }
  
  .smallThreeTrain {
    left:-225px;
    animation: spin .5s infinite linear;
  }
  
  .smallFourTrain {
    left:-190px;
    animation: spin .5s infinite linear;
  }
  
  .smallFiveTrain {
    left:-130px;
    animation: spin .5s infinite linear;
  }
  
  .smallSixTrain {
    left:-95px;
    animation: spin .5s infinite linear;
  }
  
  .bigTrain {
    position: absolute;
    border: 5px solid #333;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    background-color: #e09f3e;
    box-shadow: inset 2px 2px white;
    top: 30px;
    left: -40px;
    animation: spin .5s infinite linear;
  }
  
  .cordTrain {
    position: absolute;
    width: 10px;
    height:5px;
    background-color: #333;
    top:35px;
    left:-59px;
    z-index:3;
  }
  
  .cordTrain:before {
    content:"";
    position: absolute;
    height:5px;
    width: 70px;
    background-color: #333;
    top:15px;
    left:35px;
  }
  
  .cordTrain:after {
    content:"";
    position: absolute;
    background-color: #333;
    border-radius:50%;
    width:15px;
    height:15px;
    top:5px;
    left:29px;
  }
  
  .coachTrain {
    position: absolute;
    width: 85px;
    height: 60px;
    border: 5px solid #333;
    background-color: #9e2a2b;
    left: -140px;
    top: -10px;
  }
  
  .coachTrain:before {
    content:"";
    position: absolute;
    width: 10px;
    height:5px;
    background-color: #333;
    top:40px;
    left:-15px;
  }
  
  .coachTrain:after {
    content:"";
    position: absolute;
    width:85px;
    height:60px;
    border:5px solid #333;
    background-color: #335c67;
    top:-5px;
    left:-100px;
  }
  
  .coachTwoTrain {
    position: absolute;
    border: 5px solid #333;
    background-color: #aed9e0;
    box-shadow: inset 2px -5px rgba(255,255,255,0.3);
    width: 24px;
    height: 32px;
    left: -219px;
    top: 1px;
  }
  
  .coachTwoTrain:before, .coachTwoTrain:after {
    content: "";
    position: absolute;
    border: 5px solid #333;
    background-color: #aed9e0;
    box-shadow: inset 2px -5px rgba(255,255,255,0.3);
    width: 24px;
    height: 32px;
    top: -5px;
  }
  
  .coachTwoTrain:before {
    left:30px;
  }
  
  .coachTwoTrain:after {
    left:90px;
  }
  
  .windowsTrain {position: absolute;
    border: 5px solid #333;
    background-color: #aed9e0;
    box-shadow: inset 2px -5px rgba(255,255,255,0.3);
    width: 24px;
    height: 32px;
    left: -91px;
    top: 1px;
    z-index: 6;
  }
  
  .windowsTrain:before {
    content: "";
    position: absolute;
    background-color: #333;
    height: 5px;
    width: 95px;
    border-radius: 10px;
    top: -16px;
    left: -153px;
    box-shadow: 95px 0px #333;
  }
  
  .windowsTrain:after {   
    content: "";
    position: absolute;
    background-color: #333;
    height: 4px;
    width: 40px;
    top: 46px;
    left: -128px;
    box-shadow: 95px 0 #333;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  #up {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 0;
    top: -30px;
    left: 25.5px;
    z-index:-1;
  }
  
  .steamTrain {
    animation: up 2.5s ease-out infinite; 
  }
  
  .steam2Train {
    animation: up 1.7s ease-out infinite 1s; 
  }
  
  .steam2Train:before {
    content:"";
    position: absolute;
    left:5px;
    width:15px;
    height:15px;
    background-color: #fff;
    border-radius:50%;
    top:20px;
  }
  
  @keyframes up {
    0%{
      transform: translateY(0) translateX(0) scale(0.5);
      opacity: 1;
    }
    100%{
      transform: translateY(-110px) translateX(-80px) scale(1.5);
      opacity: 0.2;
    }
  }