:root{
    --aqua: rgb(17, 82, 89);
    --sky: rgb(138, 176, 191);
    --sand: rgb(217, 149, 108);
    --egern: rgb(163, 79, 51);
    --choco: rgb(115, 44, 2);
    --chocosee: rgba(115, 44, 2, .85);
    --james: 'James Hayley';
    --cal: 'Californian FB';
}

@font-face{
    font-family: 'James Hayley';
    src: url('../fonts/James\ Hayley.ttf') format('truetype');
    src: url('../fonts/JamesHayley.woff2') format('woff2'), 
    url('../fonts/') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Californian FB' ;
    src: url('../fonts/Californian\ FB\ Regular.ttf') format('truetype');
    src: url('../fonts/CalifornianFB-Reg.woff2') format('woff2'),
    url('../fonts/CalifornianFB-Reg.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Californian FB';
    src: url('../fonts/Californian\ FB\ Bold.ttf') format('truetype');
    src: url('../fonts/CalifornianFB-Bold.woff2') format('woff2'),
    url('../fonts/CalifornianFB-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Californian FB';
    src: url('../fonts/Californian\ FB\ Italic.ttf') format('truetype');
    src: url('../fonts/CalifornianFB-Italic.woff2') format('woff2'),
    url('../fonts/CalifornianFB-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

body{
    margin: 0;
    padding: 0;
    background-color: var(--sky);
}
a {
    text-decoration: none;
}


/* Navigationsbar */
/* Header */
header{
    padding-left: 3%;
    padding-right: 3%;
    /* padding-bottom: 4%; */
    background-color: var(--aqua);
    margin-bottom: 5vw;
}
.topnav{
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}
.topnav a{
    text-decoration: none;
    display: block;
}
#logo{
    margin: 0%;
    padding-top: 0.8vw;
    width: 3rem;
}
.topnav a.KKlip{
    display: none;
}
/* Burgermenu */
.burger{
    color: var(--sky);
    font-size: 2.5rem;
}
#myLinks{
    display: none;
    background-color: var(--sky);
    text-decoration: none;
    flex-direction: column;
    font-family:var(--cal);
    font-size: 8vw;
    padding-bottom: 3%;
    padding-top: 1%;
    border-color: var(--aqua);
    border-style: double;
    border-width: 10px;
}
#myLinks a{
    color: var(--aqua);
    text-align: center;
    padding-top: 2%;
}
#myDesk{
    display: none;
}
.side{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: var(--sky);
    align-content: center;
    font-family: var(--james);
    font-size: 12vw;
}
/* Her slutter navigationsbaren */


/* Denne section er footeren */
/* Overordnet styling på footeren */
#footer{
    width: 100%;
    height: 4rem;
    background-color: var(--aqua);
    color: var(--sky);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-family: var(--cal);
    font-style: italic;
    font-size: 3.4vw;
}
/* Styling på linkedIn logo i footeren */
#linkedInfoot{
    width: 3rem;
    vertical-align: middle;}
/* Styling på teksten i footeren, bruges til at give 
tekstfelterne mere plads, da noget tekst ellers flyttes på ny linje */
#infofoot{
    width: 70.5%;
}
/* Sørger for at kontakt infoen står på samme linje */
#tekstfoot{
    display: flex;}
/* Giver plads mellem kontakt info tekst*/
.pfoot{
    margin:2%;
}
/* Den lange sætning har brug for lidt ekstra plads */
#kontaktk{
    width: 38.5%;
}
/* pladsering af copyright icon & tekst */
#copyDiv{
    display: flex;
    justify-content: center;}
/* størrelse på copyright icon */
.copyikon{
    width: 1rem;
    height: 1rem;
}
/* Giver plads mellem icon og tekst og fjerner plads mellem tekst og kontakt info tekst */
#copytext{
    margin: 0%;
    padding-left: 2%;}
/* Her slutter footeren */



/* Tekst, som linker til andre sider */
.insidetekst{
    font-family: var(--cal);
    font-style: italic;
    color: var(--choco);
}

.headLine{
    display: none;
}



.sec h2{
    color: var(--aqua);
    font-family: var(--cal);
    font-weight: bold;
    font-size: 7vw;
    text-align: center;
    margin-block-start: 3vw;
    margin-block-end: 3vw;
    /* padding-right: 5%;
    padding-left: 5%; */
}
.sec p{
    color: var(--aqua);
    font-family: var(--cal);
    font-size: 5vw;
    padding-right: 5%;
    padding-left: 5%;
    margin: 0;
    margin-block-end: 4vw;
    text-align: justify;
}

.billeder{
    width: 100%;
}


/* for desktop version & ipad o.l. */
/* tidliger vers 992px */
@media screen and (min-width: 600px){


/* Header start */
/* fjerner burger*/
.topnav a.icon{
    display: none;
}
#myLinks{
    display: none;
}

header{
    margin-bottom: 2vw;
}

.topnav{
    height: 8vw;
}
#logo{
    width: 6vw;
}

/* Sætter Desktop nav bar i stedet for burger */
#myDesk{
    display: flex;
    position: sticky;
    float: right;
    width: 58vw;
    height: 8vw;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 1%;
}
#myDesk a{
    color: var(--sky);
    font-family: var(--cal);
    font-weight: bold;
    font-size: 1.7vw;
    padding-left: 1.5vw;
    white-space: nowrap;
}
.topnav a.KKlip{
    display: flex;
    padding-top: 0%;
    padding-left: 2%;
    margin: 0;
    color: var(--sky);
    text-decoration: none;
    align-content: center;
    font-family: var(--james);
    font-size: 6vw;
}
.topnav a.KKlip h2{
    font-size: 4vw;
    margin-block-end: 0em;
    margin-block-start: 0em;
    margin: 0;
    padding: 0;
}
.side{
    display: none;
}
/* Header slut */

/* Footer start */
#footer{
    justify-content: space-evenly;
    height: 8vw;
}
#footer a{
    margin: 0;
}
#linkedInfoot{
    margin: 0%;
    width: 6vw;
}
#infofoot{
    display: flex;
    width: 82%;
    margin: 0%;}
#tekstfoot{
    width: 70%;
    align-items: center;
    justify-content: space-evenly;
}
.pfoot{
    margin:2%;
    font-size: 2vw;
    text-align: right;
}
/* Den lange sætning har brug for lidt ekstra plads */
#kontaktk{
    width: 16vw;
}
/* pladsering af copyright icon & tekst */
#copyDiv{
    width: 26vw;
    align-items: center;
    justify-content: right;
}
/* størrelse på copyright icon */
.copyikon{
    width: 2vw;
    height: 2vw;}
#copytext{
    font-size: 1.5vw;
    width: 18vw;
}
/* Her slutter footeren */


/* Side overskrift tilføjes */
.headLine{
    display: block;
    font-family: var(--james);
    font-size: 10vw;
    color: var(--aqua);
    text-align: center;
    margin-top: 0;
    margin-bottom: 3vw;
}


.sec{
    display: flex;
    align-items: center;
    margin-bottom: 3.33vw;
}
.secRev{
    flex-direction: row-reverse;
}

.tekst{
    width: 40vw;
    margin-left: 6.66vw;
    margin-right: 6.66vw;
}

.sec h2{
    white-space: nowrap;
    text-align: left;
    font-size: 3.5vw;
    margin-block-start: 0;
    margin-block-end: 1vw;
}

.sec p{
    padding: 0;
    margin-block-end: 0;
    font-size: 2vw;
}


.billeder{
    /* display: none; */
    display:block;
    width: 40vw;
    height: 100%;
    object-fit: cover;
    margin-right: 6.66vw;
}
.billederRev{
    margin-right: 0;
    margin-left: 6.66vw;
}

}