html, body {
  background-color: #C0C6CF;
  font-family: 'NeueHaas', sans-serif;
  color: #1E222E;
}

/* BODY FADE */
body {
  animation: fadeInAnimation ease 0.8s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}


a {
  color: #1E222E;
  transition: 0.15s ease-in;
  text-decoration: none;
  border-bottom: 2px solid;
}

a:hover {
  color: #F24822;
}

/* Navbar */
.logo, ul.menu {
  padding-top: 8px;
}

.menu a {
  color: #ffffff;
  transition: 0.25s ease-in;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.menu a:hover {
  border-color: #F24822;
}

li.current_page_item a {
  border-color: #F24822;
}

object {
  pointer-events: none;
}
.highlight {
  color: #1E222E;
}
header {
  --shadow: hsla(0 0% 0% / 0.08) 0 0.5rem 0.5rem;
  position: sticky;
  top: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 12px 24px;
  background-color: white;
  z-index: 1001;
  box-shadow: var(--shadow);
}

@supports (animation-timeline: scroll()) {
  header {
    animation: scroll-shadow linear both;
    animation-timeline: scroll();
    animation-range: 0ex 5ex;
  }

  @keyframes scroll-shadow {
    from {
      box-shadow: none;
    }
    to {
      box-shadow: var(--shadow);
    }
  }
}

.menu {
  display: flex;
  gap: 1rem;
  margin: 0;
}

.header-dark {
  background-color: #3E424D;
}

.header-dark a {
  padding-top: 8px;
}

.highlight {
  color: #1E222E;
}
img{
  width: 100%;
  height: auto;
}

/* TYPOGRAPHY */
@font-face {
  font-family: NeueHaas;
  src: url(https://nicholasbergesen.com/assets/NeueHaasDisplayRoman.ttf);
}

p, li {
  font-size: clamp(1rem, 0.243vw + 0.913rem, 1.125rem);
  line-height: clamp(1.7rem, 0.413vw + 1.551rem, 1.912rem);
  color: #3E424D;
  margin: 0;
}

h1 {
  font-size: clamp(2.125rem, 5.34vw + 0.203rem, 4.875rem);
  line-height: clamp(2.55rem, 6.408vw + 0.243rem, 5.85rem);
}

h2 {
  font-size: clamp(2rem, 3.883vw + 0.602rem, 4rem);
  line-height: clamp(2.8rem, 3.883vw + 1.402rem, 4.8rem);
}

h3 {
  font-size: clamp(1.75rem, 2.427vw + 0.876rem, 3rem);
  line-height: clamp(2.45rem, 2.233vw + 1.646rem, 3.6rem);
}

h4 {
  font-size: clamp(1.5rem, 0.971vw + 1.15rem, 2rem);
  line-height: clamp(2.25rem, 1.456vw + 1.726rem, 3rem);
  color: #3E424D;
}

h5 {
  font-size: clamp(1.25rem, 0.485vw + 1.075rem, 1.5rem);
  line-height: clamp(2rem, 0.777vw + 1.72rem, 2.4rem);
  color: #3E424D;
}

h6 {
  font-size: clamp(0.75rem, 0.243vw + 0.663rem, 0.875rem);
  line-height: clamp(1.35rem, 0.437vw + 1.193rem, 1.575rem);
  color: #6C717E;
}

iframe {
  border-radius: 8px;
}

img {border-radius: 8px;}


/* SPACING */
.title {
  margin-top: 128px;
}

.break {
  padding-bottom: 128px;
}


/* FOOTER */
footer {
  padding: 64px 0;
}

footer h6 {
  display: flex;
  justify-content: center;
  color: #3E424D;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* CASE STUDY CARD */
.case-study {
  overflow: hidden;
  border: none;
}

.case-study:hover {
  cursor: pointer;
}

.case-study img {
  opacity: 0.9;
  width: 100%;
  transition: all 0.4s ease;
}

.case-study:hover img {
  opacity: 1;
  transform: scale(1.09);
}

.case-study:hover h5 {
  color: #3E424D;
}

.case-study a, a.logo{
  border:none;
}

.card-disclosure {
  background-color: #1D232F;
  color: #ffffff;
  position: absolute;
  width: 100%;
  height: 40px;
  padding-top: 4px;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  transform: translate(0, 32px);
  transition: all 0.2s ease-in-out;
}

.case-study:hover .card-disclosure {
  transform: translate(0, 0);
  opacity: 1;
}

.case-study:hover .card-body {
  background-color: #FFFFFF;
  transform: translate(0, -32px);
  transition: all 0.2s ease-in-out;
}

.card-body {
  background-color: #F2F5F7;
  z-index: 1;
  transition: all 0.2s ease-in-out;
}

.card-disclosure p {
  color: #fff;
  padding: 0;
}

#carouselHome {
    border-radius: 8px;
  overflow: hidden;
}

#skylab{
  background: rgb(2,49,38);
background: linear-gradient(90deg, rgba(2,49,38,1) 0%, rgba(4,56,62,1) 100%);
}

#berlin-skillz{
  background: rgb(4,2,3);
background: linear-gradient(90deg, rgba(4,2,3,1) 0%, rgba(64,25,7,1) 100%);
}

#bauhaus{
background-color:#EDEEF3;
}

#sony{
  background-color: #000000;
}

#amg{
 background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(244,245,250,1) 10%, rgba(246,247,251,1) 90%, rgba(255,255,255,1) 100%);
}


#mb-mag {
background: rgb(249,7,4);
background: radial-gradient(circle, rgba(249,7,4,1) 0%, rgba(0,0,0,1) 80%);
}

#data-viz {
background: rgb(197,212,219);
background: radial-gradient(circle, rgba(197,212,219,1) 71%, rgba(230,240,245,1) 100%);
}

#smartfest {
  background: rgb(244,244,244);
background: radial-gradient(circle, rgba(244,244,244,1) 56%, rgba(207,207,207,1) 100%);
}

#smartsocial {
  background-color: #F5F4F2;
}

#bclass{
  background: rgb(95,126,138);
background: linear-gradient(90deg, rgba(95,126,138,1) 0%, rgba(18,22,34,1) 100%);
}

#canon{
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 27%, rgba(237,238,243,1) 100%);
}

#antarctica2 {
  background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(92,95,102,1) 46%, rgba(65,65,65,1) 100%);
}

#innovationlab {background: rgb(1,1,1);
background: linear-gradient(0deg, rgba(1,1,1,1) 0%, rgba(34,71,87,1) 39%, rgba(41,63,66,1) 57%, rgba(10,32,43,1) 100%);
}


#billing{
  background-color: #58566E;
}

#tt-designsystem{
  background-color: #394348;
}

#otc{
background-color: #019C89;
}