@keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
}

#main {
    display: flex;
    flex-direction: row;
    width: auto;
    height: 100vh;
}

#main #list {
    display: flex;
    flex-direction: column;
    width: 0;
    overflow-y: scroll;
    padding-top: 0.8vh;
    scrollbar-color: rgb(50, 50, 50) rgb(40, 40, 40);
    transition: 0.5s ease;
}


#main .listTower {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 2vw;
    padding-top: 0.2vh;
    padding-bottom: 0.2vh;
    width: 100%;
    height: 5vh;
}

#main .listTower h2 {
    font-size: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main .listTower-tower {
    margin-left: 1vw;
    transition: 0.5s ease;
    padding-left: 1vw;
    padding-right: 1vw;
    border-radius: 1.5vw;
    height: 90%;
}

#main .listTower-tower:hover {
    background-color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

#main .gold {
    --bg-size: 400%;
    background: linear-gradient(
                    90deg,
                    rgb(212, 188, 48),
                    rgb(255, 245, 191),
                    rgb(212, 188, 48)
                ) 0 0 / var(--bg-size) 100%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: move-bg infinite 8s linear;
}

#main .silver {
    --bg-size: 400%;
    background: linear-gradient(
                    90deg,
                    rgb(136, 136, 136),
                    rgb(194, 194, 194),
                    rgb(136, 136, 136)
                ) 0 0 / var(--bg-size) 100%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: move-bg infinite 8s linear;
}

#main .bronze {
    --bg-size: 400%;
    background: linear-gradient(
                    90deg,
                    rgb(179, 125, 81),
                    rgb(143, 111, 71),
                    rgb(179, 125, 81)
                ) 0 0 / var(--bg-size) 100%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: move-bg infinite 8s linear;
}

#main #viewer {
    display: flex;
    width: 95vw;
    height: 100vh;
    position: sticky;
    top: 0;
    transition: 0.5s ease;
}

#main #viewer-main {
    flex-direction: column;
    justify-content: left;
    align-items: top;
    width: 93%;
    margin-left: 4vw;
    position: sticky;
    top: 0;
}

#main #viewer #viewer-openlist {
    border: none;
    background-color: rgb(40, 40, 40);
    width: 7vw;
    color: white;
}

#main #viewer-main h1 {
    font-size: 5vw;
    margin-top: 2vh;
    height: 3vh;
    bottom: 2vh;
}

#main #viewer-main #video {
    aspect-ratio: 16/9;
    width: 100%;
    margin-top: 2.5vh;
}

#main #viewer-main .viewer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    height: 14vh;
}

#main #viewer-main .viewer-infoField {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 33%;
}

#main #viewer .viewer-infoField h3 {
    width: 10%;
    font-size: 4vw;
    font-weight: regular;
}

#main #viewer-side {
    display: none;
}

@media only screen and (min-width: 768px) { /* PC */
#main {
    display: flex;
    flex-direction: row;
    align-items: top;
}

#main #list {
    display: flex;
    flex-direction: column;
    width: 27%;
    overflow-y: scroll;
    padding-top: 0.8vh;
    scrollbar-color: rgb(50, 50, 50) rgb(40, 40, 40);
    top: 6vh;
}

#main .listTower {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 1vw;
    padding-top: 0.2vh;
    padding-bottom: 0.2vh;
    width: auto;
    height: 4vh;
}

#main .listTower h2 {
    font-size: 0.7vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main .listTower-tower {
    margin-left: 1vw;
    transition: 0.5s ease;
    padding-left: 0.5vw;
    padding-right: 0.5vw;
    border-radius: 0.35vw;
    height: 90%;
}

#main .listTower-tower:hover {
    background-color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

#main .gold {
    --bg-size: 400%;
    background: linear-gradient(
                    90deg,
                    rgb(212, 188, 48),
                    rgb(255, 245, 191),
                    rgb(212, 188, 48)
                ) 0 0 / var(--bg-size) 100%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: move-bg infinite 8s linear;
}

#main .silver {
    --bg-size: 400%;
    background: linear-gradient(
                    90deg,
                    rgb(136, 136, 136),
                    rgb(194, 194, 194),
                    rgb(136, 136, 136)
                ) 0 0 / var(--bg-size) 100%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: move-bg infinite 8s linear;
}

#main .bronze {
    --bg-size: 400%;
    background: linear-gradient(
                    90deg,
                    rgb(179, 125, 81),
                    rgb(143, 111, 71),
                    rgb(179, 125, 81)
                ) 0 0 / var(--bg-size) 100%;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: move-bg infinite 8s linear;
}

#main #viewer {
    display: flex;
    margin-left: 2vw;
    width: 73%;
    height: 95vh;

    position: sticky;
    top: 6vh;
}

#main #viewer #viewer-openlist {
    display: none;
}

#main #viewer-main {
    flex-direction: column;
    justify-content: left;
    align-items: top;
    width: 70%;
    margin-left: 0;
}

#main #viewer-main h1 {
    font-size: 2vw;
    margin-top: 1.5vh;
    height: 3vh;
}

#main #viewer-main #video {
    aspect-ratio: 16/9;
    width: 70%;
    margin-top: 1.25vh;
}

#main #viewer-main .viewer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 9vh;
    bottom: 2vh;
    top: 0;
}

#main #viewer-main .viewer-infoField {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    width: 100%;
    height: 33%;
}

#main #viewer .viewer-infoField h3 {
    width: 10%;
    font-size: 0.8vw;
}

#main #viewer-side {
    display: flex;
    flex-direction: column;
    width: 23%;
    margin-left: 9%;
    margin-right: 1%;
    position: sticky;
    top: 5vh;
    padding-top: 4vh;
    height: 95%;
}

#main #viewer-side p {
    display: flex;
    align-items: center;
    margin: 5;
    justify-content: left;
}

#main #viewer-side p .crown-icon {
    width: 4%;
    aspect-ratio: 1/1;
    padding-right: 0.38vw;
}

#main #viewer-side ul {
    padding-left: 0.5vw;
    margin: 0;
}

#main #viewer-side li {
    margin: 10
}

table {
    width: 100%;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: left;
}

th {
    color: rgb(50, 50, 50);
    height: 2vh;
}

tr {
    height: 2vh;
}

td {
    margin-top: 3vh;
}

#theader-user {
    width: 10vw;
    text-align: left;
    display: flex;
}

#theader-fps {
    width: 5vw;
    text-align: left;
    margin-left: 0;
}

#theader-video {
    margin-left: 30vw;
    display: flex;
    justify-content: right;
    width: 7vw;
}

.tr-link {
    text-align: right;
    > a {
        color: white;
        transition: 0.5s ease;
    }

    > a:hover {
        color: var(--accent-color);
    }
}
}