/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 2 version
*/

/*
I am using a colour theme generated from https://www.w3schools.com/w3css/w3css_color_generator.asp - specifically their '2018 Little Boy Blue' theme

From lighter to darker colours:
#f6f9fd - background colour
#e2ecf7
#c5d8ef
#a9c5e7
#8cb1df
#6f9fd8 - middle colour
#558dd1
#3c7bc9
#316cb3 - Links / navigation
#2a5c9a
#234d80

#0471A6 - used for a slightly better scoring active link colour (regarding contrast)
*/

/* CSS variables, available to all elements through the root pseudo-class */
:root {
    /* Defining colours used throughout the site */

    /* Defining font weights and sizes */
}

/* Force all HTML elements to include padding + border in size calculations */
* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Define the font sizes and line heights for default text elements (at least the ones in use at the moment) */
body {
    font-family: 'Shippori Mincho', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
}

/* Header (nav bar) formatting, making it a Flexbox to change size with browser window */
.page-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: 20px;
    border-bottom: 1px groove #c5d8ef;
    background-color: white;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Each item in the heading (logo + navigation links) has base width of 200px, is able to shrink but not able to grow */
.page-header__item {
    -webkit-box-flex: 0;
        -ms-flex: 0 1 auto;
            flex: 0 1 auto;
}

/* Fix the height of the logo on each page so that when viewing on smaller screens the logo doesn't get stretched */
.page-header__logo {
    position: relative;
    height: 100%;
}

/* Target only the navigation headings, allow them to grow to take up the remaining space on the screen and right-align them */
.page-header__item:last-child {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    text-align: right;
}

/* Remove bullet points from navigation list */
.navigation-list {
    list-style-type: none;
}

/* inline-block means that the navigation items appear on the same line */
.navigation-list li {
    display: inline-block;
    margin-left: 15px;
}

/* Set padding for main sections, mainly for responsiveness */
main {
    padding: 10px;
    display: flow-root;
}

hr {
    opacity: 0.3;
}

h1 {
    font-size: 30px;
    font-weight: 700;
}

.centered {
    text-align: center;
}

h2 {
    font-size: 24px;
    font-weight: 700;
}

h3 {
    font-size: 18px;
    font-weight: 700;
}

/* Define colour scheme for links, including default, visited, hovering and active links */
a {
    color: #316cb3;
    text-decoration: none;
}

a:visited {
    /* Changes the colour of the link when it's been visited */
    color: #234d80;
}

a:active {
    /* Changes the colour of the link when it's selected */
    color: #0471a6;
}

/* Changes the colour of the tab that the user is currently on. Also overriding the :visited pseudo-class for the .navigation-list__item--active class */
.navigation-list__item--active {
    color: #0471a6;
    text-decoration: none;
    font-weight: 700;
}
.navigation-list__item--active:visited {
    color: #0471a6;
    text-decoration: none;
    font-weight: 700;
}

/* Adding link animation for hovering over a link. Based on this CodePen (specifically topBottomBordersIn) - https://codepen.io/EvyatarDa/pen/waKXMd */
.navigation-list__item::before {
    /* position: relative; */
    display: block;
    height: 2px;
    background: #234d80;
    content: "";
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.navigation-list__item::after {
    /* position: relative; */
    display: block;
    height: 2px;
    background: #234d80;
    content: "";
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.navigation-list__item::before {
    top: 0;
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
}

.navigation-list__item::after {
    bottom: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
}

.navigation-list__item:hover::before,
.navigation-list__item:hover::after {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
}

/* Sets dimensions for entire profile section. The margin property centers the profile horizontally */
.profile {
    max-width: 700px;
    margin: 0 auto;
}

/* Sets profile picture dimensions, and makes it float to left of profile text */
.profile__portrait {
    float: left;
    width: 250px;
    margin-right: 40px;
    border-radius: 50%;
}

/* Styling the form on contact.html */
#contact-form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    max-width: 700px;
    margin: 0 auto;
}

#contact-form .standard-label {
    padding-bottom: 5px;
}

#contact-form input {
    margin-bottom: 10px;
}

.single-line-text-input {
    height: 40px;
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    max-width: 700px;
    margin-left: 0;
    margin-right: 0;
}

.error-message {
    color: #FF0000;
}

#contact-form textarea {
    margin-bottom: 20px;
}

/* Formatting parent container for buttons for the form */
.parent-button-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
}

/* Formatting parent container for button on about.html */
.parent-button-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

button {
    /* Overwrite browser defaults, resets border */
    border: none;
    display: inline-block;

    /* Inherit font from parent element */
    font-family: inherit;

    /* Set background colour */
    background-color: #234d80;

    /* Set text colour */
    color: #fff;

    /* Set no text decoration */
    text-decoration: none;

    /* Give the button some dimensions */
    padding: 10px;
    border-radius: 3px;

    /* Give the button a small bottom border for a slight 3-d effect */
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);

    /* Give the button a transition (format is transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay] */
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
}

.button {
    /* Overwrite browser defaults, resets border */
    border: none;
    display: inline-block;

    /* Inherit font from parent element */
    font-family: inherit;

    /* Set background colour */
    background-color: #234d80;

    /* Set text colour */
    color: #fff;

    /* Set no text decoration */
    text-decoration: none;

    /* Give the button some dimensions */
    padding: 10px;
    border-radius: 3px;

    /* Give the button a small bottom border for a slight 3-d effect */
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);

    /* Give the button a transition (format is transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay] */
    -webkit-transition: 0.2s opacity;
    transition: 0.2s opacity;
}

button:hover,
button:focus,
.button:hover,
.button:focus {
    /* Changes cursor to a hand while hovering over button */
    cursor: pointer;

    /* Reduce opacity when hovering over button */
    opacity: 0.8;
}

/* Added outside div for image on about.html to center it */
.parent-image-center {
    text-align: center;
}

/* Adding formatting for image on about.html */
.about-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.about-image__caption {
    display: block;
}

/* Grid fallback */
.grid__item {
    display: inline-block;
    width: 33%;
    background-color: #e2ecf7;
    margin: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

/* End grid fallback */

/* Sets up grid display for browsers that support this feature */
@supports (display: grid) {
    .grid {
        display: -ms-grid;
        display: grid;

        /* Sets up 3 columns of equal size */
        -ms-grid-columns: 1fr 20px 1fr 20px 1fr;
        grid-template-columns: 1fr 1fr 1fr;

        /* Creates gaps between the grid elements */
        grid-gap: 20px;
        margin: 0;
    }

    /* Sets up individual grid items / boxes */
    .grid__item {
        background-color: #e2ecf7;

        /* width: auto - sets width to be determined by grid container */
        width: auto;
        min-height: auto;
        margin: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 10px;
    }
}

.app-preview-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 100%;
    max-height: 300px;
}

.grid__item h2 {
    text-align: center;
}

.showHideButton {
    font-size: 13px;
    padding: 5px;
}

/* Format the page footer (where links to social media go) */
.page-footer {
    /* clear: both - does not allow floating elements on either side of the element */
    clear: both;

    /* Make footer a flexbox too */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    /* Makes the text appear above the icons for the social media sited */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;

    /* Centers the text in the page */
    text-align: center;

    /* Add padding to footer so when resized it's not against the edge of the page */
    padding: 10px;
}

/* Media query to change layout for small screens.
'all' specifies that it is applied to all media (screen, print and speech). max-width defines screen size that these rules are applied to */
@media all and (max-width: 750px) {
    /* Smaller gap between grid items */
    .grid {
        grid-gap: 10px;
    }

    /* Returns the final grid item to the original grid formatting (rather than taking up more space as defined above) */
    .grid__item:last-child {
        grid-column: auto / auto;
        grid-row: auto / auto;
    }

    /* Reduce heading to smaller size */
    h1 {
        font-size: 22px;
    }

    /* Increase the vertical padding of each nav item to prevent them overlapping each other */
    .navigation-list__item {
        display: inline-block;
        padding-bottom: 10px;
    }
}

/* Specific media query for screens less than 500px wide. Grid columns in work.html going down to 1. Changing header behaviour too */
@media all and (max-width: 500px) {
    .page-header {
        display: block;
    }

    .grid {
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    }

    .profile__portrait {
        float: none;
        display: inline-block;
    }
}

#index-about {
    max-width: 700px;
    margin: 0 auto;
}

#index-work {
    padding: 10px;
    display: flow-root;
}

#index-contact {
    padding: 10px;
    display: flow-root;
}

/* Specific media query for screens between 500px to 750px wide. Only change is the grid columns going down to 2. Everything else will be the same as the media query above */
@media all and (min-width: 500px) and (max-width: 750px) {
    .grid {
        -ms-grid-columns: 1fr 10px 1fr;
        grid-template-columns: 1fr 1fr;
    }
}

/* Animation for wave in SVG image on about.html */
@-webkit-keyframes wave-grow-shrink {
    from {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
        fill: #fff;
    }

    to {
        -webkit-transform: translate(0, 20px);
                transform: translate(0, 20px);
        fill: #7fffd4;
    }
}
@keyframes wave-grow-shrink {
    from {
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
        fill: #fff;
    }

    to {
        -webkit-transform: translate(0, 20px);
                transform: translate(0, 20px);
        fill: #7fffd4;
    }
}

/* Applying animation to wave in image */
.wave {
    -webkit-animation: 1s wave-grow-shrink infinite alternate linear;
            animation: 1s wave-grow-shrink infinite alternate linear;
}

/* Changing the water colour in the default SVG to something more visible */
.water {
    fill: #00bfff;
}

.case-study {
    max-width: 1500px;
    margin: 0 auto;
}

.backend, .frontend, .intro {
    display: flex;
    flex-direction: row;
}

.backend-image, .frontend-image, .intro-image {
    float: left;
    max-width: 100%;
    max-height: 500px;
    padding-right: 10px;
    margin-bottom: 30px;
}

.backend-image {
    margin-bottom: 100px;
}

.backend-content, .frontend-content, .intro-content {
    display: flex;
    flex-direction: column;
}