* {
    margin: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
    font-family: sans-serif;
}

header {
    height: 100vh;
    position: relative;
    display: grid;
    background-color: black;

    img {
        grid-area: 1/1;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    img#person {
        transform-origin: bottom;
        object-position: bottom;

        @media (width > 600px) {
            transform-origin: bottom left;
        }
    }

    h1 {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);

        font-family: cursive;
        font-size: 4rem;
        text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.8);
        color: white;

        white-space: nowrap;
    }

}

/* pseudo element => adding gradient  */
header::after {
    content: "";
    width: 100%;
    height: 250px;
    background: linear-gradient(to top, rgb(172, 195, 202), transparent);
    position: absolute;
    left: 0;
    bottom: 0;

    @media (width > 600px) {
        height: 100px;
    }
}

main {

    position: relative;
    z-index: 10;

    background-color: rgb(172, 195, 202);
    font-size: 1.2em;
    padding: 2rem 1rem;

    h2,
    p {
        padding: 10px;
    }

    p {
        line-height: 2rem;
    }
}