.main, .tab-list {
    background-color: var(--black);
    height: 100vh;
    max-height: 667px;
    width: 365px;
    position: fixed;
    bottom: 50%;
    transform: translate(50%, 50%);
    overflow: hidden;
    box-shadow: 4px 20px 20px var(--grey-transparent);
    transition: right 0.2s;
}

.center {
    right: 50%;
}

.hide-left {
    right: 150%;
}

.moved-to-left {
    right: 52%;
}

.moved-to-right {
    right: 48%;
}

.hide-right {
    right: -50%;
}

h1 {
    color: var(--white);
    font-family: "SF Toontime";
    font-size: 1rem;
    text-align: center;
    color: var(--light-grey);
}

h1 span {
    color: rgb(230, 126, 169);
    display: block;
    font-size: 2rem;
    margin-top: -1rem;
}

* {
    -webkit-tap-highlight-color: transparent;
}

.tld-modal {
    z-index: 9;
    text-align: center;
}

.tld-modal .accept {
    margin-top: 1rem;
    width: 8rem;
}

.tld-popup {
    z-index: 9;
}

body > .list {
    color: var(--white);
}

@media (max-height: 667px) {
    .main {
        bottom: auto;
        top: 0;
        transform: translate(50%, 0%);
    }
}