/*
    Parallax Scrolling - https://www.w3schools.com/howto/howto_css_parallax.asp
    
    Western Color Pallette Ideas - https://www.shutterstock.com/blog/western-chic-color-palettes
*/

body, html {
  height: 100%;
}

body{
    display:flex;
    flex-direction:column;
}

.blondcowgirl{
    display:inline-block;
    float:left;
    height:200px;
    /*left:18.5vw;*/
    position:relative;
    /*top:-45px;*/
}

.blondecowboy{
    display:inline-block;
    float:left;
    height:200px;
    /*left:-18.5vw;*/
    position:relative;
    /*top:-45px;*/
}

.BurnetteCowGirl{
    display:inline-block;
    float:left;
    height:200px;
    position:relative;
    /*right:-23.75vw;
    top:-45px;*/
}

.burnettcowboy{
    display:inline-block;
    float:right;
    height:200px;
    position:relative;
    /*right:-22.5vw;
    top:-45px;*/
}

.contact_us_email{
    display:inline-block;
    width:fit-content;
}

.contact_us_email>input{
    width:27.5vw;
}

.contact_us_name{
    display:inline-block;
    width:fit-content;
}

.contact_us_name>input{
    width:27.5vw;
}

.contact_us_subject{
    display:inline-block;
    width:fit-content;
}

.contact_us_subject>input{
     width:27.5vw;
}

.contact_us_message{
    display:block;
    width:fit-content;
}

/*Flex Grid*/
.container{
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to new lines */
}

.container->div{
    flex: 1 0 auto; /* Makes items flex equally and shrink if needed */
        /* Add styling for margins, padding, etc. */
}

.cow1{
    /*float:left;*/
    height:fit-content;
    width:fit-content;
}

.cow2{
    /*float:right;*/
    height:fit-content;
    width:fit-content;
}

footer{
    background-image: url('images/IMG_8464-UpsideDown.JPG');
    height:100%;
    position:relative;
    z-index:2;
}

.footerContainer>footer>div{
    background:linear-gradient(#ff873c,#ef5b00); /*linear-gradient(rgba(177,0,0, 0.85),rgba(26, 55, 145, 0.75),rgba(65, 36, 66, 1));*/
    /*background-size: cover;*/
    height:100%;
}

.footerContainer>footer>div>div>a{
    text-decoration:none;
}

.grid{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(auto, 1fr));
}

main{
    padding:10px;
    flex-grow:1;
}

/*header{
    background-image:url(), url("images/blondcowgirl.png"), url("images/blondecowboy.png"), url("images/BurnetteCowGirl.png"), url("images/burnettcowboy.png");
    height:300px;
    position:relative;
}*/

p{
    padding:6px;
}

.parallax {
  /* The image used */
  background-image: url("images/IMG_6183.JPG");

  /* Full height */
  /*min-*/height:300px;
  min-width:100%;

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
}

@media screen and (max-width:770px){
    .blondcowgirl{
        display:none;
    }
    .burnettcowboy{
        display:none;
    }
}

@media screen and (max-width:480px){
    .contact_us_email{
        display:block;
        margin-left:auto;
        margin-right:auto;
        width:fit-content;
    }
    .contact_us_email>input{
        width:50vw;
    }

    .contact_us_name{
        display:block;
        margin-left:auto;
        margin-right:auto;
        width:fit-content;
    }

    .contact_us_name>input{
        width:50vw;
    }

    .contact_us_subject{
        display:block;
        margin-left:auto;
        margin-right:auto;
        width:fit-content;
    }

    .contact_us_subject>input{
         width:50vw;
    }
}