/* 
          widthsmedia.css
                                       */
                                       

.html-code {
    width: 52%;
    margin: auto;
    max-width: 650px;
}

.head-width {
    width: 56%;
    margin: auto;
    max-width: 670px;
}

@media screen and (min-width: 200px) and (max-width: 340px) {
    .html-code {
        width: 80%;
    }

    .head-width {
        width: 84%;
    }
}

@media screen and (min-width: 340px) and (max-width: 580px) {
    .html-code {
        width: 78%;
    }

    .head-width {
        width: 82%;
    }
}

@media screen and (min-width: 580px) and (max-width: 700px) {
    .html-code {
        width: 76%;
    }

    .head-width {
        width: 80%;
    }
}

@media screen and (min-width: 700px) and (max-width: 840px) {
    .html-code {
        width: 74%;
    }

    .head-width {
        width: 78%;
    }
}

@media screen and (min-width: 840px) and (max-width: 980px) {
    .html-code {
        width: 60%;
    }

    .head-width {
        width: 64%;
    }
}