/*colours
dark green: #002820
secondary background green: #003026
off pink: #b37c63
light green: #98b59b
brownred: #553835

*/

* {
  font-family: 'Noto Serif', serif;
  letter-spacing: 0.05em;
  margin: 0px;
  box-sizing:border-box;
}

html {
  height: 100%;
}

body {
    /* min-height: 100vh; */
    margin: 0px;
    display: flex;
    flex-direction: column;
    background-color: #002820;
    height: 100%;
}

h1 {
  color: #b37c63;
  font-weight: 100;
}

@media (max-width: 1130px) {
.h1-smaller {
  font-size: 1.7em;
}
}

h2 {
  color: #b37c63;
  font-weight: 100;
  padding: 10px 0px;
  font-size: 1.8em;
}

.h2-dark {
  color:#002820;
}

.h2-light {
  color:#98b59b;
}

h3 {
  color:#553835;
  font-weight: 100;
}

.h3-light {
  color:#b37c63;
  font-size: 1.5em;
}

p {
  color: #98b59b;
  line-height: 1.8;
  font-weight: 200;
  font-size: 1.1em;
  padding: 1em 0%;
}

.p-dark {
  color:#002820;
}

a {
  color: #98b59b;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.a-in-p {
  color: #b37c63;
  letter-spacing: 0.07em;
}

.a-in-p:hover {
  color: #976b56;
  text-decoration: underline solid #865f4d;
}


/* bootstrap snippets */
.text-center {
  text-align: center!important;
}

.align-bottom {
  vertical-align: bottom!important;
}

.container-fluid {
  width: 90%;
  /* padding-right:var(--bs-gutter-x,.75rem);
  padding-left:var(--bs-gutter-x,.75rem); */

  /* margin-right:auto;
  margin-left:auto; */
  margin: 0px;
  padding: 0px;
  /* overflow: hidden; */


}

  .row {
    /* --bs-gutter-x:1.5rem;
    --bs-gutter-y:0; */
    display:flex;
    flex-wrap:wrap;
    /* overflow: hidden; */
    /* margin-top:calc(var(--bs-gutter-y) * -1);
    margin-right:calc(var(--bs-gutter-x) * -.5);
    margin-left:calc(var(--bs-gutter-x) * -.5) */
  }



/*  ----------------------------------------- navigation ----------------------------- */

/* bootstrap navbar snippets */
/* .navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding-top:.5rem;padding-bottom:.5rem}  */

.navbar {
  background-color: #002820;
  display: flex;
  width: 100%;
  justify-content: flex-end;
  /* justify-content: space-between; */
  align-items: center;
  padding: 10px 20px;
  font-size: 1.3em;
  /* overflow: hidden; */
}

/* @media screen and (min-width: 768px) {
.navbar {
    margin-right: 20vh;
}
} */

.sticky-navbar {
position: fixed;
display: flex;
  justify-content: flex-end;
  align-items: center;
top: 0;
width: 100%;
z-index: 1000;
padding: 10px 20px;
font-size: 1.3em; 
opacity: 0.95;
margin-right: 0px;
}

@media screen and (min-width: 768px) {
.sticky-navbar {
    padding-right: 10%;
}
}

/* .logo {
padding-right: 100px;
padding-top: 5px;
max-width: 55px;
position: relative;
opacity: 0.5;
}

@media (max-width: 1130px) {
.logo {
    max-width: 10px;
}
} */

.logo {
  position: fixed;
  margin-top: 18px;
  left: 45%;
  z-index: 1001;
  opacity: 0.5;
}

@media (max-width: 1130px) {
  .logo {
      margin-top: 0px;
      padding-top: 5px;
  }
}

.nav-toggle {
  display: none;
  cursor: pointer;
  /* font-size: 20px; */
  /* font-size: 2em; */
  color: #98b59b;
  padding-right: 15px;
}

.nav-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

.nav-item {
  margin-left: 20px;
  margin-right: 30px;
}

.nav-item:first-child {
  margin-left: auto;
}

.nav-item a {
  text-decoration: none;
  color: #98b59b;
  padding: 10px;
  display: block;
}

.nav-item a:hover{
color: #98b59b;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #002820;
  left: 0;
  right: 0;
  width: max-content; 
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {
  color: #98b59b;
  padding: 10px;
  display: block;
  font-size: 0.8em;
  width: 100%; 
  box-sizing: border-box; 
}

.dropdown-content a:hover {
  color: #b37c63;
  background-color:#002820
}

/* Style for dropdown items */
.dropdown-item {
  background-color: #002820; 
  padding-left: 20px; 
}

#active {
  color:#b37c63;
}

/* Media query for small screens */
@media screen and (max-width: 1130px) {
  .navbar {
      /* flex-direction: column; */
      align-items: flex-end;
      position: fixed;
  }

  .nav-toggle {
      display: block;
      position: sticky;
  }
  
  .nav-list {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 45px;
      right: 20px;
      background-color: #002820;
      text-align: center;
  }

  .nav-list.active {
      display: flex;
  }

  .nav-item {
      margin: 0;
      padding: 10px 10px;
  }

  .toggle-icon {
      display: block;
      margin: 0 auto;
  }

  .dropdown-content {
      position: static;
      display: none;
      margin-top: 10px;
  }

  .dropdown:hover .dropdown-content {
      display: block;
  }
}


.underline-on-hover {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
  color: #98b59b; 
  text-decoration: none; 
}

.underline-on-hover::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; 
  height: 2px; 
  background-color: #98b59b;
  transition: width 0.3s ease-in-out; 
}

.underline-on-hover:hover::before {
  width: 100%; 
}




/*  --------------- buttons --------------------- */

.btn-standard {
  text-decoration: none;
  text-align: center;
  border-radius: 15px;
  padding: 15px;
  margin: 7% 0%;
  display: inline-block;
  font-size: 1.2em;
}

@media (max-width: 1130px) {
  .btn-standard {
    margin: 12% 0%;
    padding: 10px;
  }
}

.btn-index {
  background-color: #553835;
}

.btn-index:hover {
  background-color: #422c2a;
}


.btn-about {
  background-color: #b37c63;
  color:#002820;
}

.btn-about:hover {
  color:#b37c63;
  background-color: #553835;
}

.btn-back-to {
  background-color: #b37c63;
  color:#002820;
  margin: 10% 0%;
}

.btn-back-to:hover {
  color:#b37c63;
  background-color: #553835;
}

@media (max-width: 1000px) {
  .btn-back-to {
    margin: 30% 0%;
  }
}




/*  ----------------------------------------- intro page ----------------------------- */



.intro-bigger-h1 {
  color: #98b59b;
  font-size: 3.5em;
  padding-bottom: 0.4em;
}

.intro-h2 {
  font-size: 1.7em;
}

.intro-photoframe {
  border-radius: 25px;
  overflow:hidden;
}

/* ---small screens--- */
@media (max-width: 1130px) {
  .intro-bigger-h1 {
    font-size: 2.2em;
  }
  .intro-flex {
    display: flex;
    flex-direction: column;
    padding: 3%;
    margin-top: 25vh;
    justify-content: center;
  }
  
  .intro-name {
    padding: 2%;
    text-align: center;
  }
  
  .intro-portrait-container {
    padding: 10% 0% 5% 0%;
    max-width: 650px;
    height: 100%;
  }
  

  #fill-block1 {
    background-color: #b37c63;
    border-radius: 15px;
    width: 120px;
    height: 115px;
    position: absolute;
    top: 53%;
    right: 16%;
    z-index: 460;
  
    transform: scale(0.8); 
    animation: scalePink 1s ease 1s forwards;
  }
  
  @keyframes scalePink {
    to {
      transform: scale(1); 
    }
  }
  
  #fill-block2 {
    background-color: #98b59b;
    border-radius: 15px;
    width: 90px;
    height: 110px;
    position: absolute;
    top: 62%;
    right: 68%;
    z-index: 440;
  
    transform: scale(0.8); 
    animation: scaleGreen 0.8s ease 0.5s forwards;
  }
  
  @keyframes scaleGreen {
    to {
      transform: scale(1); 
    }
  }
  
  #fill-block3 {
    background-color: #b37c63;
    border-radius: 15px;
    width: 100px;
    height: 130px;
    position: absolute;
    top: 75%;
    right: 60%;
    z-index: 440;
  
    transform: scale(0.8); 
    animation: scalePink 1s ease 1s forwards;
  }
  
  @keyframes scalePink {
    to {
      transform: scale(1); 
    }
  }
  
  #fill-block4 {
    border-radius: 15px;
    width: 135px;
    height: 95px;
    position: absolute;
    top: 66%;
    right: 8%;
    z-index: 420;
    background-image: url('images/logo-pattern.svg'); /* Specify the path to your image */
    background-size: cover; /* This property ensures that the background image covers the entire div */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
  
    transform: scale(0.8); 
    animation: scalePattern 0.8s ease 0.3s forwards;
  }
  
  @keyframes scalePattern {
    to {
      transform: scale(1); 
    }
  }
  
  .intro-photoframe {
    max-width: 220px;
    height: auto;
    z-index: 500;
    position: absolute;
    top: 50%;
    right: 22%;
  }

  .intro-spacer {
    padding-top: 15vh;
    padding-bottom: 15vh;
  }
}



/*  ----- big screens ---- */
@media (min-width: 1130px) {
.intro-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  margin-top: 10vh;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 0;
  text-align:center;
}

.intro-name {
  padding-top: 20vh;
  flex-grow: 1;
  /* padding-left: 100px; */
}

.intro-portrait-container {
  flex-grow:3;
  padding: 5%;
  max-width: 650px;
}



#fill-block1 {
  background-color: #b37c63;
  border-radius: 25px;
  width: 220px;
  height: 220px;
  position: absolute;
  top: 18%;
  right: 11%;
  z-index: 460;

  transform: scale(0.8); 
  animation: scalePink 1s ease 1s forwards;
}

@keyframes scalePink {
  to {
    transform: scale(1); 
  }
}

#fill-block2 {
  background-color: #98b59b;
  border-radius: 25px;
  width: 220px;
  height: 200px;
  position: absolute;
  top: 24%;
  right: 22%;
  z-index: 440;

  transform: scale(0.8); 
  animation: scaleGreen 0.8s ease 0.5s forwards;
}

@keyframes scaleGreen {
  to {
    transform: scale(1); 
  }
}

#fill-block3 {
  background-color: #b37c63;
  border-radius: 25px;
  width: 310px;
  height: 285px;
  position: absolute;
  top: 72%;
  right: 23%;
  z-index: 440;

  transform: scale(0.8); 
  animation: scalePink 1s ease 1s forwards;
}

@keyframes scalePink {
  to {
    transform: scale(1); 
  }
}

#fill-block4 {
  border-radius: 25px;
  width: 295px;
  height: 240px;
  position: absolute;
  top: 94%;
  right: 9%;
  z-index: 420;
  background-image: url('images/logo-pattern.svg'); /* Specify the path to your image */
  background-size: cover; /* This property ensures that the background image covers the entire div */
  background-repeat: no-repeat; /* Prevent the background image from repeating */

  transform: scale(0.8); 
  animation: scalePattern 0.8s ease 0.3s forwards;
}

@keyframes scalePattern {
  to {
    transform: scale(1); 
  }
}

.intro-photoframe {
  max-width: 280px;
  height: auto;
  z-index: 500;
  position: absolute;
  top: 35%;
  right: 14%;
}

.intro-spacer {
  padding-top: 10vh;
}

}





#intro-portrait-scaleup {
  transform: scale(0.8); 
  animation: scaleUpPhoto 1.5s ease 1.5s forwards;
}

@keyframes scaleUpPhoto {
  to {
    transform: scale(1); 
  }
}





/*  ---------- more info blocks ------------- */

.text-field {
background-color:#98b59b;
border-radius: 25px;
border-style: none;
padding: 5%;
margin: 18% 5% 5% 5%;
}

@media (min-width: 768px) {
.text-field {
  margin: 5% 24%;
  padding: 3%;
}
}

.text-field > p {
color:#002820; 
}


.show-square {
opacity: 0;
transform: translate(0, 5vh);
transition: opacity 1.5s, transform 1s ease;
}

.show-square.visible {
opacity: 1;
transform: translate(0, 0);
}


/*  ------------------- portfolio showcases on home page ------------- */

.skill-container {
  display: flex;
  flex-direction: row;
  padding: 5% 15% 10% 10%;
  justify-content: space-between;
 }

.skill {
  width: 25%;
  margin: 20px;
  padding: 2%;
  background-color: #98b59b;
  border-radius: 25px;
  border: none;
}

.skill-img-c {
  padding: 5% 20%;
}

 @media (max-width: 800px) {
 .skill-container {
   flex-direction:column;
   padding: 5%;
   align-content: center;
   align-items: center;
 }
 .skill {
  width: 60%;
  margin: 10%;
 }
 .skill-img-c {
  padding: 10% 15%;
 }
 .skill-header {
  font-size: 0.9em;
  margin-bottom: 15px;
 }
}

.skill:hover #img-scale1 {
  transform: scale(1.1);
  transition: 0.3s ease-in-out;
}

.skill:hover #img-scale2 {
  transform: scale(1.1);
  transition: 0.3s ease-in-out;
}

.skill:hover #img-scale3 {
  transform: scale(1.1);
  transition: 0.3s ease-in-out;
}

@media (min-width: 1130px) {
#show-square2 {
  transition-delay: 0.2s;
}

#show-square3 {
  transition-delay: 0.4s;
}
}




/*  ------------------- portfolio overview page ------------------ */


.pf-body {
  padding: 5%;
}

@media (min-width: 1130px) {
.pf-body {
  padding: 0px 25%;
}
}

.pf-intro {
padding: 100px 5% 60px 5%;
}

@media (min-width: 1130px) {
  .pf-intro {
    padding: 200px 0px 100px 0px;
  }
  }

.pf-item {
/* padding: 25px 25px; */
margin: 15px 25px 60px 25px;
border-radius: 40px;
box-shadow: 10px 10px 8px #00130f;
}

@media (min-width: 1130px) {
  .pf-item {
    /* padding: 70px 100px; */
    margin: 25px 100px 100px 100px;
  }
  }

  .title-bar {
    background-color:#002820;
    opacity: 0.7;
    margin: 0px;
    padding: 2% 5%;
  }

  /* pf backgrounds */

  /* relined */
  .pf-item-white {
    background-image: linear-gradient(#f1eedc, #9b998c);
    /* background-color: #e0ddcc;
    transition: background-color 0.4s; */
  }

  .pf-item-white:hover {
    /* background-color: #c4c1b3; */
    transform: scale(1.05);
    transition: 0.4s ease-in-out;
  }

  /* Design Culture Now */
  .pf-item-red {
    background-image: linear-gradient(#8194a7, #5f6d7a);
    /* background-color: #8194a7; */
  }

  .pf-item-red:hover {
    /* background-color: #6a7988; */
    transform: scale(1.05);
    transition: 0.4s ease-in-out;
  }

  /* FPT */
  .pf-item-green1 {
    background-image: linear-gradient(#0c4439, #0a382f);
    /* background-color: #0c4439; */
}

.pf-item-green1:hover {
  /* background-color: #093129; */
  transform: scale(1.05);
  transition: 0.4s ease-in-out;
}

/* lægehus */
  .pf-item-green2 {
    background-image: linear-gradient(#978f87, #6b6660);
    /* background-color: #978f87; */
  }

  .pf-item-green2:hover {
    /* background-color: #79726c; */
    transform: scale(1.05);
    transition: 0.4s ease-in-out;
  }

  /* analogue art */
  .pf-item-pink {
    background-image: linear-gradient(#e0a488, #b37c63);
  }

  .pf-item-pink:hover {
    transform: scale(1.05);
    transition: 0.4s ease-in-out;
  }

  /* images */

  .pf-main-img {
    width: 250px;
    max-width: fit-content;
  }

  .pf-main-img-container {
    padding: 10% 15% 10% 15%;
  }

  @media (max-width: 1130px) {
  .pf-main-img-container {
    padding: 10% 5% 15% 5%;
  }
  }


 .pf-main-img-b {
    width: 250px;
    max-width: fit-content;
}

.pf-main-img-container-b {
  padding: 10% 0%;
}

@media (max-width: 1130px) {
  .pf-main-img-container-b {
    padding: 20% 10% 17% 10%;
  }
  }



  /* --------------- portfolio project pages ------------ */

  .pf-project-body-txt {
    padding: 10px 30px 5px 30px;
  }

  
  @media (min-width: 1130px) {
    .pf-project-body-txt {
      padding: 50px 25% 0px 25%;
    }
    }
  
  .spacer-75 {
    height: 100px;
  }

  @media (min-width: 1130px) {
    .spacer-75 {
      height: 150px;
    }
  }



    @media (max-width: 1000px) {
      .h2-light {
        font-size: 1.4em;
        line-height: 1.4;
      }
    }

    .p-list {
      color:#98b59b;
      line-height: 1.8;
      font-weight: 200;
      font-size: 1.1em;
      }

    /*  --- backgrounds general ----- */

    .project-bg {
      margin: 3% 0% 0% 0%;
      padding: 5%;
      background-color: #dfdac7;
    }

    .pf-item-bg-light {
      background-color: #dfdac7;
      padding: 5%;
      margin: 5%;
    }

    .pf-item-bg-dark {
      filter: drop-shadow(20px 8px 8px #001813);
      padding: 2%;
      margin: 2%;
    }

    @media (max-width: 1130px) {
      .project-bg {
        padding: 15% 5%;
      }

      .pf-item-bg-light {
        background-color: #dfdac7;
        padding: 15% 5%;
        margin: 0px;
      }
  
      /* .pf-item-bg-dark {
        background-color: #003026;
        padding: 15% 5%;
        margin: 0px;
      } */
    }

    .project-bg-dark {
      background-color: #002820;
    }

    /*  opening image */

    @media (min-width: 1130px) {
      .pf-project-img {
        width: 50%;
      }
    }

    .pf-project-img:hover {
transform: scale(1.05);
transition: transform 0.2s ease-in-out;
    }

    /* relined */
   .pf-project-mockup{
    margin-top: 10%;
   }

    @media (min-width: 1130px) {
    .pf-project-mockup {
      width: 35%;
    }
  }
    
    @keyframes pfScaleUp {
      to {
        transform: scale(1); 
      }
    }
  

    /* design culture now */
    .pf-project-img-dcn {
      width: 90%;
      padding: 10% 0%;
    }

    @media (min-width: 1130px) {
      .pf-project-img-dcn {
        width: 30%;
        padding: 3% 0%;
      }
    }


/*  project page Lægehuset */

  
  .pf-shadow {
    box-shadow: 5px 5px 3px #d4d2c7;
  }

  @media (min-width: 1130px) {
  .pf-project-container-add {
    display: flex;
    justify-content: space-between;
  }
}

 .pf-project-img-add {
  margin: 10px;
 }


  @media (min-width: 1130px) {
    .pf-project-img-add {
      width: 40%;
      margin: 15px;
    }
  }

  @media (min-width: 1130px) {
  .pf-project-img-narrow {
    width: 18%;
    }
  }

  .pf-project-img-narrow {
    margin: 15px;
  }
  
/*  project page FPT */


  .pf-img-smaller-container {
    padding: 3%;
  }

  @media (min-width: 1130px) {
    .pf-img-smaller-container {
      display: flex;
      justify-content: center;
      }
    }

  .pf-img-smaller {
      width: 70%;
      padding: 10px;
    }
    
    @media (min-width: 1130px) {
        .pf-img-smaller {
          width: 30%;
          }
        }    

.pf-img-smaller-4 {
  width: 45%;
  padding: 10px;
}

  @media (min-width: 1130px) {
    .pf-img-smaller-4 {
      width: 20%;
      }
    }


/* project page analogue art */

/* @media (min-width: 1130px) {
.art-container {
  max-height: 30%;
  width: 80%;
  justify-content: space-between;
}
} */



.art-img {
  margin: 20px 0px;
}

@media (min-width: 800px) {
.art-container {
  display:flex;
  width: 100%;
  padding: 0% 15%;
  /* margin: 20px 0px; */
}

.ac-1 {
  margin: 60px 0px 25px 0px;
}

.art-img-a {
  flex: calc(800/543);
  margin: 10px;
}

.art-img-b {
  flex: calc(900/1109);
  margin: 10px;
}

.art-img-c {
  flex: calc(900/612);
  margin: 10px;
}

.art-img-d {
  flex: calc(669/900);
  margin: 10px;
}

.art-img-e {
  flex: calc(841/628);
  margin: 10px;
}

.art-img-f {
  flex: calc(572/808);
  margin: 10px;
}

.art-img-g {
  flex: calc(900/1298);
  margin: 10px;
}
}




.art-img-1 {
margin: 20px 0px;
}

@media (min-width: 1130px) {
  .art-img-1 {
    max-height: 25vh;
    margin: 20px 5px;
    }
  }

@media (min-width: 1395px) {
    .art-img-1 {
      max-height: 35vh;
      margin: 20px 5px;
      }
    }


.art-img-2 {
  margin: 20px 0px;
  }
  
  @media (min-width: 1130px) {
    .art-img-2 {
      max-height: 28vh;
      margin: 20px 5px;
      }
    } 

  @media (min-width: 1395px) {
    .art-img-2 {
      max-height: 38vh;
      margin: 20px 5px;
      }
    } 



/*  ------------------- about me --------------- */

/* small screen base */
.about-me {
  margin: 30% 5% 5% 5%;
}

.about-img-container {
  text-align: center;
}

/* big screen base */
@media (min-width: 1130px) {
 .about-me {
   padding: 0px;
   margin: 15% 25% 5% 25%;
}
}

@media (min-width: 1130px) {
.about-img-container {
  padding: 0% 10%;
  text-align: center;
}
}

.about-img {
  border-radius: 25px;
  margin: 10% 0% 10% 0%;
  
}



/* -------------------- contact page ----------- */

.contact-body {
  flex-grow: 1;
}

.contact-text {
  padding: 13% 5% 5% 5%;
}

@media (min-width: 768px) {
.contact-text {
  padding: 10% 25%;
}
}

/*  -----------------   footer ----------------- */

footer {
background-color:#b37c63;
padding: 40px 10px;
margin: 0px;
display: flex;
flex-wrap: wrap;
width: 100%;
}

@media (max-width: 1130px) {
  footer {
    text-align: center;
  }
}

.footertext {
color:#002820;
}

.f-column-text {
 width:100%;
}

.f-column-icon {
  width: 100%;
}

@media (min-width: 1130px) {
  .f-column-text {
    width: 66.66666667%;
    margin-left:16.66666667%;
    }
  .f-column-icon {
    width:16.66666667%;
  }
  }

.sub-footer {
  background-color: #553835;
  margin: 0px;
}

.sub-footer > p {
  font-size: 0.9em;
  color:#b37c63;
  margin-bottom: 0rem;
  padding: 0px;
}





/* new intro */

#big-h1 {
  color: #98b59b;
  font-size: 2.7em;
  padding-bottom: 0.4em;
}

@media (max-width: 1130px) {
  #big-h1 {
    font-size: 2.2em;
  }
  .intro-flex {
    display: flex;
    flex-direction: column;
    /* justify-content: space-around;
    align-items: flex-start; */
    padding: 3%;
    margin-top: 25vh;
    justify-content: center;
  }
  
  .intro-name {
    padding: 2%;
    text-align: center;
  }
  
  .intro-portrait-container {
    max-width: 650px;
    height: 100%;
  }
  }


@media (min-width: 1130px) {
.intro-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  margin-top: 10vh;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 0;
}

.intro-name {
  padding-top: 20vh;
  flex-grow: 1;
  /* padding-left: 100px; */
}

.intro-portrait-container {
  flex-grow:3;
  max-width: 650px;
}
}