:root{  
    --title-font-size: 10vw;
    --h1-margin: 7vw 0 7vw;
    --img-width: 100vw;
    --img-height: calc(var(--img-width)*1.3333);
    --p-font-size: 5vw;
    --p-margin-top: 5vw;
}

body{
    background: darkorange;
    margin:0;
    padding-left: auto;
    padding-right: auto;
    caret-color: transparent;
}


h1{
    color:black;
    background: darkorange;
    text-align: center;
    margin: var(--h1-margin);
    font-size: var(--title-font-size);
}

img{
    display:block;
    width:var(--img-width);
    height:var(--img-height);
    margin: 0 auto 0 auto
}

p{
    font-size: var(--p-font-size);
    text-align: center;
    margin-top: var(--p-margin-top);
}


@media screen and (orientation: portrait) and (min-width: 460px){   /*for tablets */
    :root{
        --h1-margin: 3vw 0 3vw;
        --title-font-size: 8vw;
        --img-width: 80vw;
        --p-font-size: 4vw;
        --p-margin-top: 3vw;
    }
}

@media screen and (min-width: 600px){   /* for laptop */
    :root{
        --h1-margin: 1vh 0 1vh;
        --title-font-size: 5vh;
        --img-height: 91vh;
        --img-width: calc(var(--img-height)*0.75);
        --p-font-size: 4vh;
        --p-margin-top: 2vh;
    }
}