/*
IMPORTANT: This project made use of code kindly provided by Code Institute Solutions at:
https://github.com/Code-Institute-Solutions/love-running-v3/tree/main/8.1-testing-and-validation

Images are sourced from https://www.pexels.com/

Icons are sourced from https://fontawesome.com/ 

Favicons are generated by https://favicon.io/favicon-converter

Literature content by Lino Bollansee enhanced by ChatGPT 3.5 https://chat.openai.com/
*/

/* Google fonts import */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Oswald:wght@200;300;400;500;600;700&display=swap');

/* Asterisk wildcard selector to override default styles added by the browser */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* General styles */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Generic project styles */
    color: #3a3a3a;
    font-family: 'Lato', sans-serif;
}

h1,
h2,
h3 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #252525;
}

.hidden-heading {
    display: none;
}

/* Header */
header {
    background-color: #ffffff;
    padding: 0 1rem;
    position: fixed;
    z-index: 99;
    width: 100%;
    box-shadow: 0 2px 2px #3a3a3a;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

header a {
    text-decoration: none;
    color: inherit;
}

#menu {
    font-size: 110%;
    letter-spacing: 4px;
    list-style-type: none;
}

#menu>li {
    margin-bottom: 1em;
}

.active {
    /* Border bottom line changed to 3 pixels */
    border-bottom: 3px solid #3a3a3a;
}

/* Navbar styles with dropdown toggle */
nav {
    position: absolute;
    background-color: #ffffff;
    width: 100%;
    left: 0;
    padding: 0 1rem;
    box-shadow: 0 2px 2px #3a3a3a;
    display: none;
    top: 100%;
}

/* Nav toggle */
#nav-toggle:checked~nav {
    display: block;
}

#nav-toggle {
    display: none;
}

.nav-toggle-label {
    font-size: 2rem;
}

/* Main content */
main {
    /* Enlarge main element to push footer down*/
    flex: 1 0 auto;
    /* Add margin at the top to prevent content from being covered by the header */
    margin-top: 47px;
    /* Enable flex properties for child elements */
    display: flex;
    flex-direction: column;
}

/* Hero section */
#hero {
    height: 600px;
    width: 100%;
    background: url("../images/photo-of-a-man-programming-6804595.webp") no-repeat center center/cover;
    position: relative;
}

#cover-text {
    /* Final rgba value sets the opacity so it is semi-transparent */
    /* Color replaced to transparent magenta */
    background-color: rgba(255, 0, 255, .7);
    font-size: 130%;
    position: absolute;
    bottom: 30px;
    width: 80%;
    min-height: 200px;
    padding-top: 40px;
    padding-left: 10px;
}

#cover-text>h2,
#cover-text>h3 {
    color: #ffffff;
}

/* Reasons section */
#reasons {
    width: 90%;
    margin: 20px auto;
}

#reasons h2 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 280%;
}

#benefits-one>div,
#benefits-two>div {
    line-height: 20px;
    margin-bottom: 20px;
}

#benefits p {
    padding: 0 20px;
}

#benefits hr {
    border-top: 1px solid #3a3a3a;
    margin: 5px 0;
}

/* renamed to circle cover background one */
#circle-cover-bg-one {
    background: url('../images/two-men-looking-at-a-laptop-4974920.webp') no-repeat top center / cover;
    height: 90vw;
    width: 90vw;
    margin-bottom: 20px;
    /* Makes the square image into a circle */
    border-radius: 50%;
    max-width: 300px;
    max-height: 300px;
}

/* circle cover background two added */
#circle-cover-bg-two {
    background: url('../images/two-women-looking-at-the-code-at-laptop-1181263.webp') no-repeat top center / cover;
    height: 90vw;
    width: 90vw;
    margin-bottom: 20px;
    /* Makes the square image into a circle */
    border-radius: 50%;
    max-width: 300px;
    max-height: 300px;
}

#benefits-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Meetup Times section */
#times {
    /* Handles responsivity without the need for a media query */
    display: flex;
    flex-wrap: wrap;
}

#times div {
    color: #fafafa;
    background-color: rgba(0, 0, 0, .6);
    padding: 15px;
    text-align: center;
    /* This will not wrap on screens of less than 400px wide.
    Each div will expand to fill the available space on its row */
    flex-basis: 200px;
    flex-grow: 1;
    /* Creates a grid of meetup time dives over the background image */
    border: 2px solid white;
}

#times h3 {
    /* Override the heading colour set in general styles */
    color: #fafafa;
}

/* Gallery page */
#photos img {
    width: 100%;
    line-height: 1em;
}

#photos {
    line-height: 0;
}

/* Form */
#signup {
    background-image: url("../images/female-software-engineer-coding-on-computer-3861963.webp");
    background-size: cover;
    background-position: 75%;
    padding: 20px 10% 0 10%;
    flex-grow: 1;
}


#signup-form {
    color: #ffffff;
    background-color: rgba(60, 60, 60, 0.6);
    padding: 30px;
}


#signup-form>h2 {
    color: #fafafa;
    margin-bottom: 20px;
}


.text-input {
    background: transparent;
    color: #fafafa;
    width: 100%;
    height: 25px;
    margin: 5px 0 20px 0;
    border: 1px solid #fafafa;
    border-radius: 2px;
    padding: 0 5px;
}


.radio-buttons {
    width: 100%;
    display: flex;
    justify-content: space-between;
}


.join-button {
    margin-top: 20px;
    border-radius: 2px;
    padding: 15px 32px;
    font-size: 100%;
    background-color: #454b1b;
    color: #fafafa;
}

/* Footer */
#social-networks {
    text-align: center;
    padding: 20px 0;
    display: flex;
    justify-content: space-evenly;
    list-style-type: none;
}

#social-networks i {
    font-size: 160%;
    padding: 5%;
    /* Dark grey color removed */
}

/* Social-networks icon colors added */
#facebook-color {
    color: #0866ff;
}

#git-color {
    color: #f05033;
}

#linkedin-color {
    color: #0075b4;
}

#skype-color {
    color: #019fda;
}

#telegram-color {
    color: #29a9ea;
}

#twitter-color {
    color: #0f1419;
}

#whatsapp-color {
    color: #25d366;
}

#youtube-color {
    color: #ff0000;
}

/* Media query: large or landscape phones (576px and up) */
@media screen and (min-width: 576px) {
    #photos {
        column-count: 2;
        column-gap: 0;
    }
}

/* Media query: tablets and larger (768px and up) */
@media screen and (min-width: 768px) {

    /* Header */
    nav {
        display: block;
        position: relative;
        box-shadow: none;
        width: fit-content;
        padding-right: 1rem;
    }

    #menu {
        display: flex;
    }

    #menu>li {
        padding-left: 1rem;
    }

    .nav-toggle-label {
        display: none;
    }

    #logo {
        font-size: 280%;
        line-height: 75px;
        margin: 0 0.5rem;
        text-shadow:
            1px 1px 1px rgba(128, 128, 128, 0.1),
            2px 2px 2px rgba(128, 128, 128, 0.2),
            3px 3px 3px rgba(128, 128, 128, 0.3),
            4px 4px 4px rgba(128, 128, 128, 0.4),
            5px 5px 5px rgba(128, 128, 128, 0.5),
            6px 6px 6px rgba(128, 128, 128, 0.6),
            7px 7px 7px rgba(128, 128, 128, 0.7),
            8px 8px 8px rgba(128, 128, 128, 0.8),
            9px 9px 9px rgba(128, 128, 128, 0.9),
            10px 10px 10px rgba(128, 128, 128, 1);
    }

    /* Main content */
    main {
        /* Push main content down to accommodate larger header */
        margin-top: 79px;
    }

    /* Hero */
    #cover-text {
        width: 300px;
        right: 50px;
    }

    /* Reasons section */
    #benefits-one,
    #benefits-two {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #benefits-one>div,
    #benefits-two>div {
        width: 75%;
    }

    #benefits-two>div {
        align-self: flex-end;
    }

    /* Gallery */
    #photos {
        column-count: 3;
    }

    /* Form */
    #signup {
        background-position: center;
        position: relative;
    }

    #signup-form {
        max-width: 400px;
        position: absolute;
        left: 10%;
        top: 150px;
    }

    .text-input:hover {
        border-color: #f16c6b;
    }

    .join-button:hover {
        /* changed background color to transparent magenta */
        background-color: rgba(255, 0, 255, .7);
        /* removed color */
    }
}

/* Large devices (laptops and desktops, 992px and up) */
@media screen and (min-width: 992px) {
    #menu a:hover {
        /* Border bottom removed, transparent magenta color added */
        background-color: rgba(255, 0, 255, .7);
    }

    /* Gallery */
    #photos {
        column-count: 4;
    }
}

@media screen and (min-width: 1200px) {

    /* Reasons section */
    #benefits {
        display: flex;
        flex-direction: row;
    }

    #benefits>div {
        flex: 1;
    }

    #benefits-image {
        order: 0
    }

    #benefits-two {
        order: 1;
    }

    #benefits-two>div {
        align-self: flex-start;
    }

    #benefits-one>div {
        align-self: flex-end;
    }
}

/*
IMPORTANT: This project made use of code kindly provided by Code Institute Solutions at:
https://github.com/Code-Institute-Solutions/love-running-v3/tree/main/8.1-testing-and-validation

Images are sourced from https://www.pexels.com/

Icons are sourced from https://fontawesome.com/ 

Favicons are generated by https://favicon.io/favicon-converter

Literature content by Lino Bollansee enhanced by ChatGPT 3.5 https://chat.openai.com/
*/