/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,400;0,500;0,700;1,200;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo+Play:wght@200;300;400;500;600;700;800;900;1000&family=Spectral:ital@0;1&display=swap');
/* END FONTS */

/* GENERAL */
html {
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  background: #fcfeff;
}

html.sunny {
  background: rgb(229,235,244);
  background: linear-gradient(-45deg, rgba(229,235,244,1) 25%, #c9dafc 50%, rgba(248,250,235,1) 75%);
  background-size: 400% 400%;

  animation: animate-gradient ease 60s infinite;
}

@keyframes animate-gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

body { padding: 0 40px; }

footer {
  border-top: 1px solid black;
  margin-top: 1em;
  /* width: 600px; */
}

h1.header {
  font-family: 'Cairo Play', 'Spectral', serif;
  font-weight: 500;
  font-size: 2em;
  /* text-transform: uppercase; */
  text-shadow: rgba(181, 217, 255, 0.5) 0px 0px 5px, rgba(181, 217, 255, 0.5) 0px 0px 8px, rgba(181, 217, 255, 0.5) 0px 0px 10px, rgba(181, 217, 255, 0.5) 0px 0px 15px, rgba(181, 217, 255, 0.5) 0px 0px 20px, rgba(181, 217, 255, 0.5) 0px 0px 25px, rgba(181, 217, 255, 0.5) 0px 0px 30px;
}

h1.header a {
  text-decoration: none;
  color: #0f4c91;
}

h1 a.header-black {
  color: black;
}

.back-icon::before, .forward-icon::before, .out-icon::after {
  font-family: 'Open Sans', 'Inter', sans-serif;
  font-weight: 200;
  margin-right: 5px;
}

.header .back-icon::before {
  margin-right: 10px;
}

.back-icon::before {
  content: '\2190 ';
}

.forward-icon::before {
  content: '\2192'
}

.out-icon::after {
  /* content: ' \2197';
  font-size: 1em; */
  position: absolute;
  /* top: 4px; */
  content: ' ';
  background: url('/assets/images/arrow-out2.svg') no-repeat center;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  margin-top: -0.3em;
}

h1, h2, h3, h4 {
  font-weight: 300;
  color: #0f4c91;
  text-transform: capitalize;
  max-width: 600px;
  /* font-family: 'Spectral', serif; */
  font-family: 'Cairo Play', 'Spectral', serif;
  font-weight: 400;
}

/* For displaying in the right column */
section.project h1, section.project h2, section.project h3, section.project h4 {
  width: auto;
}

h3 { font-size: 1.42em; }
h2 { font-size: 1.66em; }

div.divider {
  border-top: 1px solid #000;
  height: 1px;
  /* width: 600px; */
}

/* p { width: 600px; } */
/* For displaying in the right column */
section.project p {
  width: auto;
}

a { color: black; }

.icon, .back {
  font-family: 'Inter' !important;
}

nav {
  position: fixed;
  top: 0;
}

nav .back {
  font-size: 0.75em;
  margin-top: -4px;
  display: inline-block;
  top: 1px;
  position: relative;
}

footer .back {
  position: relative;
  top: 2px;
}

a.no-decoration {
  text-decoration: none;
}

span.emphasize {
  font-weight: 550;
  /* color: #0f4c91; */
}

ul.pure {
  list-style-type: none;
  padding: 0;
}

.wrap-text {
  white-space: pre-wrap;
}

.content {
  margin-top: 100px;
}
/* EOF GENERAL */

/* NEWS SECTION */
.news-list {
  list-style-type: none;
  padding: 0;
  font-size: 0.9em;
  font-style: italic;
  /* width: 400px; */
}

.news-list p {
  margin: 5px 0;
  font-weight: 400px;
}

.news-list .news-title {
  margin: 0;
  /* color: #0f4c91; */
  font-weight: 500;
}

.news-list li {
  margin-bottom: 2em;
}

.news-list li:last-child {
  border-bottom: none;
}

.news-list a:hover {
  text-decoration: underline;
}

.news-list p {
  width: auto;
}
/* EOF NEWS SECTION */

/* INDEX / PROJECT separation */
.flex-container {
  display: flex; /* This turns on the flex layout for its children */
  /* max-width: 1600px; /* 600px + 1000px = 1600px */
  margin: 0 auto; /* This centers the container if the viewport is wider than 1600px */
  flex-direction: row;
  justify-content: center;
}

.flex-container .flex-left {
  width: 450px;
}

.flex-container .flex-left p {
  width: 450px;
}

.flex-container .flex-right {
  flex-grow: 1; /* This makes the column flexible */
  max-width: 600px;
  margin-left: 50px;
}

section.project h2:first-child, section.news h2:first-child, section.project h3:first-child, section.news h3:first-child, section.project h4:first-child, section.news h4:first-child {
  margin-top: 0;
}

/* END INDEX / PROJECT separation */

/* INTRO */
.socials {
  font-size: 1.2em;
}
/* EOF INTRO */

/* CV */
.cv-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

.cv-bio-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: left;
}

.cv-bio-image-wrapper {
  width: 417px;
}

.cv-bio-text-wrapper {
  flex-grow: 1;
  margin-left: 50px;
}

.cv-wrapper h2, .cv-wrapper h3 {
  margin-bottom: 0;
}

.cv-list {
  margin: 0;
  list-style-type: none;
  padding: 0;
}

.cv-list li {
  margin-bottom: 1em;
}

.cv-date {
  width: 160px;
  font-size: 0.9em;
  display: inline-block;
  font-style: italic;
}
/* EOF CV */

/* INDEX */
/* menu navigation */
.menu a {
  color: grey;
  cursor: pointer;
  text-decoration: none;
  font-size: 1.6em;
  /* font-family: 'Spectral'; */
  font-family: 'Cairo Play', 'Spectral', serif;

  letter-spacing: 3px;
  font-style: italic;
  transition: color 0.5s ease;
}

.menu a.selected {
  color: #0f4c91;
  /* text-decoration: underline; */
}

.menu a:hover {
  color: #0f4c91;
}

.menu a:first-child {
  margin-right: 20px;
}

[data-project-type="commissioned"] {
  display: none;
}
/* end menu navigation */

ul.projects-list {
  padding: 0;
  font-size: 1.6em;
  font-weight: 300;
  width: 450px;
}

ul.projects-list li {
  list-style-type: none;
  /* font-family: 'Spectral', serif; */
  font-family: 'Cairo Play', 'Spectral', serif;

  margin-bottom: 45px;
  line-height: 1;
}

ul.projects-list li.section-header {
  text-transform: uppercase;
  margin-top: 20px;
  color: #666;
}

ul.projects-list li.project-item a {
  color: #000000;
  text-decoration: none;
  transition: color 0.5s ease;
  position: relative;
}

ul.projects-list li.project-item a:hover, ul.projects-list li.project-item a.selected {
  color: #0f4ca1;
}

ul.projects-list li.project-item .project-description {
  font-size: 0.77em;
}

.no-margin-top {
  margin-top: 0;
}

.no-margin-bottom {
  margin-bottom: 0;
}
/* EOF INDEX */

/* PROJECT */
img.project-image {
  width: auto;
  max-width: 100%;
  display: block;
}

div.image {
  width: 600px;
  margin-bottom: 1em;
}
/* For displaying in the right column */
section.project div.image {
  width: auto;
}

.image-description {
  margin-top: 5px;
  font-style: italic;
  font-size: 1em;
  text-align: center;
}

h3.project-subtitle, h4.project-subtitle {
  margin-bottom: 0;
}

.quotation {
  font-style: italic;
}

h2.with-project-link, h3.with-project-link {
  margin-bottom: 0;
}

p a:not(.no-out-icon)[target=_blank]:after {
  /* content: '\2197';
  font-style: 'Open Sans', 'Inter', sans-serif;;
  font-size: 0.9em;
  text-decoration: none; */
  content: ' ';
  background: url('/assets/images/arrow-out2.svg') no-repeat center;
  width: 1.4em;
  height: 1.4em;
  display: inline-block;
  position: relative;
  top: 0.1em;
  margin-top: -0.45em;
}

p a {
  transition: color 0.5s ease;
  white-space: nowrap;
  cursor: crosshair;
}

p a:hover {
  color: #0f4ca1;
}

/* EOF PROJECT */

/* FITVID */
.fitVids-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.fitVids-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe {
  border: none;
}
/* EOF FITVID */

/* SMALL SCREEN */
/* @media only screen and (max-width: 1300px) {
  section.project p {
    width: 600px;
  }

  section.project div.image {
    width: 600px;
  }

  section.project {
    margin-left: 0;
  }
} */
/* EOF SMALL SCREEN */

/* MOBILE / TABLET */
@media only screen and (max-width: 1050px) {
  html {
    background-size: 1000% 100%;
    animation-duration: 10;
  }

  .flex-container .flex-left {
    width: unset;
  }

  .flex-container .flex-right {
    width: unset;
  }

  .flex-container .flex-left p {
    width: unset;
  }

  ul.projects-list {
    width: unset;
  }

  body {
    padding: 8px;
    box-sizing: border-box;
    margin: 0;
  }

  footer, h1, h2, h3, h4, p, div.image, div.divider {
    width: auto;
    padding-left: 0;
    padding-right: 0;
    max-width: 600px;
  }

  ul.projects-list {
    font-size: 1.45em;
  }

  ul.projects-list li.project-item a {
    font-weight: 300;
  }

  img.project-image {
    padding-left: 0;
    padding-right: 0;
  }

  /* .out-icon::after {
    /* content: '->';
    font-size: 1.1em;
    position: relative;
    bottom: 0;
    top: 0;
  }*/

  .flex-container {
    flex-direction: column-reverse;
  }

  .flex-container .flex-right {
    margin-left: 0;
  }

  .mobile-hide {
    display: none;
  }
}
/* EOF MOBILE / TABLET */