index.css

*{
    margin: 0;
    padding: 0;
    background: rgb(53, 54, 58);
    line-height: calc(100% + 8px);
    /* font-family: Roboto, 'Segoe UI', Tahoma, sans-serif; */
    font-family: 'Roboto', sans-serif;
}
.wrapper {
    font-size: 14px;
    max-width: 600px;
    margin: 40px auto;
    padding: 8px 48px 24px;
    font-weight: 480;
}

.header {
    text-align: center;
    color: rgb(232, 234, 237);
}
.header > img {
    height: 120px;
    width: 120px;
}

.header h1 {
    margin: 1.2rem auto;
    font-size: x-large;
    font-weight: 400;
}
.desc1 {
    margin-bottom: 25px;
}

.desc1 > p{
    color: rgb(232, 234, 237);
}

.desc2 {
    display: flex;
    color: rgb(232, 234, 237);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

.desc2 > .list1, .desc2 > .list2 {
    flex: 50%;
    box-sizing: border-box;
}

.desc2> .list1>  h3, .desc2 >.list2>h3 {
    font-weight: 400;
    font-size: 14px;
}

.desc2 > .list1 > .x1 > .content, .desc2 > .list2 > .x1 > .content {
    padding-left: 25px;
}

.desc3 {
    color: rgb(232, 234, 237);
    margin: 30px auto;
    padding: 12px 20px;
    background: rgb(60, 64, 67);
    border: none;
    border-radius: 4px;
}

.desc3 > h4, .desc3 > .rand1 >.a, .desc3 > .rand1 >.b {
    background: rgb(60, 64, 67);
    font-size: 14px;
    font-weight: 400;
}

.rand1 {
    display: flex;
    flex: row wrap;
    justify-content: space-between;
}

@media (min-width: 720px) {
    .wrapper {
        margin-top: 40px;
        min-width: 240px;
        padding: 8px 48px 24px;
    }
}

@media (max-width: 720px) {
    .header > img {
        height: 72px;
        width: 72px;
    }
    .wrapper {
        min-width: 176px;
        max-width: 600px !important;
        padding: 72px 32px;
        margin-top: 20px;
    }
    .header {
        text-align: start;
    }
    .desc2 {
        flex-direction: column;
    }
    .desc2 > .list1{
        margin-bottom: 20px;
    }
    .wrapper {
        padding-top: 38px;
    } 
}

@media (max-width: 400px) {
    .rand1 {
        display: flex;
        flex-direction: column;
    }
    .rand1 > .a {
        padding-bottom: 10px;
    }
    .rand1 > .b >img {
        margin-left: 0px !important;
    }
}