/* Import af skrifttype */
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

/* CSS reset */
*{
    margin: 0;
    padding: 0;
}


html, body {
    scroll-behavior: smooth;
    scroll-padding: 115px;
}

/* sætter skrifttype på alt i body, skriftfarve, og body baggrundsfarve */
body{
    font-family: "Raleway", sans-serif;
    color: white;
    background-color: #0C1824;
        
}

/* header */

header{
    position: sticky;
    top: 0;
    z-index: 9999;
    padding: 5%;
}

/* kode fra lektion, modificeret */
.topnav {
    background-color: white;
    border-radius: 5px;
    /* border: #00BFFF solid 1px; */
    display: flex;
    justify-content: flex-end;
    /* box-shadow: 0px 5px 10px #9b1e2c; */
    transition: 300ms ease;
}

header a {
    color: #0C1824;
    padding: 15px;
    text-decoration: none;
    transition: 300ms ease;
}

.topnav a:hover {
    background-color: #0C1824;
    color: white;
    border-radius: 5px;
    transition: 300ms ease;
}

.logo a:hover {
    background-color: #0C1824;
    color: white;
    border-radius: 5px;
    transition: 300ms ease;
    padding: 0 5px;
}

.topnav .icon {
    display: none;
}
.logo {
    /* det virkede at fjerne position top 0 og left 0 */
    position: absolute;
    font-size: large;
    font-weight: 600;
    display: flex;
    padding: 15px 15px;
    /* fjernet farve på tekst, virkede ikke, gælder som header a */
}

#logotekst{
    height: 100%;
    width: 100%;
}

.logo a {
    padding: 0;
}

.hero_wrapper{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    background-color: rgba(0, 191, 255, 0.2);
    border-radius: 5px;
}

.video_wrapper{
    grid-column: 1/4 ;
    grid-row: 1/4;
    display: flex;
}

.realvideo{
    display: block;
    width: 100%;
    border-radius: 5px;
}


.herotekst {
    /* top: 60mm;
    height: 1.3em;
    position: relative; */
    z-index: 99;
    /* background-color: rgba(0, 0, 255, 0.175); */
    text-align: center;
    align-self: center;
    grid-column: 2/3;
    grid-row: 2/3;
    display: inline-block;
    text-shadow: #00BFFF 0px 2px;
}

h1{
    color: #0C1824;
    animation: 1s forwards alternate eew;
    font-size: 2rem;
}

.herotekst p{
    color: #0C1824;
    animation: 1s forwards alternate eew;
    font-size: 1rem;
    font-weight: 500;
}

h1:hover{
    color: #0C1824;
    animation: 1s forwards alternate wee;
}

/* animation keyframes, ændrer størrelse hhv op og ned med 20%*/

@keyframes wee{
    from{
        scale: 100%;
    }
    to{
        scale: 120%;
    }
}
@keyframes eew{
    to{
        scale: 100%;
    }
    from{
        scale: 120%;
    }
}

section{
    margin: 0 5%;
}

.billede{
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.imgcontain iframe{
    width: 100%;
    height: 298px;
    border-radius: 5px;
}

.imgcontain{
    padding: 3% 3%;
    flex: 1 1 0;
}

.titel{
    margin: 3% 0 3% 0;
}

.projekt{
    display: flex;
    gap: 3%;
    border: #00BFFF solid 1px;
    background-color: rgba(0, 191, 255, 0.2);
    border-radius: 5px;
    margin: 0 0 5% 0;
    flex-direction: column;
    justify-content: center;
}

.projekt_info{
    display: flex;
    flex-direction: column;
    padding: 0 3% 3% 3%;
    flex: 1 1 0;
}

.projekt_info h3{
    padding: 0 0 3% 0;
    font-size: 1.5em;
}

.projekt_info p{
    padding: 0 0 3% 0;
    line-height: 180%;
    /* color: #dcdcdc; */
}

.projekt_knap{
    width: 100px;
    background-color: #00BFFF;
    border-radius: 5px;
    padding: 15px;
    /* find bedre løsning */
    margin-left: auto;
    margin-top: auto;
    text-align: center;
    text-decoration: none;
    color: #0C1824;
    font-weight: 700;
    transition: 300ms ease;
}

.projekt_knap:hover{
    background-color: white;
    transition: 300ms ease;
}

.last-pr{
    margin-bottom: 0;
}

.foto-area{
    display: flex;
    flex-direction: column;
    padding: 3% 3% 3% 3%;
    flex: 1 1 0;
}

.foto-grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 3%;
    border-radius: 5px;
    margin-bottom: 3%;
}

.fgi{
    display: flex;
    min-width: 0; 
    min-height: 0;
}

.fgi img{
    width: 100%;
    border-radius: 5px;
}

.om-zone{
    display: flex;
    /* flex: 1 1 0; */
    flex-wrap: wrap;
    flex-direction: column;
    gap: 3%;
    padding: 0;
    border: 1px solid #00BFFF;
    border-radius: 5px;
}

.om-zone ul{
    padding: 0 3% 3% 3%;
}

.om-content1{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    /* flex: 1 1 0; */
    gap: 3%;
}

.timeline{
    list-style: inside;
    line-height: 250%;
}

.mail{
    color: #0C1824;
    background-color: #00BFFF;
    border-radius: 5px;
    padding: 15px;
    text-decoration: none;
    text-align: center;
    margin: 3% 0 3% 3%;
    display: flex;
    height: 1em;
    justify-content: center;
    align-content: center;
    transition: 300ms ease;
}

.mail:hover{
    background-color: white;
    color: #0C1824;
    transition: 300ms ease;
}

.kontakt-zone{
    display: flex;
    margin-bottom: 3%;
    border: 1px solid #00BFFF;
    border-radius: 5px;
    background-color: rgba(0, 191, 255, 0.2);
}

/* til footer */

footer{
    background-color: white;
    color: #0C1824;
    border-radius: 5px;
    display: flex;
    margin: 0 5% 5% 5%;
}

footer a{
    color: #0C1824;
    line-height: 150%;
    transition: 300ms ease;
}

footer a:hover{
    background-color: #0C1824;
    color: white;
    transition: 300ms ease;
    border-radius: 5px;
    padding: 0 5px 0 5px;
}

.sider{
    margin: 3%;
    width: 100%;
}

.f_links{
    list-style: none;
    margin-left: 3%;
}

h4{
    margin-top: 2%;
}

.copyright{
    display: flex;
    justify-content: center;
    margin-bottom: 3%;
}

.grafik{
    width: 100%;
}

/* til arkiv */

.arkiv-projekt{
    border: 1px solid #00BFFF;
    border-radius: 5px;
    background-color: rgba(0, 191, 255, 0.2);
}

.arkiv-content{
    margin: 3%;
    display: flex;
    flex-direction: column;
}

.arkiv-content ul li a{
    color:white;
    transition: 300ms ease;
}

.arkiv-content ul li a:hover{
    color:#0C1824;
    background-color: white;
    transition: 300ms ease;
    padding: 0 5px 0 5px;
    border-radius: 5px;
}

.arkiv-titel{
    margin-bottom: 3%;
}

.arkiv-tekst{
    width: 100%;
}

.arkiv-knap{
    width: 100px;
    background-color: #00BFFF;
    border-radius: 5px;
    padding: 15px;
    /* find bedre løsning */
    margin-left: auto;
    margin-top: auto;
    text-align: center;
    text-decoration: none;
    color: #0C1824;
    font-weight: 700;
}

.arkiv-knap:hover{
    background-color: white;
    color: #0C1824;
}

/* til visuelt koncept */

.vk-area{
    display: flex;
    flex-direction: column;
    padding: 3% 3% 3% 3%;
    flex: 1 1 0;
}

.vk-grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    border-radius: 5px;
}

.vgi{
    display: flex;
    min-width: 0; 
    min-height: 0;
    flex-direction: column;
}

.vgi img{
    width: 100%;
    border-radius: 5px;
}

.vgi h3{
    padding: 3% 0;
}

.landing-img{
    display: flex;
}

.landing-img img{
    width: 100%;
}

.vk-area h3{
    padding: 3% 0;
}

.landing-content{
    display: flex;
    flex-direction: column;
}

/* Header hamburger kode  */
@media screen and (max-width: 905px) {
    .topnav a {
        display: none;
    }
    .topnav .icon {
        display: block;
        font-size: 1em;
    }
    .responsive {
        position: relative;
        padding: 60px 0 40px 0;
        flex-direction: column;
        align-items: center;
        transition: 300ms ease;
    }
    .responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .responsive a {
        display: block;
        font-size: 1.2em;
        transition: 300ms ease;
    }
    .logo {
        z-index: 1;
    }
    
} 

/* pc */
@media screen and (min-width: 1280px) {
    .fullcontainer{
        max-width: 1150px;
        margin: 0 auto;
    }
    section{
        margin: 0;
    }
    .projekt{
        flex-direction: row;
    }
    .imgcontain{
        padding: 3% 0 3% 3%;
    }
    .projekt_info{
        padding: 3% 3% 3% 0;
    }
    header{
        padding: 1% 0 2% 0;
    }
    .om-content1{
        flex-direction: row;
    }
    .om-content1 .the-text{
        padding: 3% 3% 3% 0;
    }
    h1{
        font-size: 4em;
    }
    .om-zone ul{
        padding: 0 3% 0 3%;
    }
    footer{
        margin: 0 0 5% 0;
    }
    .herotekst p{
        font-size: 1.5rem;
    }
    .arkiv-content{
    margin: 3%;
    display: flex;
    flex-direction: row;
    }
    .titel{
        font-size: 2em;
    }
    .vk-area h3{
        font-size: 1.5em;
    }
    .vk-grid{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 3%;
    }
}