/*   add a cover background picture for the jumbotron with a fixed height.   */
.jumbotron{
    background: url(images/BRY_5245_Marrawah_Tasmania_Green%20Point_18%2004%2017_UseQ75.jpg) center;
    background-size: cover;
    height: 670px;
    margin-bottom: 0;
}

/*size and position of logo  */
.jumbotron .logo {
    height: 50px; 
    position: absolute; 
    top: 10px; 
    left: 20px; 
}

/*padding of header */
.content .display-1 {
    margin-top: 15px;
}

/*font-size top paragraph  */
.content .info {
    font-size: 24px;
    margin-top: 20px;
}

/*Button margins */
.content button {
    margin: 10px 10px 5px 0;
}

/*Change link colour to logomakr in the footer. */
.footer a, .footer a:visited {
    color: gray;
}

/*change link colour hover state of link to logomakr in the footer. */
.footer a:hover {
    text-decoration: none;
    color: darkgray;
}

/*footer credits font size and line height */
#credits {
     font-size: 14px;
     line-height: 1.9;
     text-align: end;
     margin-bottom: 2px;
}

#bks {
    line-height: 1.6;
    margin-bottom: 2px;
}

/*style for devices between 480px and 768px using media queries. */
/*@media (min-width: 576px) and (max-width: 767.98px) This would just center text on small devices, not tablets. Not vertical phone screens. Bootstrap is designed for mobile so that has the default styling applied.*/

/*This centers text on small and md devices, so including tablets*/
@media (max-width: 991.98px) {
    .content {
        text-align: center;
    }  
}

/*changing font-size for phone screens heading, top paragraph, credits and bks. Changing top margins for buttons. xs. Use lower quality image for small devices for quicker loading. */
@media (max-width: 575.98px) {
    .content h2 {
        font-size: 60px;
        padding-top: 30px;
    }
    .content .info {
        font-size: 18px;
        padding: 5px 15px;
        margin: 20px 30px 10px 30px;
    }
    .footer #credits {
        font-size: 9px;
        line-height: 2.4;
    }
    .footer #bks {
        font-size: 10px;
        line-height: 2.2;
    }
    
    .content button {
        margin-top: 5px;
    }
     .jumbotron {
        background: url(images/BRY_5245_Marrawah_Tasmania_Green%20Point_18%2004%2017_sizedQuality60-sm.jpg) center;
        background-size: cover;
        height: 670px;
        margin-bottom: 0;
    }
}

/*changing header size and margins for small screens, ie horizontal phones. Use lower quality image for small devices for quicker loading. */
@media (min-width: 576px) and (max-width: 767.98px) {
    .content .display-1 {
       margin: 5px 0 0 0; 
       font-size: 88px
    }
    .jumbotron {
        background: url(images/BRY_5245_Marrawah_Tasmania_Green%20Point_18%2004%2017_sizedQuality60-sm.jpg) center;
        background-size: cover;
        height: 670px;
        margin-bottom: 0;
    }
}

/* changing margin buttons to keep them on the orange part of the image on small devices and smaller medium devices (until heading goes to single line). */
@media (min-width: 576px) and (max-width: 925.98px) {
    .content button {
        margin-top: 0;
    }
}

/*Changing logo margins for large and up  */
@media (min-width: 992px){
    .jumbotron .logo {
        position: absolute; 
        top: 20px;
        left: 30px;
        height: 60px
    }
/*    changing text box padding for lg and up. */
    .content {
        padding-top: 30px;
        padding-left:
    }
}