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

body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.7em;
    
}


header {
    width: 100vw;;
    position: fixed;
    text-align: right;
    background: linear-gradient(to right, #e8ede2, #d8e2e2);
    z-index: 1000;
}

.menu-icon i {
    font-size: 2em;
    color: rgb(137, 154, 190);
    padding: 1em;
    position:static;
}

/* Hidden slide-in menu */
.nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100vw;
    height: 100vh;
    background-color: #e8ede2;
    color: #252245;
    transition: right 0.3s ease;
    z-index: 1000;
}

.nav-menu ul {
    list-style: none;
    padding: 0;
    text-align: left;
    padding-right:1em;
    padding-top:1em;
}

.nav-menu li {
    margin: 2em 0;  
}

.nav-menu a {
    color: #252245;
    text-decoration: none;
    font-size: 1.2em;
    padding-left: 4em;
    padding-top: 1em;
    text-transform: uppercase;
    font-style: italic;  
}

.nav-menu a:hover {
    color: rgb(137, 154, 190);
}

/* Show menu when active */
.nav-menu.active {
    right: 0;
}

/* Styling til krydsikonet */
.close-icon {
    font-size: 3em;
    cursor: pointer;
    color: rgb(15, 18, 44);
    position: absolute;
    top: 0.8em;
    right: 1em;
    font-weight: lighter;
}


.head-description2{
    color: #e0e0e9;
    padding-left:2em;
    padding-right: 2em;
    padding-bottom: 11em;
    padding-top: 4em;
}



.hero{
    padding-left: 2em;
    padding-top: 10em;
    padding-bottom: 7em;
    background-color:#e8ede2; 
}

.hero h2 {  
    font-size: 1.3em;
    text-transform: uppercase;
    font-style: italic;
    color: rgb(137, 154, 190);
    font-weight: 100;   
}


.hero h1 {
    font-size: 1.6em;
    font-weight:400;
    line-height: 1;
    
    color: #222948;   
    text-transform: uppercase; 
}



.animation-lines {
    position: relative;
    height: 3em;
    overflow: hidden; 
    background-color: #e8ede2;
}

.line {
    position: absolute;
    width: 100vw;
    height: 50px;
    background-color: #08132a;
    animation: slide-down 8s infinite;
}

.line-1 { animation-duration: 8s; background-color: #06061b; }
.line-2 { animation-duration: 10s; background-color: #06061b; } 
.line-3 { animation-duration: 12s; background-color: #06061b; }

@keyframes slide-down {
    0% {
        top: -30px;
        opacity: 0;
    }
    50% {
        opacity: 1;
        top: 50%;
    }
    100% {
        top: 100%;
        opacity: 0;
    }
}

.presentation{
    font-style: italic;
    font-size: 1.3em;
    line-height: 1.8;
    color:rgb(137, 154, 190);

}

.Faglig-profil{
        padding-top: 4em;
        padding-left: 4em;
        padding-right: 4em;
       
          
}

.Faglig-profil h3{
    font-size: 1.6em;
    font-weight: 300;
    padding-bottom: 1em;
    padding-top: 1em;
}

.Faglig-profil p{
    font-size: 1.1em;
}











.bagg{
    font-size: 1.2em;
    color: rgb(137, 154, 190);
    padding-top: 1em;
    padding-bottom: 1em;
}







/* Sørger for at body ikke kan scrolle horisontalt */
body {
    margin: 0;
    overflow-x: hidden;
  }
  
  /* Style til marquee */
  .marquee {
    position: relative; /* For animation */
    white-space: nowrap; /* Sørger for at teksten ikke bryder */
    overflow: hidden; /* Skjuler indhold uden for container */
    width: 100%; /* Sørger for, at den følger viewportens bredde */
    
  }
  
  .marquee-content {
    display: inline-block;
    animation: scroll-left 30s linear infinite; /* Tilføj en animation */
  }

  .IT{
    padding-top: 3em;
    color: rgb(137, 154, 190);
    font-style: italic;
    font-size: 1.5em;
  }
  
  @keyframes scroll-left {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  

.head-section {
    
    background-color: #06061b;
    padding-top: 2em;
    padding-bottom: 1em;
}

.projects{

background-color: #06061b;
padding-bottom: 5em;
padding-top:5em;
}


.projects h3{
    font-size: 1.6em;
    font-weight: 300;
    padding-bottom: 2em;
    color: rgb(137, 154, 190);
}

.projects p{
    color: rgb(137, 154, 190);
    padding-bottom: 2em;
    font-style: italic;
    font-size: 1.2em;
}
.project-box {
    background-color: #e8ede2;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: transform 0.5s ease, box-shadow 1.0s ease;
    
}

.project-box:hover {
    background-color: #060c15; 
    filter:brightness(0.7);
    color: #e5e8f0;
}


.project-box img {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 1px solid #ccc;
    filter: grayscale(0.5);
    
}

.project-box .front p {
    padding: 0.5em;
    background-color: #f5f5f5;
    color: #090e27;
    font-size: 1em;
}

.project-box .back {
    padding: 1em;
    text-align: center;
    background-color: #fff;
    color: rgb(137, 154, 190);
    display: none;
}



.project-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 0.5em;
}







.praktik{
padding-top: 4em;

padding-right: 4em;
padding-bottom: 1em;
}

.praktik ul{
    
    list-style: none;
}

.praktik li a{
    color: rgb(137, 154, 190);
}

.praktik h3{
    font-size: 1.6em;
    font-weight: 300;
    padding-bottom: 1em;
    color: rgb(137, 154, 190);
}

.praktik p{
    font-size: 1.3em;  
    line-height: 1.6em;
    color:  rgb(137, 154, 190);
    font-style: italic;
    

}

.kontakt p{
    font-size: 1.1em;
}

a {
    color: rgb(137, 154, 190); /* Vælg din ønskede linkfarve, f.eks. blå */
    text-decoration: none; /* Fjern understregningen, hvis ønskes */
  }
  
  a:hover {
    color: rgb(222, 237, 238);; /* Skift farve, når linket hoveres */
  }
  


.kontakt{
    padding-left: 4em;
    padding-right: 4em;
    padding-bottom: 4em;
}

.kontakt h3{
font-size: 1.5em;
font-weight: 300;

}

footer {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    background-color:#05051b;
    height: 25em;
    color: #fff;
    padding-left: 4em;
    padding-right: 4em;
    padding-top: 4em;
}


footer p{
    
    font-style: italic;
    
}

footer a {
    margin-right: 20px;
    font-size: 2em;
    color: rgb(137, 154, 190);
    text-decoration: none;   
}

.fa-code{
    font-size: 2em;
    color: rgb(137, 154, 190);

}

.coded p{
    color:rgb(137, 154, 190);
}



/* Grundlæggende stil, før scroll-effekten */
body {
    transition: background-color 0.3s ease;
    
  }
  
  /* Mørk baggrund ved scroll */
  body.dark-mode {
    background-color:#05051b; /* Mørk baggrund */
    color: rgb(137, 154, 190); /* Skift også tekstfarven for bedre kontrast */
  }
  

/*media queries*/

/* Smartphones (små skærme) */
@media  (min-width: 320px) and (max-width: 425px){
  
    .hero{
        font-size: 1em;
        padding-left: 3em;
    }
    .head-section{  
        padding-left: 1em;
        font-size: 1em;
    }
    .Faglig-profil{
        padding-left: 2em;
        padding-right: 2em;
    }
    .projects{
        padding-left: 2em;
        padding-right: 2em;
    }
    .project-container{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    .praktik{
        padding-left: 2em;
        padding-right: 2em;
    }
    .kontakt{
        padding-left: 2em;
        padding-right: 2em;
    }
    footer{
        padding-left: 2em;
        padding-right: 2em;
    }
    .ikoner{
        display: flex;
        flex-direction: flex;
    }

}


 /* Tablets (mellemstore skærme) */
 @media (min-width: 425px) and (max-width: 768px) {
    
    .hero{
        padding-left: 4em;
        padding-right: 4em;
    }
    .head-section{  
        padding-left: 2em;
        padding-right: 2em;
    }
        
    }
    .Faglig-profil{
        padding-left: 4em;
        padding-right: 4em;
    }
    .projects{
        padding-left: 4em;
        padding-right: 4em;
    }
    .project-container{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    .ikoner{
        display: flex;
        
    }

  

   /* Laptops (store skærme) */
   @media (min-width: 769px) and (max-width: 992px) {
    .hero{
        padding-left: 4em;
        padding-right: 4em;
    }
    .head-section{  
        padding-left: 2em;
        
    }

    .hero h1 {
        font-size: 1.7em;
    }

    .hero h2 {
        font-size: 1.2em;
    }

    .project-container {
        justify-content: space-around;
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
   
    
    .kontakt{
        padding-left: 4em;
        padding-right: 4em;
    }
    
    footer{
        padding-left: 4em;
        padding-bottom: 4em;
    }
    .ikoner{
        display: flex;
        flex-direction: row;
    }
    .coded p{
        font-size: 1.3em;
    }
  }


  
@media (min-width: 993px) {
    
    header{
        padding-right: 2em;
    }
    body {
       
        font-size: 1.2em;
    }

    .hero {
        padding: 10em 9em;
    }

    .head-description2{
        padding-left:9em;
        padding-right:9em ;
    }

    .Faglig-profil{
        padding-left: 9em;
        padding-right: 9em;
    }

    .projects{
        padding-left: 9em;
        padding-right: 9em;
    }

    .project-container {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        justify-content: space-between;
    }

    .nav-menu ul {
        padding: 5em;
    }

    
    
    .kontakt{
        padding-left: 9em;
        padding-right: 9em;
    }
    
    footer{
        padding-left: 9em;
        padding-right: 9em;
    }
    .coded{
        font-size: 1.2em;
    }

}