: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/JamesHayley.woff') 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); */
    /* background-image: linear-gradient(to bottom left, var(--sky), var(--aqua)); */
    background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

}
a {
    text-decoration: none;
}


/* Navigationsbar */
/* Header */
header{
    padding-left: 3%;
    padding-right: 3%;
    /* padding-bottom: 4%; */
    background-color: var(--aqua);
}
.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{
    margin: 0;
    padding: 0;
    text-decoration: none;
    color: var(--sky);
    align-content: center;
    font-family: var(--james);
    font-size: 7vw;
}
.topnav a.KKlip h2{
    margin: 0;
    padding: 0;
}
/* 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;
}
/* 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 */



.headLine{
    display: none;
}
.hide{
    display: none;
}


/* placering af billeder så de fylder hele skærmbreden */
.forsidebilleder{
    width: 100vw;
}
/* placering af sectioner med billeder og tekst */
.secBillede{
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    color: var(--sand);
}
/* placering af selve teksten på billedene */
.onImg{
    margin: auto;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    bottom: -10%;
    width: 100%;
    height: 20%;
    /* background-color: var(--chocosee); */
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: flex-end;
    font-family: var(--cal);
    font-size: 7vw;
}

.purple{
    background: transparent url("img/purpledot.png") top left repeat;
}
.green{
    background: transparent url("img/greendot.png") top left repeat;
}
.blue{
    background: transparent url("img/bluedot.png") top left repeat;
}
.red{
    background: transparent url("img/reddot.png") top left repeat;
}
.yellow{
    background: transparent url("img/yellowdot.png") top left repeat;
}

/* Kontakt sectionen */
.kontaktInfo{
    text-align: center;
    color: var(--aqua);
    margin-top: 10vw;
}
.kontaktInfo h3{
    font-family: var(--cal);
    font-weight: bold;
    font-size: 10vw;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
}
.kontaktInfo h4{
    font-family: var(--cal);
    font-size: 6.5vw;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
}
.kontaktInfo p{
    font-family: var(--cal);
}
#linkedIn{
    display: none;
}
#mig{
    width: 60vw;
    margin-top: 4vw;
    margin-bottom: 4vw;
}
form{
    text-align: left;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 5%;
}
.label, #navn, #mail, #besked, #send{
    font-family: var(--cal);
}
.label{
    color: var(--aqua);
}
textarea{
    width: 95%;
    height: 3rem;
}
#navn, #mail{
    width: 95%;
}
/* #send{
    margin-bottom: 3%;
} */




/* 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{
    padding-top: 0%;
    padding-left: 2%;
    font-size: 6vw;
    }
.topnav a.KKlip h2{
    font-size: 4vw;
    margin-block-end: 0em;
    margin-block-start: 0em;
}

/* 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: 2vw;
}

/* Sætter 2*2 sections med billerde ved siden af henanden */
.flexSec{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 6.66vw;
}
/* placering af billeder på forsiden */
.forsidebilleder{
    width: 40vw;
    height: 25vw;
    object-fit: cover;
}
.web{
    object-fit: fill;
}
/* placering af selve teksten på billedene */
.onImg{
    left: 40vw;
    transform: translate(-100%,50%);
    width: 40vw;
    height: 5vw;
    font-size: 4vw;
    bottom: 2.5vw;
}

/* Kontaktdelen */
.kontaktInfo{
    display: flex;
    margin-top: 6.66vw;
    margin-block-end: 6.66vw;
    justify-content: space-evenly;
}
.konMargin{
    width: 25vw;
}

.kontaktInfo h3{
    margin: 0;
    font-size: 3vw;
    white-space: nowrap;
}
.kontaktInfo h4{
    margin-top: 10%;
    margin-bottom: 10%;
    font-size: 2vw;
}
#linkedIn{
    display: block;
    margin: auto;
    padding-top: 5%;
    width: 10vw;
}
#mig{
    width: 25vw;
    height: 100%;
    margin-top: auto;
    margin-bottom: auto;
}
form{
    padding-left: 5%;
    padding-top: 5%;
    margin: 0;
    text-align: left;
}
.label{
    font-size: 2vw;
}
#navn, #mail{
    width: 22vw;
    height: 2vw;
    font-size: 1.5vw;
}
textarea{
    width: 22vw;
    height: 6vw;
    font-size: 1.5vw;
}
#send{
    margin: 0%;
    font-size: 2vw;
}

/* Kontaktdelen slutter */


}

@media screen and (min-width: 1025px){
    .onImg{
        transform: translate(-100%,0%);
        height: 25vw;
        bottom: 0%;
    }
    .secBillede:hover .onImg{
        height: 5vw;
        bottom: 2.5vw;
        transform: translate(-100%,50%);
    }
}

/* I stedet for at bruge en ny @media for størrere 
skærme har jeg valgt at sikre mig at mit design 
burde virke til forskellige skærmstørrelser ved
at bruge view width. 
Jeg har testet den via crome's Dimentions responsive
på skærme op til 2445 X 1626 pixels*/
/* Meget store skærme */
/* @media screen and (min-width: 1500px) */