Random Quote Generator - @file-2

style.css

/* Built By RoyalityFree | Codes Initiative */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:poppins,sans-serif
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding:0 10px;
    background-image: radial-gradient(#31e9cb,#a3f5e8,#31e9cb);
    user-select: none;
}
::selection{
    color:#fff;
    background:#1AE78D
}
.wrapper{
    width:605px;
    background:#fff;
    border-radius:15px;
    padding:30px 30px 25px;
    box-shadow:0 12px 35px rgba(0,0,0,.1)
}
header,.content :where(i,p,span){
    color:#102137
}
.wrapper header{
    font-size:35px;
    font-weight:600;
    text-align:center
}
.wrapper .content{
    margin:35px 0
}
.content .quote-area{
    display:flex;
}
.quote-area i{
    font-size:15px
}
.quote-area i:first-child{
    margin:3px 0 0 0
}
.quote-area i:last-child{
    display:flex;
    margin:0 0 3px 10px;
    align-items:flex-end;
}
.quote-area .quote{
    font-size:22px;
    text-align:center;
}
.content .author{
    display:flex;
    font-size:18px;
    margin-top:20px;
    font-style:italic;
    justify-content:flex-end
}
.author span:first-child{
    margin:-6px 5px 0 0;
    font-family:monospace;
}
.buttons .features{
    display:flex;
    margin-top:20px;
    align-items:center;
    justify-content:space-between;
}
.features ul{
    display:flex
}
.features ul li{
    margin:0 5px;
    height:47px;
    width:47px;
    display:flex;
    cursor:pointer;
    color:#1AE78D;
    list-style:none;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    border:2px solid #1AE78D;
    transition:all .3s ease
}
.features ul li:first-child{
    margin-left:0
}
ul li:is(:hover,.active){
    color:#fff;
    background:#1AE78D
}
ul .speech.active{
    pointer-events:none
}
.buttons button{
    border:none;
    color:#fff;
    outline:none;
    font-size:16px;
    cursor:pointer;
    padding:13px 22px;
    border-radius:15px;
    background:#1AE78D
}
.buttons button:hover{
    background: #4DD99C;
}
.buttons button.loading{
    opacity:.7;
    pointer-events:none
}
@media(max-width:728px){
    .wrapper{
        padding:25px 25px 20px;
        margin: 15px 15px 15px 15px;    
    }
    .wrapper header{
        font-size:29px
    }
    .quote-area .quote{
        font-size:20px;
        word-break:keep-all
    }
    .content .author{
        font-size:16px
    }
    .quote-area i{
        font-size:12px
    }
    .features ul li{
        margin:0 3px;
        height:45px;
        width:45px
    }
    .buttons button{
        font-size:15px;
        padding:12px 20px
    }
}