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

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


h1 {
    text-align: center;
    color: red;
    text-shadow: 2px 2px 2px black;
    font-size: var(--h1height);
}

img {
    width: var(--imgwidth);
    /* visibility: var(--imgvisibility); */
    position: var(--imgposition);
    display: var(--imgdisplay);
}

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

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

        --h1height: 30px;
        /* --imgvisibility: hidden; */
        /* --imgposition: absolute; */
        --imgdisplay: none;
    }
}