#maintance-note {
  width: 350px;
  min-height: 400px;
  text-align: center;
  color: white;
  background: linear-gradient(to top, #b61f29 0%, #b80000 87%, #840000 100%);
  z-index: 999;
  position: fixed;
  box-shadow: 1px 0 20px rgba(0,0,0,.3);
  bottom: 15px;
  right: 15px;
  padding: 30px;
}

@media screen and (max-width: 1279px) {
  #maintance-note {
    bottom: 90px;
    width: calc(100% - 30px);
    min-height: auto;
  }
}

#maintance-note h1,
#maintance-note h2,
#maintance-note h3,
#maintance-note h4,
#maintance-note h5,
#maintance-note h6{
  color: #fff;
  margin-top: 0;
 }

#maintance-note .close {
  display: block;
  position: absolute;
  right: 10px;
  top: 10px;
  width: 1.25em;
  height: 1.25em;
  transform: scale(1);
  transition: .5s transform;
}

#maintance-note .close:hover {
  transform: scale(1.2);
}

#maintance-note .close:hover:before,
#maintance-note .close:hover:after {
  background-color: #ccc;
}

#maintance-note .close:before,
.close:after {
  position: absolute;
  left: 50%;
  content: " ";
  height: 1.25em;
  width: 3px;
  background-color: #eee;
}
#maintance-note .close:before {
  transform: rotate(45deg);
}
#maintance-note .close:after {
  transform: rotate(-45deg);
}

#maintance-note .marquee {
  width: 100%;
  height: 30px;
  position: relative;
  overflow: hidden;
}

#maintance-note .marquee:hover .text {
  animation-play-state: paused;
}

#maintance-note .text a {
    color: #fff;
    text-decoration: underline;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
}

#maintance-note .text a:hover {
    text-decoration-style: dashed;
}

#maintance-note .marquee .text {
  display: block;
  width: fit-content;
  position: absolute;
  animation: marquee var(--marquee-duration) linear infinite;
  white-space: nowrap;
  color:  #eee;
}

@keyframes marquee {
  0% { left: 100%; }
  100% { left: calc(var(--marquee-offset) * -1); }
}