/* Across website styling */
body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
}

.page-content-container {
    margin-top: 4rem;
}

.page-flex-container {
    display: flex;
    align-items: stretch;
}

.main-container {
    width: 65%;
    border-right: 1px solid black;
    box-sizing: border-box;
    background-color: #EDF3FD;
}

main {
    margin: 0 2rem;
}

.aside-container {
    width: 35%;
    background-color: #C8DBE9;

}

aside {
    margin: 0 2rem;
    padding-top: 1rem;
}

.background-container {
    width: 100%;
    height: 650px;
    background-repeat: no-repeat;
    background-size: auto;
}

/* I used the following article when adding a hover zoom function to the maps 
https://www.geeksforgeeks.org/how-to-zoom-an-image-on-mouse-hover-using-css/amp/ */
.map-container {
    border: 1px solid black;
    text-align: center;
    margin: 1rem 0;
    clear: both;
}

.map-container img {
    transition: 0.2s all ease-in-out;
}

.map-container:hover img {
    transform: scale(1.5);
    position: relative;
    left: 8rem;
}

figure {
    width: 100%;
    margin: 0 0 2rem 0;
    text-align: center;
    font-size: 0.8rem;
    border: 1px solid;
    background-color: #FFFFFF;
}

.image {
    width: 100%;
    object-fit: contain;
}

h1, h2, h3 {
    font-family: 'Roboto Slab', serif;
}

h1, h2, h3, h4 {
    color: #13450C;
}

h2 {
    text-align: center;
}

main > h2 {
    padding-top: 1rem;
}

a {
    text-decoration: none;
    color: #412F8F;
}

a:hover {
    color: #761E5F;
    font-weight: bolder;
}

/* Header specific styling */
header {
    width: 100%;
    background-color:#A1B6C9;
    height: 4rem;
    position: fixed;
    top: 0;
    z-index: 2;
    font-family: 'Roboto Slab', serif;
    border-bottom: 1px solid black;
    box-sizing: border-box;
}

header > a {
    width: 24%;
    float: left;
    margin-left: 1rem;
}

.logo {
    display: block;
    padding: 2rem;
}

.logo-text {
    display: inline-block;
    text-align: center;
    font-size: 1.5rem;
    color: #13450C;
}

nav {
    float: right;
    width: 74%;
    text-align: right;
}

nav ul {
    display: flex;
    justify-content:space-around;
    padding: 0 0 0 2rem;
}

nav li {
    display: inline-block;
    line-height: 2rem;
    padding-right: 2rem;
}

.active {
    color: #761E5F;
}

/* Footer specific styling */
footer {
    clear: both;
    width: 100%;
    background-color: #A1B6C9;
    height: 4rem;
    border-top: 1px solid black;
    box-sizing: border-box;
}

footer > p {
    float: left;
    margin: 1rem 2rem;
    line-height: 2rem;
}

footer > ul {
    margin: 0;
}

footer li {
    display: inline-block;
    padding-left: 1rem;
    font-size: 2rem;
    margin: 1rem;
    line-height: 2rem;
}

/* Index.html specific styling */
/* Styling specific to main section of index.html */
#home-main {
    margin: 0;
}

#background-container-introduction {
    background-image: url("../images/photo-tarn-at-leaves-big.jpg");
    background-position: left center;
    position: fixed;
    z-index: -1;
    height: 900px;
}

#container-behind-introduction {
    height: 900px;
}

h1 {
    text-align: center;
    margin: 0;
}

#container-title {
    background-color: rgba(237, 243, 253, 0.7);
    width: 30rem;
    margin: 0 auto;
    padding: 0.5rem;
    border-radius: 5px;
    position: relative;
    top: 1rem;
}

#container-main-introduction {
    width: 25rem;
    background-color: rgba(237, 243, 253, 0.7);
    padding: 0.75rem;
    border-radius: 5px;
    text-align: center;
    position: relative;
    left: 1rem;
    top: 2rem;
}

#container-main-introduction > p {
    margin: 0;
}

.quote-from {
    display: inline-block;
}

#wainwright-quote {
    width: 100%;
    clear: both;
    color: #fff;
    font-family: 'Klee One', cursive;
    position: absolute;
    bottom: 0;
    text-align: center;
    background-color: rgba(60, 60, 60, 0.7);
}

#wainwright-quote > p {
    margin: 1rem;
}

/* Styling specific to aside section of index.html */
#container-wainwright {
    width: 100%;
    height: 70rem;
    background: #EDF3FD;
}

#container-wainwright h2 {
    margin-top: 0;
    font-size: 2rem;
}

#top-container-wainwright-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#image-wainwright {
    width: 35%;
    object-fit: contain;
    order: 2;
}

#about-wainwright {
    width: 60%;
    order: 1;
}

#about-wainwright > p {
    margin: 0 0 1rem 0;
}

#bottom-container-wainwright-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#container-wainwright-video {
    width: 32rem;
    height: 18rem;
}
#container-wainwright-video > iframe { 
    width:100%; 
    height:100%; 
}

#bottom-wainwright-quote {
    width: 50%;
    font-family: 'Klee One', cursive;
    text-align: left;
    margin-left: 2rem;
}

/* Styling specific to main section of wainwright-fells.html */
.container-fell-lists {
    display: flex;
    margin: 1rem 0;
}

.fell-list {
    font-size: 0.9rem;
    border: 1px solid black;
    background-color: #FFFFFF;
}

.top-fell-list {
    width: 33.3%;
}

.bottom-fell-list {
    width: 25%;
}

.fell-list > h3 {
    text-align: center;
    margin: 1rem 0 2rem 0;
    font-size: 1.2rem;
}

.fell-list > ol {
    padding-left: 0.5rem;
}

.fell-list li {
    margin: 1rem 0;
    list-style-type: none;
}

.number {
    display: inline-block;
    color: #fff;
    padding: 0.1rem 0.3rem;
    border-radius: 2px;
    width: 1.5rem;
    text-align: center;
}

#top-book-container {
    display: flex;
    width: 100%;
    justify-content: center;
}

#bottom-book-container {
    display: flex;
    width: 100%;
    justify-content: center;
}

.book-image {
    border: 1px solid black;
    box-sizing: border-box;
}

#northern-fells > h3 {
    color: #6c2e21;
}

.northern-number {
    background: #6c2e21;
}

#central-fells > h3 {
    color: #328dd3;
}

.central-number {
    background: #328dd3;
}

#southern-fells > h3 {
    color: #eb5933;
}

.southern-number {
    background: #eb5933;
}

#north-western-fells > h3 {
    color: #f6b733;
}

.north-western-number {
    background: #f6b733;
}

#western-fells > h3 {
    color: #418344;
}

.western-number {
    background: #418344;
}

#eastern-fells > h3 {
    color: #6f9935;
}

.eastern-number {
    background: #6f9935;
}

#far-eastern-fells > h3 {
    color: #e73f3e;
}

.far-eastern-number {
    background: #e73f3e;
}

/* Styling specific to aside sections 'looking after the fells' and 'walking tips' */
aside > ul {
    list-style-type: none;
    padding: 0;
}

aside > ul > li {
     margin: 1rem 0;
}

.list-item {
    display: flex;
    align-items: center;
}

.list-item > i {
    padding: 1rem;
}

#double-icons > i {
    display: block;
    padding: 1rem;
}

#tips-video {
    width: 16rem;
    height: 9rem;
    margin: 0 auto;
    margin-bottom: 2rem;
}

#tips-video > iframe {
    width:100%;
    height:100%;
}   

.logo-links {
    width: 80%;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    margin: 0 auto;
}

/* Styling specific to main section of walking-routes.html */
article {
    padding: 1rem 0;
}

hgroup {
    text-align: center;
}

article > h3 {
    text-align: center;
    font-size: 1.25rem;
}

hgroup > h3 {
    margin-bottom: 0;
}

hgroup > p {
    margin-top: 0;
}

hr {
    border-width: 2px;
    border-color: #6E8EAC;
}

#map-castlerigg {
    width: 80%;
    margin: 0 auto;
}

.anchor-heading-extra {
    color: rgba(71, 44, 122, 0);
    position: absolute;
    font-size: 1.2rem;
    font-family: 'Roboto Slab', serif;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Styling specific to route images */
.container-route-images {
    display: flex;
    justify-content: space-around;
}

.outside-figure-gowbarrow {
    width: 35.5%;
}

.inside-figure-gowbarrow {
    width: 26.5%;
}

.outside-figure-ashness {
    width: 34%;
}

.inside-figure-ashness {
    width: 30.6%;
}

.outside-figure-coledale {
    width: 34%;
}

.inside-figure-coledale {
    width: 30.2%;
}

/* Styling specific to anchor link points */
.anchor-point {
    position: relative;
    top: -4rem;
    opacity: 0;
}

/* Styling specific to route tables */
.route-table {
    border: 1px solid;
    border-collapse: collapse;
    width: 35%;
    float: left;
    margin-top: 2rem;
    background-color: #FFFFFF;
}

.route-table th {
    border: 1px solid;
    text-align: right;
    padding: 0.3rem;
}

.route-table td {
    border: 1px solid;
    padding: 0.3rem;
}

/* Styling specific to walk information */
.walk-info {
    float: right;
    width: 60%;
    text-align: center;
    margin-bottom: 1rem;
}

#walk-info-resize {
    width: 57%;
}

.walk-info > h4 {
    margin-top: 0;
}

/* get-in-touch.html specific styling */
.getintouch-background-container {
    background-image: url("../images/photo-loweswater-big.jpg");
    background-position: center center;
    background-attachment: fixed;
    height: 1060px;
}

/* The idea for the styling of container-form and some of the code came from Code
Institutes 'Love Running' walkthrough */
#container-form {
    color: #F0F2FF;
    background-color: rgba(60, 60, 60, 0.7);
    width: 32rem;
    padding: 0.5rem 1rem;
    position: relative;
    left: 5%;
    top: 20rem;
    border-radius: 5px;
}

#container-form > h2 {
    color: #F0F2FF;
    margin: 0.5rem 0;
}

.get-in-touch-form > p {
    margin-bottom: 1rem;
}

.label-and-input {
    margin-bottom: 1rem;
    width: 100%;
}

.label-and-input > input {
    width: 65%;
}

#name-box {
    float: left;
    width: 50%;
}

#email-box {
    display: inline;
    float: right;
    width: 50%;
}

#bottom-label-and-input {
    margin-bottom: 0;
}

textarea {
    width: 95%;
    height: 2.5rem;
}

#submit-button {
    display: flex;
    margin: 0 auto;
    font-size: 1.2rem;
    margin-top: 0.5rem;
    padding: 0.5rem;
    color: #F0F2FF;
    background-color: #412F8F;
    border-radius: 5px;
}

#submit-button:hover {
    background-color: #761E5F;
}

/* form-thankyou.html specific styling */
#page-container-form-thankyou {
    width: 100%;
    height: 750px;
    background-image: url("../images/photo-loweswater.jpg");
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: -2rem;
    z-index: -1;
}

#container-thankyou {
    color: #F0F2FF;
    background-color: rgba(60, 60, 60, 0.7);
    width: 25rem;
    padding: 0.5rem 2rem;
    position: relative;
    left: 5%;
    bottom: -25rem;
    text-align: center;
}

#container-thankyou > h2 {
    color: #F0F2FF;
    margin: 0.5rem 0;
}

/* 404 page specific styling */
#page-container-404 {
    height: 90vh;
    background-color: #EDF3FD;
    position: relative;
}

#container-404-message {
    position: absolute;
    top: 30%;
    left: 35%;
    text-align: center;
    color: #13450C;
}

#container-404-message > i {
    font-size: 8rem;
}

/* Responsive design linked to page width */
@media screen and (min-width:1280px)  {
    /* Responsive header */
    header > a {
        width: 40%;
    }
    nav {
        width: 55%;
    }
    .logo-text {
        line-height: 4rem;
        font-size: 2rem;
    }

    /* Responsive index.html */
    #background-container-introduction {
        background-image: url("../images/photo-tarn-at-leaves-big.jpg");
    }
    #container-main-introduction {
        width: 40rem;
        font-size: 1.2rem;
    }
    #wainwright-quote {
        font-size: 1.2rem;
    }
    #container-wainwright {
        font-size: 1.1rem;
        height: 65rem;
    }
    #image-wainwright {
        height: 30rem;
        width: 28rem;
    }
    #container-wainwright-video {
        width: 40rem;
        height: 22.5rem;
    }

    /* Responsive fells.html*/
    .fell-list {
        padding: 1rem;
    }
    #countryside-logo {
        float: left;
    }
    .logo-links {
        width: 50%;
    
    }
    /* Reesponsive get-in-touch and form-thankyou*/
    .getintouch-background-container, #page-container-form-thankyou {
        background-image: url("../images/photo-loweswater-big.jpg");
    }
}

@media screen and (max-width:925px){
    #tips-video {
        width: 14.2rem;
        height: 8rem;
    }
}

@media screen and (max-width:800px){
    /* Responsive header */
    header {
        height: 5rem;
    }
    .anchor-point {
    top: -5rem;
    }
    header > a {
        width: 100%;
        clear: left;
        text-align: center;
        margin: 0 auto;
    }
    nav {
        width: 100%;
        clear: right;
    }
    nav li {
        text-align: center;
        line-height: 1rem;
    }

    /* Responsive page layout */
    .page-content-container {
        margin-top: 5rem;
    }
    .page-flex-container {
    display: block;
    }
    .main-container {
        width: 100%;
        border-right: none;
        text-align: center;
        padding-bottom: 1rem;
    }
    .aside-container {
        width: 100%;
    } 
    .map-container:hover img {
    transform: none;
    position: static;
    }

    /* Responsive Footer */
    footer {
        height: 5rem;
    }
    footer > p {
        float: none;
        width: 100%;
        text-align: center;
        margin: 0;
    }
    footer > ul {   
        display: flex;
        justify-content:space-around;
        padding: 0;
        margin: 0;
    }
    footer li {
        margin: 0.5rem;
        line-height: 1rem;
    }

    /* Responsivity specific to main section index.html */
    #container-title {
        width: 25rem;
    }

    /* Responsivity specific to aside section index.html */
    #container-wainwright {
        height: 90rem;
    }
    #bottom-container-wainwright-info {
        display: block;
    }
    #container-wainwright-video {
        margin: 0 auto;
    }
    #bottom-wainwright-quote {
        width: 100%;
        font-family: 'Klee One', cursive;
        text-align: left;
        margin: 2rem 0 0 0;
    }

    /* Responsivity specific to fell lists */
    .container-fell-lists {
        text-align: left;
    }
    #rescue-logo {
        display: flex;
        margin: 0 auto;
    }

    /* Responsivity specific to walking tips and look after the fells */
    .icon {
        font-size: 1.5rem;
        margin-right: 2rem;
    }
    #tips-video {
        width: 32rem;
        height: 18rem;
    }
    .logo-links {
        width: 50%;
        padding: 4rem;
    }
    #countryside-logo {
        float: left;
    }
    .anchor-heading-extra {
        color: rgba(71, 44, 122, 1);
        position: static;
        font-size: 1.2rem;
        }
    main > figure {
        margin-top: 2rem;
    }
    main > h2 {
        margin-bottom: 0;
    }
}

@media screen and (max-width:585px){
    /* Responsive page layout */
    .page-content-container {
        margin-top: 4rem;
    }
    .aside-container {
        width: 100%;
    } 

    /* Responsive header */
    header {
        height: 4rem;
    }
    .anchor-point {
        top: -4rem;
    }
    header > a {
        width: 100%;
        clear: left;
        text-align: center;
    }
    .logo-text {
        font-size: 1rem;
    }
    nav ul {
        margin: 0.7rem 0;
        padding: 0 0 0 1rem;

    }
    nav li {
        line-height: 0.8rem;
        font-size: 0.8rem;
        padding-right: 1rem;
    }

    /* Responsive Footer */
    footer {
        height: 6.5rem;
    }
    footer > p {
        line-height: 1.5rem;
    }
    
    /* Responsivity specific to index.html */
    h1 {
        font-size: 1.5rem;
    }
    #container-title {
        width: 18.5rem;
    }
    #container-main-introduction {
        width: 80%;
        left: 0;
        margin: 0 auto;
        font-size: 0.8rem;
    }
    #wainwright-quote {
        font-size: 0.8rem;
    }

    /* Responsivity specific to Wainwright section index.html */
    #container-wainwright h2 {
        font-size: 1rem;
    }
    
    #container-wainwright {
        height: 120rem;
    }
    #container-wainwright-video {
        width: 16rem;
        height: 9rem;
    }
    #top-container-wainwright-info {
        display: block;
    }
    #about-wainwright {
        width: 100%;
        margin-top: 2rem;
        text-align: center;
    }
    #image-wainwright {
        width: 80%;
        margin: 0 auto;
    }

    /* Responsivity specific to Wainwright fells */
    .container-fell-lists {
        display: block;
        margin: 1rem 0;
    }
    .fell-list {
        width: 100%;
    }
    .fell-list > ol {
        padding-left: 2rem;
    }
    #tips-video {
        width: 24rem;
        height: 13.5rem;
    }
    .logo-links {
        padding: 2rem;
    }

    /* Responsivity specific to walking-routes */
    .route-table {
        width: 100%;
        float: none;
        margin-top: 0;
    }
    .walk-info {
        float: none;
        width: 100%;
        margin-top: 2rem;
    }
    .container-route-images {
        display: block;
    }
    .route-image {
        width: 100%;
        box-sizing: border-box;
    }

     /* Responsivity specific to walking tips */
    .icon {
        font-size: 1rem;
        margin-right: 0rem;
    }

    /* Responsivity specific to get-in-touch*/
    #container-form {
        width: 22rem;
        padding: 0.2rem 0.4rem;
        left: 4%;
        top: 14rem;
        font-size: 0.8rem;
    }
    #name-box {
        width: 100%;
    }
    #email-box {
        width: 100%;
    }
    #submit-button {
        font-size: 1rem;
        padding: 0.3rem;
    }

    /* Responsivity specific to form-thankyou */
    #container-thankyou {
        width: 16rem;
        padding: 0.2rem 0.4rem;
        left: 0;
        bottom: -21rem;
        margin: 0 auto;
    }
    
    /* Responsivity specific to 404.html */
    #container-404-message {
        left: 20%;
    }
}

@media screen and (max-width:470px) {
    /* fells.html */
    #tips-video {
        width: 16rem;
        height: 9rem;
    }
    .logo-links {
        padding: 1rem;
    }

    /* Responsivity specific to get-in-touch*/
    #container-form {
        width: 16rem;
        top: 12rem;
        padding: 0.2rem 0.6rem;
        margin: 0 auto;
        left: 0;
    }
    .label-and-input {
        margin-bottom: 0.5rem;
    }
    .label-and-input > input {
        width: 55%;
    }
}

@media screen and (max-width:320px) {
    /* responsive header */
    header {
        height: 5rem;
    }
    .anchor-point {
        top: -5rem;
    }
    .page-content-container {
        margin-top: 5rem;
    }

    /* responsive footer */
    footer {
        height: 8rem;
    }

    /* index.html */
    #container-title {
        width: 10rem;
    }
    #container-wainwright {
        height: 150rem;
    }
    #container-wainwright-video {
        width: 14rem;
        height: 8rem;
    }

    /* 404 page*/
    #container-404-message {
        left: 10%;
    }
}

/* Responsive design linked to page height */
@media screen and (max-height:1000px) {
    /* index.html */
    #background-container-introduction {
        height: 650px;
    }
    #container-behind-introduction {
        height: 650px;
    }
    #container-main-introduction {
        display: block;
    }

     /* get-in-touch.html */
    .getintouch-background-container {
        height: 750px;
    }
    #container-form {
        top: 14rem;
    }
}

@media screen and (max-height:800px) {
    /* index.html */
    #background-container-introduction {
        height: 600px;
    }
    #container-behind-introduction {
        height: 600px;
    }

    /* get-in-touch.html */
    .getintouch-background-container {
        height: 650px;
    }
    #container-form {
        top: 10rem;
    }
}

@media screen and (max-height:700px) {
    /* index.html */
    #background-container-introduction {
        height: 500px;
    }
    #container-behind-introduction {
        height: 500px;
    }
}

/* Responisive backgrounds for extra large screens */
@media screen and (min-height:1200px) {
    .getintouch-background-container {
        background-size: cover;
    }
}

@media screen and (min-width:1900px) {
    #background-container-introduction {
        background-size: cover;
    }
}