*{
    margin: 0;
}

/*VIDEO*/

video{
    position: relative;
    display: inline-block;
    z-index: 2;
}

/*WRAPPER*/

.wrapper{
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    height: 100vh;
}

/*SNAP EFFEKT*/

.snap{
    scroll-snap-align: start;

}

/*HERO SEKTION FORSIDE*/

.hero{
    background: rgb(249,232,226);
    background: linear-gradient(90deg, rgba(249,232,226,1) 0%, rgba(194,183,245,1) 100%);    
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;

}

/*INTRO VIDEO*/

.intro-video{
    height: 100%;
    width: 100%;
    z-index: 1;
    display: flex;
    object-fit:cover;
    
}

/*TITLE PÅ FORSIDE*/

.title{
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 0;
    margin-right: 40px;
    margin-bottom: 10px;
    color: white;
    font-size: 100px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-shadow: 5px 5px 0px rgb(0, 0, 0);
}

/*INTRO CONTAINER*/

.intro{
    background: rgb(249,232,226);
    background: linear-gradient(90deg, rgba(249,232,226,1) 0%, rgba(194,183,245,1) 100%); 
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;

}

/*RAMME OG FARVEVIFTE*/

.border{
    z-index: 2;
    height: 85%;
    width: 100%;
    border: 5px;
    margin-right: 50px;
    margin-left: 50px;
    border-style: solid;
    border-color: black;
    position: relative;
    display: flex;
}

.square-left-top{
    z-index: 3;

    top: 0;
    left: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-left: -17.5px;
    margin-top: -17.5px;

}

.square-right-top{
    z-index: 3;
    top: 0;
    right: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-right: -17.5px;
    margin-top: -17.5px;

}

.square-left-bottom{
    z-index: 3;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-left: -17.5px;
    margin-bottom: -17.5px;

}

.square-right-bottom{
    z-index: 3;
    bottom: 0;
    right: 0;
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: white;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-right: -17.5px;
    margin-bottom: -17.5px;

}

.black{
    z-index: 3;
    top: 0;
    left: 0;
    position: absolute;
    width: 20px;
    height: 15px;
    background-color: black;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-top: 30px;
    margin-left: 30px;

}

.green{
    z-index: 3;
    top: 0;
    left: 0;
    position: absolute;
    width: 20px;
    height: 15px;
    background-color: #c2fa4e;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-top: 30px;
    margin-left: 55px;

}

.purple{
    z-index: 3;
    top: 0;
    left: 0;
    position: absolute;
    width: 20px;
    height: 15px;
    background-color: #9d8ef7;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-top: 30px;
    margin-left: 80px;

}

.white{
    z-index: 3;
    top: 0;
    left: 0;
    position: absolute;
    width: 20px;
    height: 15px;
    background-color: white;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-top: 30px;
    margin-left: 105px;

}

.red{
    z-index: 3;
    top: 0;
    left: 0;
    position: absolute;
    width: 20px;
    height: 15px;
    background-color: #eb7878;
    border: 5px;
    border-style: solid;
    border-color: black;
    margin-top: 30px;
    margin-left: 130px;

}

/*LILLA CONTAINER*/

.container{
    background-color: #9d8ef7;
    width: 900px;
    height: 400px;
    margin: auto;
    box-shadow: 20px 20px 0px rgb(0, 0, 0);
    display: flex;
    position: relative;
    margin-top: 40px;


}

/*OVERSKRIFTER*/

.overskrift{
    height: 100%;
    width: 100px;
    display: flex;
    align-items: center;  
}

.overskrift h2{
    z-index: 3;
    margin-left: -50px;
    color: white;
    font-size: 70px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    transform: rotate(-90deg);
    text-shadow: -5px 5px 0px rgb(0, 0, 0);
    left: 0;
    position: absolute;

}

/*MØD CAMILLA*/

.meetcamilla{
    background: rgb(249,232,226);
    background: linear-gradient(90deg, rgba(249,232,226,1) 0%, rgba(194,183,245,1) 100%); 
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;

}

.citat{
    width: 400px;
    height: 100px;
    margin-left: 150px;
    margin-top: 60px;
    position: relative;
}

.citat p{
    color: white;
    font-size: 24px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    z-index: 4;

}

.meet-camilla-video{
    width: 600px;
    height: 300px;
    position: absolute;
    object-fit:cover;
    right: 0;
    bottom: 0;
    margin-bottom: -130px;
    margin-right: 120px;

}

.video-shadow{
    width: 600px;
    height: 300px;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: -130px;
    margin-right: 120px;
    box-shadow: 20px 20px 0px rgb(0, 0, 0);
    z-index: -1;

}

/*CITATIONSTEGN*/

.qoute-start{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -40px;
    margin-left: -40px;
}

.qoute-start img{
    width: 100%;

}

.qoute-end{
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-bottom: -40px;
    margin-right: -40px;
}

.qoute-end img{
    width: 100%;

}



.studie-wrapper{
    background: rgb(249,232,226);
    background: linear-gradient(90deg, rgba(249,232,226,1) 0%, rgba(194,183,245,1) 100%);
    height: 100vh;
    width: 100vw;
    overflow-x: scroll;
    overflow-y: hidden;

}

.studie{
    background: rgb(249,232,226);
    background: linear-gradient(90deg, rgba(249,232,226,1) 0%, rgba(194,183,245,1) 100%);
    height: 100vh;
    width: 7300px;
    display: flex;
    align-items: center;
}

.uddannelse-one{
    width: 1000px;
    height: 100%;
    display: flex;
    position: relative;
}

.studie-overskrift{
    height: 100%;
    width: 100px;
    display: flex;
    align-items: center;  
}

.erfaring-overskrift{
    height: 100%;
    width: 100px;
    display: flex;
    align-items: center;  
}

.studie-overskrift h2{
    margin-left: -150px;
    color: #9d8ef7;
    font-size: 100px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    transform: rotate(-90deg);
    text-shadow: -5px 5px 0px rgb(0, 0, 0);
    left: 0;
    position: absolute;

}

.erfaring-overskrift h2{
    margin-left: -90px;
    color: #9d8ef7;
    font-size: 100px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    transform: rotate(-90deg);
    text-shadow: -5px 5px 0px rgb(0, 0, 0);
    left: 0;
    position: absolute;

}

.camilla-studie img{
    width: 800px;
    position: absolute;
    bottom: 0;
    left: 0;

}

.camilla-erfaring img{
    width: 700px;
    margin-left: 100px;
    position: absolute;
    bottom: 0;
    left: 0;

}


/*TIMELINE*/

.timeline-wrapper{
    width: 1200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

}

.uddannelse-timeline{
    display: flex;
    flex-direction: row;
}

.timeline-top{
    height: 33%;
    position: relative;

}

.timeline-middel{
    background-color: #9d8ef7;
    display: flex;
    align-items:end;
    height: 33%;
    box-shadow: 20px 20px 0px rgb(0, 0, 0);
}

.timeline-bottom{
    height: 33%;
    position: relative;
    
}

/*TIMELINE ELEMENTER*/

.citat-top{
    width: 400px;
    height: 100px;
    margin-left: 500px;
    margin-top: 60px;
    position: relative;
}

.citat-top p{
    color: black;
    font-size: 24px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    z-index: 4;
}

.timeline-middel h3{
    color: white;
    font-size: 200px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-shadow: 5px 5px 0px rgb(0, 0, 0);
    line-height: 200px;
    margin-left: 100px;
}

.timeline-middel p{
    color: white;
    font-size: 50px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 50px;
    margin-bottom: 35px;
    margin-left: 20px;
}

.history-bottom{
    width: 600px;
    height: 100px;
    margin-top: 50px;
    margin-left: 100px;
      
}

.history-bottom p {
    color: black;
    font-size: 18px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.timeline-bottom-video{
    width: 400px;
    height: 200px;
    object-fit:cover;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -110px;
    margin-right: 30px;
}

.timeline-bottom-video-shadow{
    width: 400px;
    height: 100px;
    position: absolute;
    right: 0;
    top: 0;
    margin-top: -10px;
    margin-right: 30px;
    box-shadow: 20px 20px 0px rgb(0, 0, 0);
    z-index: 1;

}

.history-top{
    width: 600px;
    height: 100px;
    margin-top: 50px;
    margin-left: 100px;
      
}

.history-top p {
    color: black;
    font-size: 18px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.citat-bottom{
    width: 400px;
    height: 100px;
    margin-left: 300px;
    margin-top: 70px;
    position: relative;
}

.citat-bottom p{
    color: black;
    font-size: 24px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    z-index: 4;
}

.timeline-top-video{
    width: 400px;
    height: 200px;
    object-fit:cover;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: -110px;
    margin-right: 30px;
}

.timeline-top-video-shadow{
    width: 400px;
    height: 80px;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-bottom: -2px;
    margin-right: 30px;
    box-shadow: 20px 0px 0px rgb(0, 0, 0);
    z-index: 1;

}

/*OUTTRO TITLE*/

.outtro-title{
    position: absolute;
    z-index: 3;
    bottom: 0;
    right: 0;
    margin-right: 40px;
    margin-bottom: 10px;
    color: #9d8ef7;
    font-size: 100px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-shadow: 5px 5px 0px rgb(0, 0, 0);
}

/*CREDIT*/

.credit{
    background: rgb(249,232,226);
    background: linear-gradient(90deg, rgba(249,232,226,1) 0%, rgba(194,183,245,1) 100%); 
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;

}

.credit-container{
    background-color: #9d8ef7;
    width: 900px;
    height: 520px;
    margin: auto;
    box-shadow: 20px 20px 0px rgb(0, 0, 0);
    display: flex;
    position: relative;
    margin-top: 40px;

}

.credit-overskrift{
    height: 100%;
    width: 100px;
    display: flex;
    align-items: center;  

}

.credit-overskrift h2{
    z-index: 3;
    color: white;
    font-size: 70px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    transform: rotate(-90deg);
    text-shadow: -5px 5px 0px rgb(0, 0, 0);
    left: 0;
    bottom: 0;
    margin-bottom: 100px;
    position: absolute;

}

.credit-wrapper{
    width: 600px;
    height: 400px;
    margin-left: 100px;
    margin-top: 60px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    position: relative;
}

.credits{
    width: 150px;
    height: 150px;
    margin-top: 20px;
    margin-left: 20px;
    margin-bottom: 0px;
    
}

.credits p{
    color: white;
    font-size: 18px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.credits span{
    color: white;
    font-size: 24px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    text-shadow: 2px 2px 0px rgb(0, 0, 0);
}

.published{
    position: absolute;
    color: white;
    font-size: 24px;
    font-family: "roc-grotesk-condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
    bottom: 0;
    right: 0;

}

/*FADE EFFECT*/

.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
  }
  
  .fadeOut {
    animation-name: fadeOut;
    animation-duration: .5s;
    animation-fill-mode: forwards;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }