/* We can use custom properities to make our css code easier to read and manage

    first, we set them in the :root{}
    --  indicates custom property
    next, we set our css, using the custom properties
    finally, we can build media queries that do nothing but set those properties.
*/

/* :root {
    --imgwidth: 300px;
    --h1height: 70px;
    --imgvisiblity: visible;
    --imgposition: static;
} */


h1 {
    text-align: center;
    color: red;
    text-shadow: 2px 2px 2px black;
    font-size: 70px;
}

img {
    width: 200px;
    visibility: visible;
    position: static;
}

/* @media (width<600px) {
    :root {
        --imgwidth: 100px;
        --h1height: 50px;
    }
} */

/* @media (width<300px) {
    :root {

        --h1height: 30px;
        --imgisibility: hidden;
        --imgposition: absolute;
    }
} */