/* starting reset */
html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'lato', sans-serif;
}

/* navigation */
nav {
    width: 100%;
    display: flex;
    justify-content: center;

    /* add background gradient */
    background-image: linear-gradient(to right, lightseagreen, teal)
}

nav ul {
    display: flex;
}

nav ul li {
    margin: 8px 24px;
    list-style: none;
}


nav ul li a {
    color: white;
    text-decoration: none;
}

/* hero, height 90 to give space */
.hero {
    width: 100%;
    height: 90%;

    /* add back image, to resize use cover */
    background-image: linear-gradient(to right, rgba(230, 245, 244, 0.184), rgba(209, 231, 231, 0.866)), url('../images/hero-main.jpg');
    background-size: cover;

    /* move text to center */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* doggo section  */
.dog {
    height: 100%;
    display: flex;

}

/* dog image as a background */
.dogimg {
    background-image: url('../images/dog.jpg');
    background-size: cover;

    /* width: 50%;
height: 50%; */
    /* add width and height via flexbox, flex-grow, flex-shrink */
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
}

.text {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 100%;
}

/* Media Query */

/* Tablet only to reflect on tablet, 768px or smaller */
/* use pixel value in breakpoints */
@media only screen and (max-width: 768px) {

    /* css is going to go in here for tablet */
    .heroheader {
        font-size: 2em;
        color: white;
    }

    .dog {
        flex-direction: column;
    }

    .dogimg {
        background-image: url('../images/dog-mobile.jpg')
    }

    /* To hide components in your tablet and mobile */
    nav {
        display: none;
    }
}

/* mobile-make it outside and make new media query */
@media only screen and (max-width: 576px) {
    /* css */
}