.input {
    background-color: rgb(228, 228, 228);
}
.data {
    background-color: rgb(207, 207, 207);
}

.username:focus::placeholder {
    color: transparent;
    transition: 0.3s;
}
.mainDiv {
    background-color: white;
    margin-bottom: 10px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
}
.stars {
    color: white;
    background-color: rgb(225, 23, 23);
    padding: 2px 35px;
    border-radius: 4px;
    margin-right: 5px;
}

.theUrl {
    text-decoration: none;
    color: white;
    background-color: rgb(0, 158, 237);
    padding: 2px 20px;
    border-radius: 4px;
    margin-left: 5px;
    transition: 0.3s;
}
.theUrl:hover {
    background-color: rgb(0, 139, 208);
}
.right {
    min-width: 200px;
}
@media(max-width: 600px) {
    .mainDiv {
        flex-direction: column;
        align-items: center;
        gap: 10px
    }
    .right {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 10px;
        text-align: center;
    }
    .stars {
        width: 90%;
        margin: 0;
    }
    .theUrl {
        width: 90%;
        margin: 0;
    }
}