/*-------------------------*/
/*--------- IMPORTS -------*/
/*-------------------------*/

/* IMPORT RESET CSS */
/* Resets any default styling by the browser */
@import url("https://meyerweb.com/eric/tools/css/reset/reset.css");

/* IMPORT FONTS */
/* Roboto in weights 300, 400 and 700 (light, regular and bold)*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');



/*-------------------------*/
/*---------- BODY ---------*/
/*-------------------------*/

/* Sets the default body font to Roboto, if Roboto is not found than normal san-serif typeface. Make the font size 17px */
body {
    font-family: "Roboto", sans-serif;
    font-size: 17px; 
}

/* Sets a 25px margin between each paragraph */
p {
    margin: 25px 0;
}

/* Heading 1 is the white hero text on the image at the top. This changes the weight to bold and full uppercase */
h1 {
    font-size: 90px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

/* Heading 2 are any section headings on each page. These are heavier weighted and are slightly bigger than the normal text */
h2 {
    font-size: 30px; 
    font-weight: bold;
    padding: 0px 0px 20px;
    line-height: 30px;
}

/* Heading 3 is only used on the location of the site and image carousels. These are only slightly different to the body text. Main difference is they h3 is in bold */
h3 {
    font-size: 22px;
    font-weight: bold;
    padding: 20px 0px;
    line-height: 30px;
}

/* Styling for the dot points. Indent them slightly and give them a cirlce bullet point */
.wrapper ul {
    list-style-type: circle;
    padding-left: 18px;
}

/* Make hyperlinks blue and make them underline when hovered */
a {
    color: #001cc2;
    text-decoration: none;
}
    a:hover {
        text-decoration: underline;
    }  

/* Give the quotes the appropirate double quotation  marks */
q {
  quotes: "“" "”" "‘" "’";
}

    q::before {
    content: open-quote;
    }
    q::after {
        content: close-quote;
    }

/* Style the sizing of the Google map on the main page. Make the width and height fit in with the rest of the content*/
iframe {
    width: 100%;
    height: 500px;
}

/* Gives the figure capton some spacing between the image and the text */
figcaption {
    margin: 20px auto;
}

/*-------------------------*/
/*------- NAVIGATION ------*/
/*-------------------------*/

/* Create a fixed navigation bar at the top*/
/* Make the background white, remove any list styling, make the navigation full width */
/* Also give the navigation an animation when it is moving up and down with the Javascript */
#navigation {
    background-color: white;
    list-style-type: none;
    width: 100%;
    box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2);
    overflow: hidden;
/* JS Sticky Header CSS*/
    position: fixed;
    top: 0;
    transition: top 0.3s;
    z-index: 1;
}

/* Make the logo appear next to the other navigation and give it a margin */
    #navigation li {
        display: inline-block;
        margin: 30px 0 30px 0;
    }

        /* Make the other links in the list work like navigaitonal elements such as proper padding and no copying the underline from other a tags */
        #navigation li a{
            color: black;
            text-decoration: none;
            padding: 15px 20px;
            position: relative;
        }

/* Churchill House link in top left corner of page ususally where a companies logo is.
 Make this text slightly larger than other navigation links so it stands out */
#logo {
    font-size: 40px;
    display: inline-block;
    font-weight: bold;
    margin: 20px;
    padding: 10px;
    color: black;
    text-decoration: none;
}

/* Float the list of navigation items to the right and give it equal padding to the logo on the navigation bar */
.nav-element {
    float: right;
    padding: 10px;
}


/* Specify the font size for the navigation list (not the main logo) */
    .nav-element li a{
        font-size: 19px;
    }

/* Highlight the user which page they are on now using a lightgrey colour */
#current-page {
    background-color: lightgrey;
}


/*-----------------------------*/
/* NAVIGATION UNDERLINE EFFECT */
/*-----------------------------*/

/* Hover line that occurs underneath the html list */
/* Create a grey 4px line that appears which will appear when the user hovers */
/* This appears below each of the navigational items*/
/* It also has an animation */
#navigation li a:after {    
        bottom: 0;
        content: "";
        height: 4px;
        left: 50%;
        position: absolute;
        background: grey;
        transition: width 0.3s ease 0s, left 0.3s ease 0s;
        width: 0;
}

/* Make the line to appear when the user hovers */
#navigation li a:hover:after { 
        width: 100%; 
        left: 0; 
}


/*-------------------------*/
/*----- HOME PAGE HERO ----*/
/*-------------------------*/

/* Hero image on the home page (the hero images all have parrallax scrolling) */
/* Also all hero images have a slighty opaque black overlay */
#hero-img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/extra1-churchill-house-by-robin%20boyd-photo-copyright-darren-bradley.jpg');
    height: 750px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* The positioning of the hero on top of the hero image on the home page */
#hero-text {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Hides the image which was added through html. This is better for accessibility as people with a 
screen reader could not read the image which was added through css */
#hero-img-hidden {
    visibility: hidden;
    width: 100%;
    height: 100%;
}


/*-------------------------*/
/* OTHER PAGE HERO CONTENT */
/*-------------------------*/

/* This is the hero image for the description page (the hero images also have parallax scrolling) */
#hero-img-desc {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/churchill-house-4.jpg');
    height: 750px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    
}

/* This is the hero image for the history page (the hero images also have parallax scrolling) */
#hero-img-hist {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/churchill-house-18.jpg');
    height: 750px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}

/* This is the hero image for the architecture page (the hero images also have parallax scrolling) */
#hero-img-arch {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/extra2-robin%20boyd%20portrait-copyright-Mark-Strizic.jpg');
    height: 750px;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* This is the positioning of the text on top of the hero image on the description, history and architecture pages */
#hero-text-alt {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 70px;
}

/*-------------------------*/
/*----- WRAPPER TEXT ------*/
/*-------------------------*/

/* The wrapper specifies the how the main content looks */
/* Keep all the written content narrow so its easier to read, also centered the content and give it an appropriate line height */
.wrapper {
    width: 40%;
    margin: 110px auto;
    line-height: 23px; 
}

/* This alternate wrapper is used as the title on the image carousel */
/* The main purpose is to connect the slider to the heading text without creating a 110px distance between the two */
.wrapper-no-padding {
    width: 40%;
    margin: 0 auto;
    line-height: 23px; 
}


/*-----------------------------*/
/* TEXT AND IMAGE SIDE BY SIDE */
/*-----------------------------*/

/* This is used in the description page to highlight the north wing */
/* An image and text are used in the same box sitting next to each other */

/* Sets the main contaniner on the page in a light-grey box. This occurs when text and images are sitting next to each other */
.text-img-container {
    display: flex;
    background-color: lightgrey;
    width: 70%;
    margin: 0 auto;
}

/* As the box is made up of two divs, this styles these two sides by giving some padding between the edge of the container and the content inside */
.text-img-container div {
    margin: 10px;
    padding: 60px;
    font-size: 30px;
    width: 50%;
    text-align: center;
}

/* Sets the line height and font size for the text side (left side of the container) */
.text-img-container div p{
    font-size: 17px;
    line-height: 23px;
}

/* Sets the style for the image in the image side (right side of container). By giving it a percentage width it will adapt to different screen sizes */
.text-img-container div img{
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}


/*-------------------------*/
/*-------- IMAGES ---------*/
/*-------------------------*/

/* Most of the image styling is for individual items as different images needed
different treatment to get them looking good on the website */

/* The image row and column refer to when two images are placed side by side.
This occurs on the home page and the architect page. They are placed in a flexbox so they remain responsive. */ 

/* Sets the row of the images */
.image-row {
    background-color: lightgrey;
    padding: 5%;
}

/* Styling for each image in the row */
.image-column {
    width: 48.5%;
    padding: 5px;
}

/* This class refers to horizontal images which (most are on the Description page). This gives the images a 50% width so that they have a consitent look accross different screen sizes */
.big-img-horz {
    display: block;
    margin: 0 auto;
    width: 50%;
}

/* This class is for horizontal images with a 40px margin on the bottom, One is found on the History page. It needed a 40px bottom margin as it was interfering with the footer */
.big-img-horz-margin {
    display: block;
    margin: 0 auto 40px;
    width: 50%;
}

/* This centres the figure image found on the Architect page */
.big-img-figure {
    display: block;
    margin: 0 auto;
    text-align: center;
}

/* This class specifies the styling for the vertical image found on the History page. It sets a specific height rather than width otherwise it would be too big */
.big-img-vert {
    display: block;
    margin: 0 auto;
    height: 800px;
}

/*-------------------------*/
/*------ IMAGE CAROSEL ----*/
/*-------------------------*/

/* The styling for the image carousel at the bottom of the description page. However this implementation is not the best as the slider is not visible */
/* Main class for the whole carousel. Overflow-x:auto is what sets it apart from the other flexbox method */
.carousel {
    display: flex;
    overflow-x: auto;
    margin: 20px 0 50px 0;
}
/* Class for each individual image class in the carousel. Sets the correct width and padding so its looks better */
.carousel-img {
    width: 40%;
    margin: 0 auto;
    padding: 0 20px 0 20px;
}

/*-------------------------*/
/*--------- FOOTER --------*/
/*-------------------------*/

/* UPTO HERE */


/* Create the footer. I wanted the footer to stand out from the other content so I used
a light grey colour scheme and a lot of padding to give it a large footer effect */
footer { 
    background-color: lightgrey;
    padding: 80px;
    text-align: center;
}

/* Copies a similar structure to the wrapper created above however this content is centred */
footer p {
    width: 35%;
    margin: 30px auto;
    line-height: 23px; 
}

/* Styling of the footer navigation. Add a bottom margin and remove any other link styling */
.footer-nav {
    list-style: none;
    margin-bottom: 60px;
}

/* Making the footer navigation display horizontally instead of vertically */
.footer-nav li {
    display: inline;
}

/* This is the individual styling for each link inside in the footer navigation. The border and padding create a button look.  */
.footer-nav li a {
    display: inline-block;
    color: black;
    text-decoration: none;
    padding: 15px 20px;
    position: relative;
    border: 1px solid black;
}

/* Removing the previous hover underline link. Also adds a background colour to the button when the user hovers over it */
.footer-nav li a:hover {
    text-decoration: none;
    background-color: grey;
}


/*-------------------------------*/
/*-------- MEDIA QUERIES --------*/
/*-------------------------------*/

/*-------------------------------*/
/*-- Screen Greater than 1024px -*/
/*--------- Destop View ---------*/
/*-------------------------------*/

@media screen and (min-width: 1024px) {
    
    /* Remove the mobile menu so its not visible in the desktop view */
    .menu-wrap {
        display: none;
    }
    
}


/*------------------------------------*/
/*-- Screen Between 768 and 1023px ---*/
/*------------ Tablet View -----------*/
/*------------------------------------*/


@media screen and (min-width: 768px) and (max-width: 1023px) {
    
    /* Adjust the wrapper so it extends further out so its much more readable for this screen size. Also change to a variable line height*/
    .wrapper {
        width: 70%;
        margin: 100px auto;
        line-height: 2.5vw;
    }
    
    /* Adjust the hero text so that it appears more centered on these screen sizes */
    #hero-text {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Also adjust the hero text for the alternate pages */
    #hero-text-alt {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Adjust vertical image class so that it is smaller */
    .big-img-vert {
        display: block;
        margin: 0 auto;
        height: 550px;
    }

    /* Adjust the text image container (image and text side by side) so that it takes up 90% of the screen */
    .text-img-container {
        display: block;
        width: 90%;
    }
    
    /* Adjust the container div so that the two items sit underneath each other instead of side by side */
    .text-img-container div {
        margin: 0 auto;
        width: 70%;
        text-align: left;
        padding: 60px 30px;
    }
    
    /* Adjust the figure image so that it takes up 80% of the screen and does not extend beyond the view */
    .big-img-figure img {
        display: block;
        margin: 0 auto;
        width: 80%;
        text-align: center;
    }
    
    
    /*------ Tablet Navigation ------*/
    /* Is similar to mobile navigation however its slightly smaller */
    
    /* Fix up the navigation so it only appears at the top for people on smaller screen sizes */
    /* The navigation also no longer has the javascript sticky header effect. The position 0 is set to !important which means it no longer moves */
    /* The rest of the navigation bar remains similar to the desktop view */
    #navigation{
        background-color: white;
        list-style-type: none;
        width: 100%;
        box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        position: absolute;
        top: 0 !important;
        transition: top 0.3s;
        z-index: 1;
        height: 100px;
    }
    
    /* Sets a variable text size and variable margin for the "Churchill House" text in the top left corner */
    #logo {
        font-size: 2em;
        margin: 2vw;
    }
    
    
    /* Remove the desktop menu */
    .nav-element {
        display:none;
    }
    
    /* Menu Wrap is the main wrapping container for the whole mobile menu. This makes sure the mobile menu appears above the rest of the content on the page */
    .menu-wrap {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
    }
    
    /* Toggler is the invisible checkbox which sees if the menu has been pressed. If it has been selected the mobile menu will appear */
    .toggler {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        cursor: pointer;
        width: 100px;
        height: 100px;
        opacity: 0;
        margin: 0px;
    }
    
    /* Hamburger is the class for the hamburger icon. Its filled in white with a grey background */
    .hamburger {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: 60px;
        height: 60px;
        padding: 20px;
        background: grey;
        display: flex;
        align-items: center;
        justify-content: center;
        fill: #ffffff;
    }
    
    
    /* Remove the "X" icon from view unless */
    .hamburger-exit{
        display: none;
    }
    
    /* This checks to see if the toggler is checked. If the toggler is checked than the user has clicked to open the mobile menu, the hamburger icon therefore becomes invisible */
    .toggler:checked ~ .hamburger {
        visibility: hidden;
    }
    
    /* This checks to see if the toggler is checked. If it is checked than the user has clicked to open the mobile menu. The X icon therefore appears in the spot where the hamburger menu was */
    .toggler:checked ~ .hamburger-exit {
        display: flex;    
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: 60px;
        height: 60px;
        padding: 20px;
        align-items: center;
        justify-content: center;
        fill: #ffffff;
    }
    
    /* This checks to see if the toggler is checked. If it is checked than the user has clicked to open the mobile menu. The mobile navigation links therefore becomes visibile to the user */
    .toggler:checked ~ .menu {
        visibility: visible;
    }

    /* This checks to see if the toggler is checked. If it is checked than the user has clicked to open the mobile menu. The overlay appears with a 0.75s transition and a transform scale of 1 */
    .toggler:checked ~ .menu div {
        transform: scale(1);
        transition-duration: 0.75s;
    }
    
    /* This makes the menu visible and gives it a transition so that it appears after the grey overlay transition */
    .toggler:checked ~ .menu div div {
        opacity: 1;
        transition:  opacity 0.4s ease 0.4s;
    }

    /* This sets the position of the grey overlay menu. It is invisible until the user clicks the checkbox */
    .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* The overlay is the colour and the shape which sits behind the menu text. The circle shape helps to give a rounded animation, like its popping out from a circle*/
    .overlay {
        background: grey;
        border-radius: 50%;
        width: 300vw;
        height: 300vw;
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        transform: scale(0);
        transition: all 0.4s ease;
    }
    
    /* Sets the text alignment of the content and the maximum width/height of the text. */
    .menu > div > div {
        text-align: center;
        max-width: 90vw;
        max-height: 100vh;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    
    /* Main styling for the list items. Sets the font size and padding for each of the links */
    .mobile-menu li {
        list-style: none;
        color: #fff;
        font-size: 1.5em;
        padding: 2rem;
    }
    
    /* Styling for the link tags. Removes any other link styling */
    .mobile-menu > li > a {
        color: inherit;
        text-decoration: none;
        transition: color 0.4s ease;
    }
     
    
}


/*------------------------------------*/
/*-- Screen Between 768 and 1023px ---*/
/*- Tablet View ORIENTATION LANDSCAPE -*/
/*------------------------------------*/

@media screen and (min-width: 768px) and (max-width: 1023px) and (orientation:landscape) {
    
    /* Changes the hero text on the main page so that it does not hide underneath the navigation bar on tablets when in landscape mode */
    #hero-text {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Changes the hero text on all the other pages so that it does not hide underneath the navigation bar on tablets when in landscape mode */
    #hero-text-alt {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    

    
}


/*------------------------------------*/
/*------ Screen Less than 767px -----*/
/*------------ Mobile View -----------*/
/*------------------------------------*/

@media screen and (max-width: 767px) {
    
    /* Sets the font size for any body text to be 1.5em (A variable width) on mobile screens */
    main {
        font-size: 1.5em;
    }
    
    /* UPTO HERE & COPY + PASTE CODE ABOVE FOR MOBILE MENU */
    
    /* Use a bigger font for main heading */
    h1{
        font-size: 3em;
    }
    
    /* Use a smaller font for subheadings */
    h2 {
        font-size: 2em;
        line-height: 8vw;
    }
    
    /* Use almost the same size font for h3, except its bold */
    h3 {
        font-size: 1em;
    }
    
    /* Gives each paragraph a larger margin (space between each paragraph) */
    section p {
        margin: 20px 0;
    }
    
    /* Change the wrapper so its almost full width and give it a variable line height */
    .wrapper {
        width: 70%;
        margin: 100px auto;
        line-height: 5.5vw;
    }
    
    
/* UP TO HERE */

    /* Changes the list styling to squares as I found the unfilled circles hard to see on small screens */
    .wrapper ul {
        list-style-type: square;
        padding-left: 8vw; 
    }
    
    /* Increase the font size of the footer to match the rest of the content */
    footer {
        font-size: 2em;
    }
    
    /* Decrease the size of the blue "back to top link" as it was too big */
    footer a {
        font-size: 0.6em;
    }
    
    /* Increase the size of the footer navigational buttons as they became too small with the code above */
    .footer-nav a{
        font-size: 1.4em;
    }
    
    /* Style the footer paragraph so that it fits in with the wrapper width */
    footer p {
        width: 80%;
        margin: 40px auto;
        line-height: 6vw;
    }

    /* Change the position of the hero text as it goes lower as the screen deceases in width */
    #hero-text {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Similar to above css code. Position the hero text correctly */
    #hero-text-alt {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    /* Make the horizontal images in the website bigger. This is reponse to the viewsize (A small screensize creates an even smaller image therefore this class makes it bigger)*/
    .big-img-horz {
        display: block;
        margin: 0 auto;
        width: 80%;
    }
    
    /* Similarly to above increase the size of the images so they are viewable */
    .big-img-horz-margin {
        display: block;
        margin: 0 auto 40px;
        width: 80%;
    }
    
    /* Slightly reduce the height of the vertical image. This is because 800px is too much height for a small screen */
    .big-img-vert {
        display: block;
        margin: 0 auto;
        height: 700px;
    }
    
    /* Adjust the figure image width so it spans 90% of the view of the screen. */
    .big-img-figure img{
        display: block;
        margin: 0 auto;
        width: 90%;
        text-align: center;
    }
    
    /* Change the side by side images so that they appear underneath each other instead of side by side */
    .image-column {
        width: 100%;
    }
    
    /* Increase the size of the container where the text and the image sit side by side (found on the description page) */
    .text-img-container {
        display: block;
        width: 100%;
        
    }
    
    /* Adjust the styling of each of the two sections in the */
    .text-img-container div {
        margin: 0 auto;
        width: 70%;
        text-align: left;
        padding: 60px 30px;
    }
    
    /* Make the styling of the text the same in the */
    .text-img-container div p {
        font-size: 1em;
        line-height: 7vw;
    }
    
    /* Adjust the figure text so that it is consistent with the rest of the website */
    figcaption {
        width: 80%;
        margin: 20px auto;
        margin-top: 20px;
        font-size: 0.4em;
    }
    
    /* Adjust the url in the figure so it is consistent in the rest of the website */
    figcaption a {
        font-size: 1em;
    }
    
    /* Used for the title on the Carousel. Adjusting the styling so that it is more consistent with the rest of the site. It is no longer centred */
    .wrapper-no-padding {
        width: 90%;
        line-height: 0px; 
    }
    
    /* Adjusting the styling for the images in the images in the carousel */
    .carousel-img {
        margin: 0 auto;
        width: auto;
        height: 50%;
        padding: 0 20px 0 20px;
    }
    
    
    /*------ Mobile Navigation ------*/
    /* Is similar to tablet navigation however its all larger */
    
    /* Fix up the navigation so it only appears at the top on smaller screen sizes */
    /* The navigation also no longer has the javascript sticky header effect. The position 0 is set to !important which means it no longer moves */
    /* The rest of the navigation bar remains similar to the desktop view */
    #navigation{
        background-color: white;
        list-style-type: none;
        width: 100%;
        box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        /* JS Sticky Header CSS*/
        position: absolute;
        top: 0 !important;
        transition: top 0.3s;
        z-index: 1;
        height: 200px;
    }
    
    /* Sets a variable text size and variable margin for the "Churchill House" text in the top left corner */
    #logo {
        font-size: 4em;
        margin: 5vw;
    }
    
    /* Makes the hero image larger as it appeared too small on mobile screens to know what the image was */
    #hero-img {
        height: 1000px;
    }
    
    /* Makes the description page hero image larger as it appeared too small on mobile screens to know what the image was */
    #hero-img-desc {
        height: 1000px;
    }
    
    /* Makes the history page hero image larger as it appeared too small on mobile screens to know what the image was */
    #hero-img-hist {
        height: 1000px;
    }
    
    /* Makes the architecture page hero image larger as it appeared too small on mobile screens to know what the image was */
    #hero-img-arch {
        height: 1000px;
    }
    
    
    /* Remove the desktop menu */
    .nav-element {
        display:none;
    }
    
    /* Menu Wrap is the main wrapping container for the whole mobile menu. This makes sure the mobile menu appears above the rest of the content on the page */
    .menu-wrap {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
    }
    
     /* Toggler is the invisible checkbox which sees if the menu has been pressed. If it has been selected the mobile menu will appear */
    .toggler {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 3;
        cursor: pointer;
        width: 200px;
        height: 200px;
        opacity: 0;
        margin: 0px;
    }
    
    /* Hamburger is the class for the hamburger icon. Its filled in white with a grey background */
    .hamburger {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: 80px;
        height: 80px;
        padding: 60px;
        background: grey;
        display: flex;
        align-items: center;
        justify-content: center;
        fill: #ffffff;
    }
    
    
    /* Remove the "X" icon from view unless */
    .hamburger-exit{
        display: none;
    }
    
    /* This checks to see if the toggler is checked. If the toggler is checked than the user has clicked to open the mobile menu, the hamburger icon therefore becomes invisible */
    .toggler:checked ~ .hamburger {
        visibility: hidden;
    }
    
    /* This checks to see if the toggler is checked. If it is checked than the user has clicked to open the mobile menu. The X icon therefore appears in the spot where the hamburger menu was */
    .toggler:checked ~ .hamburger-exit {
        display: flex;    
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        width: 80px;
        height: 80px;
        padding: 60px;
        align-items: center;
        justify-content: center;
        fill: #ffffff;
    }
    
    /* This checks to see if the toggler is checked. If it is checked than the user has clicked to open the mobile menu. The mobile navigation links therefore becomes visibile to the user */
    .toggler:checked ~ .menu {
        visibility: visible;
    }

    /* This checks to see if the toggler is checked. If it is checked than the user has clicked to open the mobile menu. The overlay appears with a 0.75s transition and a transform scale of 1 */
    .toggler:checked ~ .menu div {
        transform: scale(1);
        transition-duration: 0.75s;
    }
    
    /* This makes the menu visible and gives it a transition so that it appears after the grey overlay transition */
    .toggler:checked ~ .menu div div {
        opacity: 1;
        transition:  opacity 0.4s ease 0.4s;
    }

    /* This sets the position of the grey overlay menu. It is invisible until the user clicks the checkbox */
    .menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* The overlay is the colour and the shape which sits behind the menu text. The circle shape helps to give a rounded animation, like its popping out from a circle*/
    .overlay {
        background: grey;
        border-radius: 50%;
        width: 300vw;
        height: 300vw;
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        transform: scale(0);
        transition: all 0.4s ease;
    }
    
    /* Sets the text alignment of the content and the maximum width/height of the text. */
    .menu > div > div {
        text-align: center;
        max-width: 90vw;
        max-height: 100vh;
        opacity: 0;
        transition: opacity 0.4s ease;
    }
    
    /* Main styling for the list items. Sets the font size and padding for each of the links */
    .mobile-menu li {
        list-style: none;
        color: #fff;
        font-size: 4em;
        padding: 3rem;
    }
    
    /* Styling for the link tags. Removes any other link styling */
    .mobile-menu > li > a {
        color: inherit;
        text-decoration: none;
        transition: color 0.4s ease;
    }
 
    
}