:root {
    --clr-dark: #0C0C0C;
    --clr-light: #F5F5F5;
    --clr-blue: #4CC9FE;
    --primary-bgcolor: #ff5f02;
    --secondary-bgcolor: #A4CCD9;

    --ff: "Roboto", Arial;
    --ff-size-button: clamp(1.2rem, 1vw, 2rem);
    --h1: bold clamp(3rem, 3.5vw, 10rem) var(--ff);
    /* --h1: bold max(54px, 4vw)/max(64px, 5vw) var(--ff); */
    --h2: bold 36px/36px var(--ff);
    --h3: bold 24px/30px var(--ff);
    --links: bold 18px/18px var(--ff);
    --p: 18px/18px var(--ff);
    --shadow: 1px 1px 5px rgba(65, 65, 65, 0.3);
    --shadowdark: 1px 1px 10px rgba(0, 0, 0, 0.5);
}

* {
    box-sizing: border-box;
}

h1 {
    font: var(--h1);
    margin-right: 0;
    /* font-size: clamp(2em, 3.5vw, 10em); */
}
h2 {
    font: var(--h2);
    margin-right: 0;
}
h3 {
    font: var(--h3);
    margin-right: 0;
    line-height: 1;
}
h1, h2 {
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
}

p   {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
}

html {
    font-size: 62.5%; /* means 2rem = 20px */
    /* REM is for font size/ EM is for Padding and Margin (specially in button) */
    /* Media quary use EM */
    scroll-snap-type: y mandatory;
}

body    {
    /* this styLe below we can called inheritance */
    font-family: Roboto, Arial;
    margin: 0;
    padding: 0;
    padding-top: 5em;
    margin-bottom: 500px;
    background-color: rgb(255, 255, 255);
    height: 50rem;

/*     border: 2px solid rgb(247, 0, 255); */
}

a img {
   margin:0 auto;    
   display:block;
   max-inline-size: 100%;
   max-height: 100vh;
   height: auto;
}

img.wallpaper {
    max-width: 100%;
    max-height: 100%;
    padding: 0 auto;
    margin: 0 auto;
    object-fit: contain;
}

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}