/* 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(--imgisibility);
    position: var(--imgposition);
}

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

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

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