body {
  background-color: #FCFCFC;
}

html {
  scroll-behavior: smooth;
}

/* general values */

.bold {
  font-family: europa, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.light {
  font-family: europa, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.blue {
  color: #344C8B;
}

.font {
  color: #2121ff;
}

/* text styles */

h1 {
  color: #212121;
  font-size: xxx-large;

  font-family: europa, sans-serif;
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

h2 {
  color: #212121;
  font-size: xx-large;

  text-align: center;
  padding-top: 100px;

  font-family: europa, sans-serif;
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (min-width: 576px){
  h2 {
    padding-top: 200px;
    padding-bottom: 100px;
  }
}

h3 {
  color: #212121;
  font-size: x-large;

  margin-bottom: 12px;

  font-family: europa, sans-serif;
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

p {
  color: #212121;
  font-size: medium;
  line-height: 150%;

  /* max-width: 450px; */

  font-family: europa, sans-serif;
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #344C8B;
  text-decoration: none;

  font-family: europa, sans-serif;
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

a:hover {
  /*color: #CD3487;*/
  color: #EC718F;
  text-decoration: none;
}

a:active :visited {
  color: #758CC6;
}

p .small {
  font-size: small;
  line-height: 20%;

  font-family: europa, sans-serif;
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

p .small-bold {
  font-size: small;
  line-height: 20%;

  font-family: europa, sans-serif;
  font-weight: 700;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.nav-text {
  color: #212121;
  font-size: large;

  font-family: europa, sans-serif;
  font-weight: 300;
  font-style: normal;
}

.subtitle {
  color: #212121;
  font-size: x-large;
  line-height: 20%;

  font-family: europa, sans-serif;
  font-weight: 300;
  font-style: normal;
}

@media only screen and (min-width: 576px){
  .align-right {
    text-align: right;
  }
}

.align-left {
  text-align: left;
}

.align-center {
  text-align: center;
}

/* elements */

.navbar {
  background-color: #FCFCFC;
  padding-bottom: 16px;
  padding-top: 16px;

  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.navbar a {
  float: left;

  color: #212121;
  font-size: small;

  font-family: europa, sans-serif;
  font-weight: 300;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.navbar a:hover {
  color: #EC718F;

  font-family: europa, sans-serif;
  font-weight: 700;
  font-style: normal;
}

.navbar-links {
  float: right;
}

.navlink {
  margin-left: 12px;
  width: 34px;
  text-align: center;
}

.brand-icon {
  width: 16px;
}

@media only screen and (min-width: 576px) {
  .navlink {
      margin-left: 24px;
  }
}

.fa-linkedin-in:hover {
  color: #EC718F;
}

.section {
  padding-top: 100px;
  margin-top: 50px;
}

@media only screen and (min-width: 576px){
  .section {
    padding-top: 200px;
    margin-top: 100px;
  }
}

img {
  width: 100%;
}

.cs-img {
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3rem;
	margin-bottom: 2rem;
}

.square {
  width: 300px;
  height: 300px;
  object-fit: cover;

  margin: 6px;
}

@media only screen and (max-width: 576px) {
  img.hide {
    display: none;
  }
}

.inline-header {
	color: #c60069;
	font-weight: bold;
	margin-right: 0.5rem;
}

/* spacing */

.bottom-small {
  margin-bottom: 32px;
}

.top-bottom-large {
  margin-top: 100px;
  margin-bottom: 100px;
}

.top-navbar {
  padding-top: 50px;
}

.footer {
	margin-top: 3rem;
	font-size: 70%;
}