*{
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

li{
    list-style: disc;
}

button{
    outline: none;
    border: 1px solid #000;
    cursor: pointer;
}





/***************************************************/
/*                     Header                      */
/***************************************************/
    header{
        background-color:#1a2636;
        width: 100%;
        height: 60px;
        padding: 10px;
    }

    header .logo{
        width: 100%;
        height: 30px;
        margin: 10px auto;
        cursor: pointer;
    }

/***************************************************/
/***************************************************/
/*                Article Left Side                */
/***************************************************/

    #article{
        background-color: lightblue;
        width: 1000px;
        height: auto;
        margin: 50px auto;        
    }

    #article #avatar{
        background-image: url('https://i.imgur.com/PTgQlim.png');
        position: relative;
        width: 30%;
        height: 400px;
        float: left;
    }

    #article #avatar img{
        position: absolute;
        transform: translateX(-10%);
        width: 128%;
        height: 100%;
        z-index: -1;
    }

    #article #avatar p{
        position: absolute;
        top: 45%;
        left: 30%;
        letter-spacing: 4px;
        font-weight: 600;
        text-align: center;
        color: #fff;
    }

    #article #avatar #heart{
        position: absolute;
        top: 40%;
        left: 43%;
        width: 50px;
        height: 50px;
        animation: beat 5s linear 0s infinite alternate;
        visibility: hidden;
    }

    @keyframes beat {
        0%   {transform: scale(1);}
        25%  {transform: scale(1.25);}
        50%  {transform: scale(1.5);}
        75%  {transform: scale(1.25);}
        100% {transform: scale(1);}
    }

    #article #avatar #heart-rate{
        position: absolute;
        top: 56%;
        left: 42.5%;
        width: 50px;
        height: 50px;
        color: #FFF;
        font-weight: 600;
        text-align: center;
        visibility: hidden;
    }






/***************************************************/
/***************************************************/
/*                Article right Side               */
/***************************************************/

    #article #info{
        width: 70%;
        height: 400px;
        float: right;
        padding: 10px;
    }

    #article #info .title{
        font-size: 30px;
        margin-bottom: 25px;
    }

    #article #info .description{
        font-size: 12px;
        line-height: 1.5;
        margin-bottom: 35px;
        word-break: normal;
        width: 80%;
    }

    #article #info .section{
        margin-bottom: 20px;
    }

    #article #info .colors{
        margin-bottom: 40px;
    }

    #article #info .colors li{
        padding: 10px 25px;
        border-radius: 5px;
        display: inline;
        margin: 5px 15px 0 0;
        cursor: pointer;
    }

    #article #info .colors li.black{
        background-color:#23211f;
    }

    #article #info .colors li.red{
        background-color:#ca3d22;
    }

    #article #info .colors li.blue{
        background-color:#565681;
    }

    #article #info .colors li.pink{
        background-color:#8a5362;
    }

    #article #info .colors li.purple{
        background-color:#e9c7be;
    }

    #article #info .options{
        margin-bottom: 35px;
    }

    #article #info .options li{
        border-radius: 5px;
        display: inline;
        margin: 5px 15px 0 0;
        cursor: pointer;
    }

    #article #info .options li a{
        text-decoration: none;
        color: #000;
        background-color:#cfcfcf;
        border: 1px solid #cfcfcf;
        border-radius: 5px;
        padding: 5px 18px;
    }

    #article .buy{
        background-color: orange;
        border: 1px solid orange;
        padding: 15px 40px;
        border-radius: 5px;
    }