@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTucXtAOvWDSHFF.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTufntAOvWDSHFF.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTucHtAOvWDSA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z11lFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1JlFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1xlFd2JQEk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z11lFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1JlFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9Z1xlFd2JQEk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z11lFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1JlFd2JQEl8qw.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6Z1xlFd2JQEk.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    background-color: #edf6ff;
    color: #222222;
    font-size: 16px;
    font-weight: 100;
}

a,
a:visited,
a:hover,
a:active {
    color: inherit;
}

body {
    background-attachment: fixed;
    background-image: url('../img/bcn.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 2;
}

body::after {
    background-image: linear-gradient(135deg, #91d1ff 0%, #a387ff 100%);
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    opacity: .6;
    z-index: -1;
}

header,
main,
footer {
    width: 75%;
    max-width: 1080px;
    margin: 0 auto;
}

header {
    padding-top: 80px;
}

header>div {
    height: 610px;
    position: relative;
    background-image: url('../img/bcn.jpg');
    background-size: cover;
    background-position: center;
}

header>h1,
main>section>h2 {
    font-family: 'Indie Flower', serif;
    text-align: center;
    padding: 10px 0;
    font-weight: 400;
}

header>h1 {
    color: #FFFFFF;
    font-size: 4.5rem;
    animation: fadeIn 3s;
    padding: 0 0 30px 0;
}

main>section h3,
main>section h4 {
    font-family: "Poppins", sans-serif;
    line-height: 2rem;
}

main>section h3 {
    font-size: 2rem;

    color: #a387ff;
    font-weight: 100;
}

main>section h4 {
    font-weight: 600;
    font-size: 1rem;
    padding: 10px 3px;
}

header>div>img {
    display: block;
    margin: 0 auto;
    padding-top: 150px;
}

main {
    margin: 0 auto;
    min-height: 800px;
}

main>section {
    background-color: #FFFFFF;
    padding: 70px 20px;
}

main>section.bg {
    background-image: linear-gradient(135deg, #a387ff 0%, #91d1ff);
    color: #FFFFFF;
}

main>section.bg2 {
    background-image: linear-gradient(135deg, #91d1ff 0%, #a387ff);
    color: #FFFFFF;
}

main>section>h2 {
    font-size: 3rem;
    margin-bottom: 50px;
    padding-top: 0;
}

main>section>p {
    width: 70%;
    text-align: center;
    margin: 0 auto;
    font-size: 1.4rem;
}

.collaborator {
    display: grid;
    grid-template-columns: auto 250px;
    align-items: right;
    column-gap: 25px;
    width: 80%;
    margin: 0 auto;
}

.collaborator img {
    width: 250px;
}

.collaborator p {
    margin-top: 2rem;
    line-height: 1.5rem;
    color: #777777;
    text-align: right;
}

.collaborator h3,
.collaborator h4 {
    text-align: right;
}

.collaborator:not(.founder) {
    margin-top: 30px;
}

.founder {
    grid-template-columns: 310px auto;
    align-items: left;
}

.founder p {
    text-align: left;
}

.founder img {
    width: 280px;
    outline: 5px solid #a387ff;
    outline-offset: -35px;
    border: 0px solid transparent;
    border-width: 15px 45px 45px 15px;
}

.founder h3,
.founder h4 {
    text-align: left;
}

.founder .desc {
    padding-top: 50px;
}

.connections {
    display: flex;
}

.connections a {
    width: 33%;
    text-align: center;
    text-decoration: none;
}

.connections a h3 {
    color: #FFFFFF;
}

.connections a img {
    margin-top: 10px;
    max-width: 95%;
}

footer {
    height: 100px;
}

@media screen and (max-width: 1300px) {

    header,
    main,
    footer {
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
    }
}

@media screen and (max-width: 1090px) {

    header,
    main,
    footer {
        width: 98%;
        margin: 0 auto;
        overflow: hidden;
    }

    main>section>p {
        width: 85%;
    }

    .collaborator {
        width: 96%;
    }
}

@media screen and (max-width: 980px) {
    main>section>p {
        width: 96%;
    }

    .connections {
        flex-direction: column;
    } 
    .connections a {
        width: 100%;
        max-width: 720px;
        margin: 10px auto;
    }
}

@media screen and (max-width: 800px) {
    header>div>img {
        width: 75%;
        max-width: 480px;
    }
    .collaborator {
        text-align: center;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 1fr;
        row-gap: 20px;
    }
    .collaborator:not(:last-of-type) {
        margin-bottom: 45px;
    }
    .collaborator:not(.founder) {
        row-gap: 0px;
    }
    .founder {
        grid-template-rows: 410px auto;
    }
    .founder .desc {
        padding-top: 0;
    }
    .collaborator img {
        margin: 0 auto;
    }
    .collaborator .desc {
        align-self: start;
    }
    .collaborator h3,
    .collaborator h4,
    .collaborator p {
        text-align: center;
    }
}

@media screen and (max-width: 600px) {
    header,
    main,
    footer {
        width: 100%;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}