@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Zain:ital,wght@0,200;0,300;0,400;0,700;0,800;0,900;1,300;1,400&display=swap');

body {
    background: url('../img/background.svg') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    min-height: 100%;
    color: #0F3050;
    font-family: "Zain", sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 18px;
}

h1 {
    text-align: center;
    color: #0F3050;
    margin: 75px 0px 32px 0px;
    font-family: "Lobster", sans-serif;
    font-style: normal;
    font-weight: 200;
    font-size: 72px;
}

h2 {
    color: #A91F4B;
    font-style: normal;
    font-size: 18px;
    font-weight: 400;
    margin: 20px 32px 0px 0px;
    cursor: pointer;
    width: fit-content;
    display: inline-block;
}

h2.navigation-tab.selected {
    border-bottom: 3px solid #A91F4B;
}

div#social-media-links {
    position: absolute;
    right: 0px;
    top: -48px;
}

a#linkedin {
    display: inline-block;
    overflow: hidden;
    background: url('../img/linkedin.svg') center center no-repeat;
    background-size: cover;
    white-space: nowrap;
    text-indent: -1000px;
    width: 36px;
    height: 36px;
    margin-right: 18px;
}

a#instagram {
    display: inline-block;
    overflow: hidden;
    background: url('../img/instagram.svg') center center no-repeat;
    background-size: cover;
    white-space: nowrap;
    text-indent: -1000px;
    width: 36px;
    height: 36px;
}

div#page-container {
    width: 75%;
    margin: 32px auto;
    letter-spacing: 0.1em;
    max-width: 1200px;
    overflow: visible;
    position: relative;
}

section {
    margin: 28px 0px;
    overflow: visible;
}

section#introduction {
    text-align: center;
    margin-bottom: 72px;
}

section#philosophy, section#process {
    display: none;
}

span#tagline {
    font-size: 28px;
    font-weight: 300;
    line-height: 34px;
}

div#portfolio-resume-buttons {
    position: relative;
    width: 400px;
    margin: 32px auto 0px auto;
}

div#portfolio-button {
    float: left;
    text-align: center;
    margin-right: 32px;
}

span#password-required {
    display: block;
    margin: 0 auto;
    font-weight: 300;
}

a.button {
    display: inline-block;
    border-radius: 50px;
    background-color: #A91F4B;
    color: #ffffff;
    padding: 10px 42px;
    text-decoration: none;
    font-weight: 400;
}

img#portrait {
    width: 25%;
    border-radius: 24px;
    float: left;
    margin: 6px 1.75em 1em 0;
}

img#process-diagram {
    width: 100%;
    margin-top: 16px;
    border-radius: 24px;
    background-color: rgba(255, 255, 255, 0.05);
}

img#philosophy-graphic {
    width: 100%;
    margin-top: 16px;
    border-radius: 24px;
}