/*layout*/
.hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(images/themurderonthelittlemurmaide.jpg);
    background-size: cover;
    background-position: top;
    z-index: -1;
    will-change: filter;
    filter: blur(0px);
    transition: filter 0.3s ease-out;
    
}
.hero::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(0, 0, 0, 0.2);
        transition: background 0,5s;
    }

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #ffffff;
    text-shadow: 2px 2px 10px rgb(0,0,0,0.5);
    transition: opacity 0.2 ease-out, transform 0.2;
    will-change: opacity, transform;
}
.content {
    margin-top: 100vh;
    min-height: 200vh;
    background-color: white;
    position: relative;
    z-index: 1;
    
}

.container{
    display: grid;
    /*grid-template-columns: auto 20fr 20fr; /*første kolone er auto, anden er 6fr og sidste er 4fr*/
    grid-template-areas: /*kolone 1 er header, 2 kolone er header 2 osv (lodret)*/ 
    'header' 'header' 'header'
    'main' 'main' 'main'
    'footer' 'footer' 'footer';
    grid-template-rows: 250px auto 100px; /*header er 250px, main er auto og footer er 100px*/
    width: 100vw;
    max-width: 1500px; /*viden er 100% men kan ikke overstige 1500px*/
    margin:auto; /*sørger for at alt er centreret uanset brede*/
    padding: 1px; /*afstanden mellem content og border*/
    gap: 20px; /*viser hvor stor afstand de er imellem rows og columns*/
    background-color: rgba(36, 35, 35, 0);
    height: auto;
    min-height: 100vh; /*viewport = 1% af skærmens height*/
}
.header {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px; /* Mere luft i siderne */
    z-index: 1000;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0); /* En næsten usynlig glans */
    
}
  
.logo {
    height: 100px;
    width: auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast;
    display: block;
    border-radius: 30%;
    

}
.header-buttons {
    display:flex; /*flexbox*/
    gap: 50px;
    align-items: center;
   
}
.header-buttons button {
    background: transparent; /* Ingen tung sort boks */
    color: rgb(255, 255, 255); /* Tekstfarven (skift til sort hvis din baggrund er lys) */
    border: 3px solid rgb(255, 255, 255); /* En tynd, elegant kant */
    padding: 20px 10px;
    margin-left: 15px;
    border-radius: 25px; /* Runde kanter føles venligere og moderne */
    cursor: pointer;
    font-family: 'Segoe UI', sans-serif; /* Eller din egen font */
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 14px;
    transition: all 0.3s ease; /* Gør farveskiftet blødt */
}
    
   


.header-buttons button:hover {/*anden end hover?*/
    background-color: #000000;
    color: rgb(255, 255, 255);

} 

.main {
    grid-area: main;
    padding: 30px;
    display: flex; /*flexboxen sikre at alt inde i den bliver placeret endten på langs eller stablet*/
    flex-direction: column;
    align-items:center;
    justify-content: center;
    max-width: 100%; /* indholdet bliver ikke bredere end containeren*/
   
}
.main-flex {
    display: flex;
    flex-wrap: wrap; /* gør alt indei flexboxen responsivt*/
    justify-content: center;
    gap: 20px;
    
}
.footer {
    grid-area: footer;
    display: grid;
    background-color: #0202024b;
    color: white;
    text-align: left;
    padding: 30px 20px;
}

.footer-buttons {
    margin-top: 40px; /* afstand fra tekst til knapper */
    
    

}


/* front page */

.main-intro-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto; /*udevendig afstand mellem grid*/
    padding: 20px;
}
.main-intro-text h1 {
    font-family: "Montserrat", sans-serif;
    color: #ffffff;
    margin-bottom: 1rem; /*16px*/
    font-size: 2rem; /*32px*/
    
}
.main-intro-text p {
    color: #c9d8e2;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    margin-bottom: 1rem;
    
}

.main-button {
    display: block;
    background-color: #00000000;
    margin: 20px auto;
    text-align: center;
    color: #ffffff;
    font-family: "montserrat", sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    border: 10px;
}

* { /*alleelementer på siden får samme regl som er box-sizing*/
    box-sizing: border-box; /*ændre måden at bredden og højden i elementet beregnes*/
}

.slider {
    width: 600px;
    text-align: center;
    overflow: hidden; /*gemmer alt indhold i sliderene, hvis det har en brede på mere end 500px*/
    
    
    
}
.slides {
    display: flex;

    overflow-x: auto; /*man kan scrolle horisontalt, når mine billeder kan være højere end slideren*/
    scroll-behavior: auto; /*scrollen sker uden animationer og den bestemmer, hvordan min scrol skal forgår*/
    
    scroll-behavior: smooth; /*laver en smooth transaction mellem de andre slides*/
    
}

.slides > div {
    scroll-snap-align: start;
    flex-shrink: 0; /*fohindre at sliderens bredde bliver mindre end 600px*/
    width: 600px;
    height: 500px;
    margin-right: 5px; /*afstanden mellem slidsne*/
    border-radius: 10px;
    background: #462829;
    transform-origin: center center;
    transform: scale(1);
    
    position: relative; /*sikre at elementer inde i slideren forbliver i denne container*/

    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100px;
    
}

.slides > div:target { /*den tager fra div-slide billederne*/
transform: scale(1.0); /*slideren bevare en normal størrelse */
}



.slider > a {
  display: inline-flex; /*indholdet kan centreers både lodret og vandret*/
  width: 16px;
  height: 16px;
  background: white;
  text-decoration: none; /*fjerne underline af link*/
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 5px;
  position: relative;
  
}
.slider >a:active {
    top:1px; /*når man klikke på link, så vil elementet flytte sig med 1px nedad*/
}
.slider > a:focus {
    background: #000000;
}

.myproject.html {
    background-color: #000000;
}

h1 {
    color: #c9d8e2;
}
/*about me*/
.frontpage-picture {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 40px; /*giver 40px mellem border og content på begge sider*/
}
.about-me-container {
    max-width: 900px; /*max bredde på 900px i containerne, men kan stadig eskalere ned til width med 100%*/
    width: 100%;
    text-align: center;
    background-color: #0000005b;
}
.about-me-image {
    width: 50%; /*billede fylder 50% af containeren, men ikke mere end 650px*/
    max-width: 650px;
    height: auto; /*sikre at billedet proportioner ikke ændres*/
    border-radius: 10px;
    margin: 20px auto; /*centrer billedet horisontalt men giver vertikal afstand*/
    display: flex;
}
.about-me-text2 {
    font-family: "Montserrat", sans-serif;
    color: #ffffff;
    line-height: 1.7rem;
    margin-top: 20px;
}
.about-me-text1 {
    font-family: "montserrat",sans-serif;
    color: #ffffff;
}

/*my projects*/
.projects-section {
    padding: 40px 20px; /*centrere teksten og sikre at sektionen fylder hele bredden*/
    width: 100%;
    text-align: center;
    margin: 0 auto; /*centere container horisontalt*/
}
.project-row {
    display:flex;
    flex-wrap: wrap; /*projekterne ligger i en fleksibel række men kan wrappes til næste linje ved mindre skærme*/
    justify-content: center;
    gap: 40px;
    margin-bottom: 60px; /*der er 60px afstand til næste sektion*/
}
.project {
    background: #0000005b;
    padding: 20px;
    border-radius: 10px;
    width: calc(50% - 40px);
    max-width: 600px;
    min-width: 280px;
    color: #ffffff;
    text-align: center;
}
.project h2 {
    font-family: "Montserrat", sans-serif;
    line-height: 1.6rem;
    margin-bottom: 15px;
    color: #ffffff;
}
.project p {
    font-family: "Montserrat", sans-serif;
    line-height: 1.6rem;
    margin-top: 10px;
    color: #ffffff;
} 
.project img, 
.project video {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-top: 10px;
}
.floating-box-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 80px;
    background-color: #00000000;
    color: #ffffff;
    
}
.floating-box {
    width: 100px;
    height: 100px;
    background-color: rgba(8, 1, 15, 0.623);
    border-radius: 30px;
    color: #ffffff;
    animation: float 10s ease-in-out infinite;


    
}


/*contact*/

.flex-container {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    height: 100%;
    gap: 40px;
    max-width: 1000px;
    background-color: #31010100;
}
.contact1 {
    flex: 1;
    font-family: "Montserrat", sans-serif;
    font-weight: 550;
    letter-spacing: 2px;
    color: white;
}

.contact2 {
    max-width: 500px;
    margin: auto;
    padding: 20px;
    background-color: rgba(240, 248, 255, 0.021);
    border-radius: 10px;
    color: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight: 550;
    letter-spacing: 2px;
}

.contact2 h2 {
    text-align: center;
    margin-bottom: 20px;
}
.contact2 form {
    display: flex;
    flex-direction: column;
    gap: 15px;

}
.contact2 label {
    font-size: 0.9rem;

}
.contact2 input,
.contact2 textarea {
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    width: 100%;

}
.contact2 textarea {
    height: 120px;
    resize: vertical;

}
.contact2 button {
    padding: 12px;
    background: black;
    color: aliceblue;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    letter-spacing: 2px;
    transition: 0.2s;

}

.contact2 button:hover {
    background-color: aqua;
    
}



    



/*@media (min-widht:700px) {
    header{
        grid-template-columns: auto 6fr 4fr;
        grid-template-rows: auto;
        row-gap: 20px;
        text-align: center;
        flex-direction: column;

    }
    .logo {
        max-width: 150px;
        flex-direction: row;

    }
    .header-buttons button {
        font-size: 0,5rem;
        padding: 0.5 0.5 0.5 0.5;
        flex-direction: row;
    }
}
@media (max-widht:700px) {
    .header{
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        row-gap: 10;
        flex-direction: row;
    }
    .logo {
        max-width: 100px;
        flex-direction: row;
    }
    .header-buttons button {
        font-size: 0,3rem;
        padding:0,1 0,1 0,1 0,1;
        flex-direction: row;
    }*/

@media screen and (min-width: 1024px) {
    .header {
        display: flex !important;
        justify-content: space-between !important;
        width: 100vw !important; /* Tvinger den til at bruge skærmbredden */
        left: 0;
        right: 0;
    }

    .header-buttons {
        display: flex !important;
        flex-direction: row !important;
        margin-right: 50px; /* Giver den lidt afstand fra selve kanten */
    }
}

    .logo {
        max-width: 150px;
        flex-direction: row;
    }
    .header-buttons button {
        font-size:0.85rem;
        padding:0.7em 1.2em;
        flex-direction: row;
        
    }

@media (max-width: 900px) {
    .procets {
        max-width: 100%;
        max-width: none;
    }
}

@media (max-wdht: 768px) {
    .floating-box-wrapper {
        width: 130px;
        height: 130px;
    }
}

@keyframes float { 
    0% {
        transform: rotate(90deg);
    }
    
    25% {
        transform: rotate(180deg);
        background-color: antiquewhite;
    }

    50% {
        transform:  rotate(270deg);
        background-color: aqua;
    }

    75% {
        transform:  rotate(360deg);
        background-color: bisque;
    }

    100% {
        transform: rotate(450deg);
        background-color: azure;
    }
}