/* Generic styles ----------------------------------------------*/
/* vietnamese */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hJFQNcOM.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hJVQNcOM.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;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QN.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;
}

body {
  font-family: 'Quicksand', sans-serif;
}

header {
  font-size: 1.5em;
  color: white;
  background-color: #333;
}

.wrapper-fc {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
    grid-auto-rows: auto;
    margin-left: 1em;
}

.profilepic-fc {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
/*
    background-image: url(./index_files/profile_faces/frances_minify.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 0px 0px;
*/
}

.profilepic-fc img {
    width: 100%;
    object-fit: contain;
    object-position: top left;
    overflow: hidden;
}

.profileheader-fc {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    object-fit: cover;

    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 2em;
    grid-auto-rows: 2em 2em auto;
}

.profiletext-fc {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 3;
    object-fit: cover;
    margin-left: 2em;
}

.profilename-fc {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    font-size: 2em;
}

li a {
    padding-left: 0em;
    margin-left: 0px;
    padding-right: 2em;
    text-decoration: none;
}

.profilecontact-fc {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}


.profiletagline-f {
    display: block;
    font-size: 1em;
    margin-top: 1em;
    font-style: italic;
}

.profiletext-p-fc {
    margin-bottom: 1em;
}

@media (max-width: 700px) {
    .wrapper-fc {
        grid-template-columns: repeat(3, 1fr);
    }
}

.wrapper-fc {
    max-width: 1500px;
    margin: auto;
}

/* Navigation bar styling -------------------------------------- */
.navbar {
  list-style-type: none;
  margin: 15px;
  margin-bottom: 30px;
  padding: 5px;
  overflow: hidden;
  background-color: white;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 5;
}

li {
  float: left;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 0.5em 0.5em;
  margin-left: 2px;
  text-decoration: none;
}

li a:hover {
  background-color: #BDBDBD;
}