Упражнение 1.1 Банков

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        /* min-width се дефинира от малко към голямо, max-width: от голямо към малко*/
    body{
        background:black;
    }
    div{

        margin:0 auto;
        /*width:800px;*/
    }
    .container{
        width:100px;
        background:white;
    }
    @media screen and (min-width: 552px){
        .container{
            width: 300px;
            background: lightseagreen;
        }
    }
    @media screen and (min-width: 767px){
        .container{
            width: 500px;
            background: magenta;
        }
    }
    @media screen and (min-width: 992px){
        .container{
            width:800px;
            background: darkblue;
        }
    }
    /*@media screen and (max-width:800px){
        .container{
            width:500px;
            background:orchid;
        }
    }
    @media screen and (max-width:500px){
        .container{
            width:300px;
            background: firebrick;
        }
    }*/
    </style>
</head>
<body>
    <div class="container">
      <h1>This is a reponsive container</h1>
      <p>This container is <span class=""></span> pixels wide when the browser is <span class=""></span> pixels wide. Resize the browser to see it change.</p>
    </div>
</body>
</html>