:root {
  --red: #960023;
  --orange: #de5500;
  --yellow: #ffd900;
  --green: #047C22;
  --blue: #20516b;
  --grey: #404040;
  --white: #ffffff;
  --black: #000000;
}

@charset "UTF-8";

@font-face {
  font-family: "juicebrik_ikon";
  src:  url('fonts/juicebrik_ikon.eot?xctxgr');
  src:  url('fonts/juicebrik_ikon.eot?xctxgr#iefix') format('embedded-opentype'),
    url('fonts/juicebrik_ikon.ttf?xctxgr') format('truetype'),
    url('fonts/juicebrik_ikon.woff?xctxgr') format('woff'),
    url('fonts/juicebrik_ikon.svg?xctxgr#juicebrik_ikon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

body {
  background-color: var(--grey);
  font-family: "Open Sans", serif;
  font-size: 1.2em;
  line-height: 1.6em;
  margin: 0;
}

h1 {
  color: var(--red);
  font-family: "Montserrat", serif;
  font-size: 48px;
}

h3 {
  color: var(--orange);
}

a {
  color: var(--orange);
  text-decoration: none;
}

a:hover {
  color: var(--yellow);
  text-decoration: underline;
}

img {
  width: 100%;
}

header {
  background-color: var(--grey);
/* background-color: #910b0b; */
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-template-rows: 1fr auto 1fr;
  padding-top: 5%;
  padding-bottom: 5%;
}

header .logo {
  grid-column: 2/-2;
  grid-row: 2/-2;
}

section {
  background-color: var(--green);
  color: var(--yellow);
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  padding-top: 5%;
  padding-bottom: 5%;
}

sektion .tegninger {
  grid-row: 2/-2;
}

section h3 {
  color: var(--yellow);
}
section .skills {
  grid-column: 2/-2;
  grid-row: 2/3;
}
section .juicebrik-13 {
  grid-column: 2/-2;
  grid-row: 3/4;
}

section .illu_1 {
  grid-column: 2/2;  
}

section.green {
  background-color: var(--green);
}

section.blue {
  background-color: var(--blue);
}

footer {
  background-color: var(--yellow);
  display: grid;
  grid-template-columns: 1fr repeat(3, 2fr) 1fr;
  grid-template-rows: 1fr auto auto 1fr;
  padding-top: 5%;
  padding-bottom: 5%;
}
footer h3 {
  color: var(--red);
}
footer a {
  color: var(--red);
}
footer a:hover {
  color: var(--orange);
  text-decoration: none;
}
footer .kontakt {
  grid-column: 2/-2;
  grid-row: 2/3;
}
footer .juicebrik-6 {
  grid-column: 2/4;
  grid-row: 3/4;
}

ul li:before {
  font-family: "juicebrik_ikon";
  font-size: 1.2em;
  color: var(--white);
  content: "2 ";
  list-style-type: none;
  left : 1em;
  mix-blend-mode: overlay;
}    

 li {
  list-style-type: none;
}

.social {
  font-family: "juicebrik_ikon";
  font-size: 1.7em;
}

.social a {
  color: var(--black);
}

/*-----------------------
	Skærmtyper
-------------------------*/
/* 
  ##Device = Desktops
  ##Screen = 1000px to higher resolution desktops
*/
@media (min-width: 1000px) {
  section {
    grid-template-columns: 1fr repeat(6, 1fr) 1fr;
    grid-template-rows: 1fr auto auto 1fr;
  }
  section .skills {
    grid-column: 3/span 2;
    grid-row: 2/-2;
  }
  section .juicebrik-13 {
    grid-column: 5/span 2;
    grid-row: 2/-2;
  }

  footer {
    grid-template-columns: 1fr repeat(6, 1fr) 1fr;
    grid-template-rows: 1fr auto auto 1fr;
  }
  footer .kontakt {
    grid-column: 6/span 2;
    grid-row: 2/-2;
  }
  footer .juicebrik-6 {
    grid-column: 2/span 2;
    grid-row: 2/-2;
  }
  
  ul li:before {
    font-size: 0.9em;
  }   
}



/*# sourceMappingURL=main.css.map */