* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

:root {
    --rood: #4C0004;
    --beige: #efe7da;
    --lysblaa: #c1dbe8;
    --sort: #000;
    --hvid: #fff;
    --groon: #acb090;
}

#forside {
    height: 100vh;
    background: linear-gradient(
        to right,
        var(--groon) 75%,
        var(--hvid) 25%
    );
    position: relative;
}

#billedeafmig {
      position: absolute;

    top: 50%;
    left: 75%;

    transform: translate(-50%, -50%);

    width: 30vw;
    max-width: 420px;
    min-width: 180px;

    height: auto;

}



.overskrift {
    color: var(--sort);
  font-family: "Bebas Neue", cursive;
  font-weight: 400;
  font-size: 4rem;
  font-style: normal;
  padding-top: 1%;
  padding-left: 10%;

}

.fadeleftover {
  opacity: 0;
  transform: translateX(-30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.fadeleftover.show {
  opacity: 1;
  transform: translateX(0);
}

.tekst {
    color: var(--sort);
  font-family: "Poppins", cursive;
  font-weight: 400;
  font-size: 1rem;
  font-style: normal;
  padding-left: 10%;
  padding-top: 1%;
  max-width: 600px;

}


#projekterknap {
    background-color: var(--rood);
    color: var(--hvid);
    font-family: "Poppins", cursive;
    font-size: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 10%;
    margin-top: 1%;
    text-decoration: none;

    display: inline-block;
    transition: 0.3s ease;


}

#projekterknap:hover {
    
transform: translateY(-5px);
}


#scroll {
    font-family: "Poppins", cursive;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -50%);
    width: clamp(30px, 5vw, 40px);
    animation: floatt 3s ease-in-out infinite;
}

@keyframes floatt {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }

    100% {
        transform: translateY(0);
    }
}

.marquee {
     overflow: hidden;
    width: 100%;

    width: 100%;
    font-family: poppins;
    padding-top: 2%;

}

.marquee-track {
    display: flex;
    width: max-content;

    animation: scroll 15s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


.underoverskrift {
    color: var(--sort);
  font-family: "Bebas Neue", cursive;
  font-weight: 400;
  font-size: 2.5rem;
  font-style: normal;
  padding-top: 5%;
  padding-left: 10%;
}

#cvknap {
    background-color: var(--rood);
    color: var(--hvid);
    font-family: "Poppins", cursive;
    font-size: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 10%;
    margin-top: 5%;
    text-decoration: none;

    display: inline-block;
    transition: 0.3s ease;


}

#cvknap:hover {
    
transform: translateY(-5px);
}



#ommigtekst {
    color: var(--sort);
  font-family: "Poppins", cursive;
  font-weight: 400;
  font-size: 1rem;
  font-style: normal;
  padding-left: 10%;
  padding-top: 1%;
 

}

.about-section {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: clamp(2rem, 5vw, 6rem);
}

/* VENSTRE TEKST */
#ommig {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 5%;
}

/* HØJRE BILLEDE */
.polaroid-container {
    flex: 1 1 0;

    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10%;
}

/* POLAROID */
.polaroid {
    background: white;

    padding: 1rem 1rem 2rem 1rem;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);

    width: clamp(200px, 20vw, 300px);
}

.polaroid img {
    width: 100%;
    display: block;
}

.float {
    animation: float 5s ease-in-out infinite;
}

@keyframes float {

    0% {
        transform: rotate(5deg) translateY(0);
    }

    50% {
        transform: rotate(5deg) translateY(-20px);
    }

    100% {
        transform: rotate(5deg) translateY(0);
    }
}

.værktøjstyle {
    display: flex;
    align-items: center;
    padding-left: 10%;
    padding-top: 1%;
}
.værktøj {
   width: 50px;
    height: auto;
    margin-right: 10px;
    display: inline-block;
}

.fade-up {
  opacity: 0;
  transform: translateY(-30px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

#citatstyle {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-left: 10%;
    padding-right: 10%;
    padding-top: 1%;
    padding-bottom: 5%;
    
}

.citat {
    font-family: "Poppins", cursive;
    font-size: 1rem;
    padding: 2%;
    margin: 2%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    background-color: var(--hvid);
}

.pro {
    position: relative;
}

.storstjerne {
  position: absolute;
  bottom: 3%;
  left: 90%;
  width: 80px;
 
    animation: sparkle 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
   
}

@keyframes sparkle {
  0% {
    transform: rotate(0deg) ;
  }

  25% {
    transform: rotate(5deg) ;
  }

  50% {
    transform: rotate(-5deg) ;
  }

  75% {
    transform: rotate(2deg) ;
  }

  100% {
    transform: rotate(0deg) ;
  }
}

.lillestjerne {
  position: absolute;
  bottom: 50%;
  left: 7%;
  width: 40px;
 
    animation: sparklee 2s cubic-bezier(0.22, 1, 0.36, 1) infinite;
   
}

@keyframes sparklee {
  0% {
    transform: rotate(0deg) ;
  }

  25% {
    transform: rotate(6deg) ;
  }

  50% {
    transform: rotate(-6deg) ;
  }

  75% {
    transform: rotate(1deg) ;
  }

  100% {
    transform: rotate(0deg) ;
  }
}

#projekter {
    background-color: var(--groon);
    
}

#projektstyle {
    
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 1%;
    padding-top: 1%;
    
}

.projekterne {
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
    align-items: center;
   padding: 2%;
     margin: 2%;
    background-color: var(--hvid);
   
  
}

.tekstoknap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
}

.projektbilleder {
    width: auto;
    height: 250px;
    margin-right: 10px;
}

.tekstprojekt {
    font-family: "Poppins", cursive;
    font-size: 1rem;
    padding: 2%;
    margin: 2%;
    text-wrap: nowrap;
   
}

.lmere {
    background-color: var(--rood);
    color: var(--hvid);
    font-family: "Poppins", cursive;
    font-size: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
 margin: 2%;
    

    display: inline-block;
    transition: 0.3s ease;
}

.lmere:hover {
    
transform: translateY(-5px);
}

#billedeafmigto {
   padding-top: 5%;
   padding-right: 10%;
   padding-bottom: 6%;
    width: 35vw;
   float: right;
    height: auto;
}

#kontakt {
    position: relative;
}



@media (max-width: 768px) {

    /* GENERELT */
    .overskrift {
        font-size: 3rem;
        padding-left: 5%;
        padding-right: 5%;
    }

    .tekst,
    #ommigtekst {
        padding-left: 5%;
        padding-right: 5%;
        font-size: 0.95rem;
    }

    .underoverskrift {
        padding-left: 5%;
        padding-right: 5%;
        font-size: 2rem;
    }

    /* HERO */
    #forside {

        background: linear-gradient(
            to bottom,
            var(--groon) 70%,
            var(--hvid) 30%
        );

        overflow: hidden;
    }

    #billedeafmig {

        position: absolute;

        left: 50%;
        top: 75%;

        width: 60vw;

        transform: translate(-50%, -50%);
    }

    #scroll {
        display: none;
    }

    /* KNAPPER */
    #projekterknap,
    #cvknap {

        margin-left: 5%;
    }

    /* ABOUT */
    .about-section {

        flex-direction: column;

        padding-top: 3rem;
    }

    .polaroid-container {

        width: 100%;

        padding-top: 0;

        margin-bottom: 3rem;
    }

    .polaroid {
        width: 70vw;
    }

    /* IKONER */
    .værktøjstyle {

        flex-wrap: wrap;

        justify-content: center;

        padding-left: 5%;
        padding-right: 5%;

        gap: 1rem;
    }

    .værktøj {
        width: 40px;
        margin-right: 0;
    }

    /* CITATER */
    #citatstyle {

        flex-direction: column;
    }

    .citat {

        margin: 1rem 5%;
    }

    /* PROJEKTER */
    .projekterne {

        flex-direction: column;

        align-items: flex-start;
    }

    .projektbilleder {

        width: 100%;

        height: auto;

        margin-bottom: 1rem;
    }

    .tekstprojekt {

        text-wrap: wrap;

        margin: 0;
        padding: 0;
    }

    /* KONTAKT */
    #billedeafmigto {

        float: none;

        display: block;

        width: 70vw;

        margin: auto;

        padding-right: 0;
    }

    /* STJERNER */
    .storstjerne,
    .lillestjerne {

        display: none;
    }
}




@media (min-width: 1600px) {

    body {

        max-width: 1700px;

        margin: auto;
    }

    .overskrift {
        font-size: 5rem;
    }

    .tekst,
    #ommigtekst,
    .tekstprojekt {

        font-size: 1.1rem;
    }

    .projektbilleder {

        height: 320px;
    }

    .polaroid {

        width: 350px;
    }

    .værktøj {
        width: 60px;
    }

    .polaroid-container {
   
    padding-top: 6%;
}
}