html,
body {
     overflow-x: hidden;
     max-width: 100vw;
}

#search-div {
     display: flex;
     justify-content: center;
     flex-direction: row;
}

#search {
     width: calc(750px - 42px);
     max-width: calc(90vw - 42px);
     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-filter {
     width: 32px;
     height: 32px;
     margin-left: 5px;
     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;
     cursor: pointer;
}

#search:focus,
#search-filter:hover {
     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: calc(725px + 24px);
     max-width: calc(90vw + 25px);
     margin: 0 auto;
     align-items: center;
     overflow-x: hidden;
}

#charts>div {
     display: block;
     position: relative;
     width: 700px;
     max-width: calc(90vw - 24px);
     align-items: center;
     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(5, 5, 5);
     transition: box-shadow 0.2s, background-color 0.1s;
     overflow: hidden;

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

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

     >div {
          display: flex;
          flex-direction: row;

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

          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(100% - 24px);
               max-width: calc(90vw - 24px);

               >div {
                    display: flex;
                    position: relative;
                    flex-direction: column;
                    width: 100%;
                    white-space: nowrap;
                    overflow-x: hidden;

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

.exdiv {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
}

.exdiv:before {
     z-index: -1;
     margin-top: -275px;
     margin-left: 100px;
     content: var(--background-image);
     position: absolute;
     opacity: 0.2;
}

.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);
     }
}

#filter-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.5);
     padding: 0 0 5px 0;
}

#filter-close {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
}

#filter-div {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 85vw;
     height: 85vh;
     max-width: 900px;
     backdrop-filter: blur(5px);
     background-color: rgba(0, 0, 0, 0.2);
     box-shadow: 2px 2px 5px rgba(227, 228, 237, .2);
     border: 2px solid rgba(255, 255, 255, .2);
     border-radius: 10px;
     transition: box-shadow 0.2s, background-color 0.1s;
     overflow-y: scroll;

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

     h3 {
          margin-bottom: 0;
     }

     input[type="text"] {
          width: calc(750px - 42px);
          max-width: calc(90% - 42px);
          padding: 6px;
          margin: 10px 12px 20px 12px;
          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(105, 105, 105, 0.1);
          transition: box-shadow 0.2s, background-color 0.1s;


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

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

     #filter-source-list {
          position: absolute;
          display: none;
          width: calc(750px - 64px);
          max-width: calc(90% - 64px);
          left: 0;
          right: 0;
          margin: -22px auto 0 auto;
          padding: 0;
          max-height: 50vh;
          overflow-y: scroll;
          border: 2px solid rgba(255, 255, 255, .2);
          border-radius: 5px;
          background-color: rgba(5, 5, 5);
          text-align: left;
          overflow-x: scroll;

          a {
               display: block;
               padding: 6px 12px;
               color: #cecfd0;
               text-decoration: none;
               transition: background-color 0.1s;
               white-space: nowrap;
               cursor: pointer;

               &:hover {
                    background-color: rgba(57, 57, 57, 0.2);
               }
          }
     }

     #filter-source:focus+#filter-source-list,
     #filter-source-list:hover {
          display: block;
     }

     .clear {
          position: absolute;
          cursor: pointer;
          padding: 6px;
          font-size: 16px;
          line-height: 1em;
          color: #cecfd0;
          text-shadow: 2px 2px 5px rgba(227, 228, 237, .2);
          box-shadow: none;
          border: none;
          background-color: rgba(0, 0, 0, 0.5);
          backdrop-filter: blur(1px);
          transition: text-shadow 0.2s;
          margin: 12px 0 0 -38px;

          &:hover {
               text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.6);
          }
     }

     .checkbox-list {
          width: calc(750px - 42px);
          max-width: calc(90% - 42px);
          padding: 6px;
          margin: 10px auto 20px auto;
          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;

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

          .checkbox-wrap {
               display: flex;
               flex-direction: row;
               align-items: center;
               padding: 0 12px;
               cursor: pointer;
               border-radius: 5px;
               transition: background-color 0.1s;

               &:hover {
                    background-color: rgba(57, 57, 57, 0.2);
               }

               input[type="checkbox"] {
                    margin-right: 10px;
                    width: 16px;
                    height: 16px;
                    cursor: pointer;
               }

               label {
                    line-height: 2.5em;
                    cursor: pointer;
                    flex-grow: 1;
                    text-align: left;
               }

               &:hover {
                    background-color: rgba(57, 57, 57, 0.5);
               }
          }
     }

     #filter-reset-all {
          width: fit-content;
          letter-spacing: 0;
          margin: 25px auto;
          padding: 8px 16px;
          font-size: 16px;
          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;
          cursor: pointer;

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

.close {
     position: absolute;
     top: 10px;
     right: 10px;
     font-size: 48px;
     color: #cecfd0;
     cursor: pointer;
     width: min-content;
     margin: 0;
     transition: text-shadow 0.2s;

     &:hover {
          text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
     }
}