#search {
     width: 750px;
     max-width: 90vw;
     padding: 6px;
     margin-bottom: -10px;
     font-size: 14px;
     line-height: 1em;
     color: #cecfd0;
     box-shadow: 2px 2px 5px rgba(227, 228, 237, .2);
     border: 2px solid rgba(255, 255, 255, .2);
     backdrop-filter: blur(10px);
     border-radius: 5px;
     background: rgba(0, 0, 0, 0.2);
     transition: box-shadow 0.2s, background-color 0.1s;
}

#search::placeholder {
     color: #99999b;
}

#search:focus {
     outline: none;
     box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
     background-color: rgba(57, 57, 57, 0.2);
}

#chart-wrap {
     display: block;
     width: 775px;
     max-width: calc(90vw + 25px);
     margin: 20px auto 20px auto;
     height: calc(100vh - 133.6px - 20px - 32px - 50px);
     overflow-y: scroll;
     overflow-x: hidden;
}

#charts {
     padding-top: 10px;
     display: flex;
     flex-direction: column;
     width: 775px;
     max-width: calc(90vw + 25px);
     margin: 0;
     align-items: center;
}

#charts>div {
     display: flex;
     flex-direction: column;
     position: relative;
     width: calc(750px - 24px);
     max-width: calc(90vw - 24px);
     align-items: center;
     padding: 10px;
     margin-bottom: 10px;
     box-shadow: 2px 2px 5px rgba(227, 228, 237, .2);
     border: 2px solid rgba(255, 255, 255, .2);
     backdrop-filter: blur(10px);
     border-radius: 5px;
     background: rgba(0, 0, 0, 0.2);
     transition: box-shadow 0.2s, background-color 0.1s;

     &:hover {
          box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
          background-color: rgba(57, 57, 57, 0.2);
     }

     >h1,h2,h3 {
          margin: 0;
          text-align: left;
          width: fit-content;
     }

     a {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
     }

     h1 {
          font-size: 24px;
          letter-spacing: 2px;
     }

     h2 {
          font-size: 16px;
          font-weight: normal;
     }

     h3 {
          font-size: 12px;
          font-weight: normal;

          &.id {
               width: 100%;
          }
     }

     img {
          margin-right: 10px;
          border-radius: 2.5px;
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
     }

     >div {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: calc(750px - 24px);
          max-width: calc(90vw - 24px);

          >div {
               position: relative;
               flex-direction: column;
               width: 640px;
               white-space: nowrap;
               overflow-x: hidden;

               >* {
                    margin: 0;
                    text-align: left;
                    width: fit-content;
               }
          }
     }
}

.scroll-text {
     animation-iteration-count: infinite;
     animation-timing-function: linear;
}

.scroll-text {
     animation-name: scroll;

     h1 {
          animation-name: scroll-long;
     }
}

@keyframes scroll {
     0%,
     20% {
          -moz-transform: translateX(0);
          -webkit-transform: translateX(0);
          transform: translateX(0);
     }

     59.999% {
          -moz-transform: translateX(calc(-100%));
          -webkit-transform: translateX(calc(-100%));
          transform: translateX(calc(-100%));
     }

     60% {
          -moz-transform: translateX(calc(100%));
          -webkit-transform: translateX(calc(100%));
          transform: translateX(calc(100%));
     }

     100% {
          -moz-transform: translateX(0);
          -webkit-transform: translateX(0);
          transform: translateX(0);
     }
}

@keyframes scroll-long {
     0%,
     15% {
          -moz-transform: translateX(0);
          -webkit-transform: translateX(0);
          transform: translateX(0);
     }

     57.499% {
          -moz-transform: translateX(calc(-100%));
          -webkit-transform: translateX(calc(-100%));
          transform: translateX(calc(-100%));
     }

     57.5% {
          -moz-transform: translateX(calc(100%));
          -webkit-transform: translateX(calc(100%));
          transform: translateX(calc(100%));
     }

     100% {
          -moz-transform: translateX(0);
          -webkit-transform: translateX(0);
          transform: translateX(0);
     }
}