@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

.main-container {
    max-width: 577px;
    width: 95%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 80px;
    margin: 0 auto;
    padding-bottom: 00px;
}

.main-container>div:nth-child(1) {
    font-weight: 700;
    font-size: 11px;
    margin-bottom: 10px;
}

.main-container p {
    font-weight: 600;
    font-size: 13px;
}

.main-container a {
    color: #2480ED;
}

.bottom-div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.frames-slider {
    overflow: hidden;
}

.frames-slider-inner {
    display: flex;
    gap: 20px;
}

.music-player{
    font-size: 11px;
    font-weight: 500;
}

/* Target only the links you want (use `a` if you want it global) */
.main-container a, .see-more, .see-less {
    position: relative;
    text-decoration: none;
    /* hide default underline */
}

/* custom thickness & offset (optional) */
.main-container a, .see-more, .see-less {
    --ul-h: 1px;
    --ul-offset: 0.0515em;
}

.see-more, .see-less{
    cursor: pointer;
}

.main-container a::after, .see-more::after, .see-less::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    /* makes the line span full width */
    bottom: calc(-1 * var(--ul-offset));
    height: var(--ul-h);
    background: currentColor;
    transform: scaleX(1);
    /* visible by default */
    transform-origin: left;
    /* grows from the left on unhover */
    transition: transform .39s ease-in-out;
}

/* On hover: shrink to 0 anchored on the RIGHT → looks like it slides out to the right */
.main-container a:hover::after,
.main-container a:focus-visible::after {
    transform: scaleX(0);
    transform-origin: right;
    /* flips anchor so it retracts to the right */
}

.see-less:hover::after, .see-more:hover::after,
 .see-more:focus-visible::after, .see-less:focus-visible::after {
    transform: scaleX(0);
    transform-origin: right;
}

@media only screen and (max-width: 768px){
    .main-container{
        gap: 10px;
    }

    .main-container p {
    font-weight: 600;
    font-size: 16px;
}

.bottom-div{
    flex-direction: column;
    gap: 10px;
}

.music-player, .main-container>div:nth-child(1){
    font-size: 14px;
}

    body{
        overflow: scroll;
        padding-bottom: 20px;
    }

    .main-container{
        width: 90%;
    }
}

.main{
    align-items: flex-start;
}

.see-more{
    margin-right: 2px;
}