@charset "UTF-8";

/* Webbfonter */
@font-face {
    font-family: 'Journal';
    src: url('journal-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* Ändra basegenskaperna av sidan. */
body {
  font-family: 'Source Sans Pro', Sans-Serif;
  background-color: #dadada;
  color: #101010;
}
h1 {
  font-family: 'Montserrat', Sans-Serif;
  color: #ffffff;
  text-shadow: 2px 2px 4px #000000;
}
h2 {
  font-family: 'Montserrat', Sans-Serif;
  color: #ffffff;
  text-shadow: 2px 2px 4px #000000;
}
p {
  
}

/* Min stil på länkar. */
a {
  color: #000044;
  text-decoration: none;
  font-weight: bold;
}
a:hover {
  color: #0000cc; 
}

/* Min stil för bilden. */
.portrait-image {
  box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Min stil för presentationstexten. */
.presentation-text {
  font-family: "Journal", sans-serif;
  font-size: 32px;
  color: #212151;
}

/* Definition av mitt rutnät för sidans layout. */
/* Behållaren för cellerna, tabellen. */
.grid-container {
  display: grid;
  column-gap: 25px;
  row-gap: 0px;
  
  max-width: 900px; /* max-width of the layout */
  margin: 0 auto; /* center in the viewport */
}

/* Gemensant för cellerna i tabellen. */
.grid-item {
  display: grid;
}

/* Layout, tilldelning av områdesnamn. */
.header {
  grid-area: header;
}
.content {
  grid-area: content;
}
.image {
  grid-area: image;
}
.footer {
  grid-area: footer;
}

/* Standard layout, för små fönster/skärmar. */
.grid-container {
  grid-template-areas:
   "header"
   "image"
   "content"
   "footer"
}

/* Layout som väljs automatisk när det finns plats. */
@media only screen and (min-width: 700px) {
  .grid-container {
    grid-template-areas:
     "header header header"
     "content content image"
     "footer footer footer"
    }
     
   .image {
    position: relative;
    top: 40px;
   }
}