* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-size: 15px;
    font-family: 'Lexend Deca', 'Inter', sans-serif;
    background-color: hsl(233, 47%, 7%);
}
@media only screen and (min-width:0px) and (max-width:400px) {
    .format {
        display:flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: absolute;
        max-width: 375px;
        height: auto;
        margin: 90px 10px; 
        top: 0;
        left: 0;
        right: 0;
        border: none;
        border-radius: 10px;
        overflow: hidden;
    }
        .container {
            display: flex;
            background-color: hsl(277, 64%, 61%);
        }
            .container picture {
                opacity:0.6;
            }
            .container img {
                display: flex;
                width: 375px;
                max-height: 100%;
                object-fit: fill;
            }
        .chapter {
            display: flex;
            width: 375px;
            height: 100%;
            flex-direction: column;
            text-align: center;
            color: hsl(0, 0%, 100%);
            background-color: rgb(35, 13, 75);
        }
            .chapter-article {
                margin: 0px 47px;
                text-align: center;
            }
                .chapter-article p {
                    color: hsla(0, 0%, 100%, 0.75);
                    margin-top: 30px;
                    line-height: 2em;
                }
                .chapter-article h1 {
                    color: hsla(0, 0%, 100%, 0.75);
                    margin-top: 30px;
                }
                .chapter-article em {
                    color: hsl(277, 64%, 61%);
                    font-style: normal;
                }
            .chapter-metrics {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                margin: 20px 0px;
            }
                .chapter-tags {
                    display:flex;
                    text-align: center;
                    margin: 20px 0px 0px 0px;
                    font-family: 'Inter';
                    font-weight: 700;
                    font-size: 1.5em;
                    }
                    .chapter-tags em {
                        font-family: 'Inter';
                        font-weight: 400;
                        font-style: normal;
                        font-size: 0.5em;
                        color: hsla(0, 0%, 100%, 0.6);
                    }
}
@media only screen and (min-width:401px) and (max-width:5000px)  {
    .format {
        display:flex;
        flex-direction: row-reverse;
        max-width:1080px;
        justify-content: center;
        align-items: center;
        color: #fff;
        position: absolute;
        top: calc(50% - 250px);
        left: calc(50% - 540px);
        right: 0;
        margin: 0, auto;
        border: none;
        border-radius: 10px;
        overflow: hidden;
    }
        .container {
            display: flex;
            min-width: 540px;
            height: 446px;
            background-color: hsl(277, 64%, 61%);
        }
            .container picture {
                opacity:0.5;
            }
        .chapter {
            display: flex;
            min-width: 540px;
            height: 446px;
            flex-direction: column;
            text-align: left;
            color: hsl(0, 0%, 100%);
            background-color: rgb(35, 13, 75);
        }   .chapter-article {
                margin: 70px 120px 0px 80px;
            }   
                .chapter-article p {
                    color: hsla(0, 0%, 100%, 0.75);
                    margin: 30px 0px;
                    line-height: 1.7em;
                }
                .chapter-article em {
                    color: hsl(277, 64%, 61%);
                    font-style: normal;
                }
            .chapter-metrics {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                margin: 0px 120px 0px 80px;
            }
                .chapter-tags {
                    display:flex;
                    text-align: left;
                    margin: 20px 50px 0px 0px;
                    font-family: 'Inter';
                    font-weight: 700;
                    font-size: 1.5em;
                }
                    .chapter-tags em {
                        font-family: 'Inter';
                        font-weight: 400;
                        font-style: normal;
                        font-size: 0.5em;
                        color: hsla(0, 0%, 100%, 0.6);
                    }
  }