:root{
    --bg_col: rgb(240, 240, 240);
    --highlight_col: rgb(0, 0, 0);
    --text_col: rgb(20, 20, 20);
   }

/* html elements -------------------------------------------------------------------------------- */

header{
  background: black;
  width: 100%;
  height: 70vh; /* flexible height */
  position: relative; /* needed for absolute centering */
  overflow: hidden;
    } /* UPDATE COLOR VAR*/


body{
    background-color: var(--bg_col);
}

img{
    margin: 0 0;
    display: block;
    width: 100%;}

p, ul{
    margin: 0 0;
    list-style-type: none;
}

nav a {
    /* background-color: var(--Felix); /* UPDATE COLOR VAR*/ */
    color: var(--text_col);
}

figcaption{
  max-width: 740px;
}

.svg-header{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.svg-header img{
  width: clamp(200px, 70vw, 1200px); /* responsive, not oversized */
  height: auto;
}


/* styling -------------------------------------------------------------------------------- */



section .text{
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding-bottom: 60px;
}

.top-row{
    position: fixed;
    /* background-color: var(--Felix); /* UPDATE COLOR VAR*/ */
    color: #fff;
    mix-blend-mode: difference;
}


.top-row *{
  color: #fff;
  mix-blend-mode: difference;
}

.text {
    padding-top: 72px;
}

.text h1{
    font-family: "System";
    position: sticky;
    top: 48px;
    z-index: 90;
    /* background-color: black;
    color: var(--Felix); /* UPDATE COLOR VAR*/ */
    height: fit-content;
    width: fit-content;
    border-radius: 50px;
    color: grey;
}

.text div{
    grid-column: -11 / -2;
    box-sizing: border-box;
}

/* text column one */
.text p{ grid-column: -11 / span 5;}

/* socials & links */
.text ul{ grid-column: 9 / span 2;}

/* images -------------------------------------------------------------------------------- */

.text img{grid-column: 1 / span 12 ;}

.double-image{
 grid-column: 1 / -1;
 display: flex;
 flex-direction: row;
}

.double-image img{
    width: 50%;
}

.image-container{
    margin-top: 72px;
    margin-bottom: 36px;
}


/* break points -------------------------------------------------------------------------------- */

@media only screen and (max-width: 1200px) {

  .svg-header img{
    width: clamp(200px, 120vw, 1200px); /* responsive, not oversized */
    height: auto;
  }

nav{
  padding-left: 0px;
  margin-left: 10px;

  width: 120px;
}


.text {
    padding-top: 0;
}

.double-image{ flex-direction: column;}
.double-image img{ width: 100%;}

.text h1{
  width: 92%;
  border-top: 1px solid lightgrey;
  padding-top: 30px;
  position: relative;
  border-radius: 0px;

    grid-row: 1 / span 1;
    grid-column: 1 / -1;
    top: 0px;
    /* position: relative; */
    /* top: 48px; */
}
/* socials on right */
.text ul{
    grid-row: 3 / span 1;
    grid-column: 1 / -1;
}
.top-row{
  position: absolute;
}

/* text column one */
.text p {
    grid-row: 2 / span 1;
    grid-column: 1/ -1;
}

.text>p+p {
    grid-row: 4 / span 1;
    grid-column: 1/ -1;
}

.text>.images {
    grid-row: 5 / span 1;
    grid-column: 1/ -1;
}

.text div{
  /* padding-left: 10px;
  padding-right: 10px; */
  grid-column: 1 / -1;
}

}
