* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    text-decoration: none;
    }
  
  body {
    font-family: 'Open Sans', sans-serif;
    font-size: 1.3em;
    color: #333;
    background-color: #fff;
    width: 100%;
    margin: 0;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }

/* Fokusering vid tab-navigering */
  /*.sv.fokus:focus {
    border: 2px solid #ffffff !important;
    outline: 2px solid #2B2A29 !important;
    outline-offset: 3px !important;
  }*/

  :focus {
    background-color: #f1f1f1;
    border: 2px solid #ffffff !important;
    outline: 2px solid #2B2A29 !important;
    outline-offset: 3px !important;
  }

  input:focus {
    background-color: #f1f1f1;
    border: 2px solid #ffffff !important;
    outline: 2px solid #2B2A29 !important;
    outline-offset: 3px !important;
  }

  a:focus {
    background-color: #f1f1f1;
    border: 2px solid #ffffff !important;
    outline: 2px solid #2B2A29 !important;
    outline-offset: 3px !important;
  }

/* Formatmallar */
  h1 {
    font-size: 250%;
    margin-bottom: 0.5em;
    color: #666;
  }
  h2 {
    font-size: 175%;
    margin: 0.5em 0;
  }
  h3 {
    font-size: 130%;
    margin: 0.5em 0;
  }
  h4 {
    font-weight: bold;
    margin-bottom: 0.5em;
  }
  ingress {
    font-size: 130%;
    font-weight: lighter;
    line-height: 1.3em;
    margin-bottom: 0.7em;
  }
  p {
   font-size: 100%;
   line-height: 1.5em;
   margin-bottom: 1em;
  }
  p:last-child {
    margin-bottom: 0 !important;
  }
  a:link {
    color:cornflowerblue;
    text-decoration: underline;
  }
  a:visited {
    color:steelblue;
    text-decoration: underline;
  }
  a:hover {
    color:yellowgreen;
    text-decoration: underline;
    /*border: 2px solid #ffffff !important;
    outline: 2px solid #2B2A29 !important;
    outline-offset: 3px !important;*/
    /* Tog bort border och outline eftersom allt hoppar... Det gör det fortfarande vid tab-nav.*/
  }
  a:active {
    color:slategrey;
  }

/* Punktlistor */
  ul.a {
      list-style-type: circle;
      list-style-position: outside;
      margin-left: 2em;
      margin-bottom: 1em;
      color: #333;
  }
  ul.b {
      list-style-type: disc;
      list-style-position: outside;
      margin-left: 2em;
      margin-bottom: 1em;
      color: #666;
  }
  ul.c {
    list-style-image: url("logos/arrow-lgr.svg");
    list-style-position: outside;
    margin-left: 2em;
    margin-bottom: 1em;
  }
  ul li {
    margin: 1em 0 1em 0;
  }
/* Listor på blogg-sidorna */
  ul.breadcrumb {
    padding: 0.7em;
    list-style: none;
    border-top: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
  }
  ul.breadcrumb li {
    display: inline;
    line-height: 2em;
    font-size: 0.9em; /* 0.8em */
    font-weight: bold;
    padding: 0.5em;
  }
  ul.breadcrumb li:hover {
    background-color: lightgray;
    padding: 0.5em;
    /*border: 2px solid #222;*/
    border-radius: 0.2em;
  }
  ul.breadcrumb a:hover {
    color:#222 !important;
  }
  /*ul.breadcrumb li+li::before {
    padding: 0.2em;
    color: #cacaca;
    content: "|\00a0";
  }*/

/* Header */
  header {
    display: grid;
    grid-template-columns: 1fr;
    background-image: url("logos/spider24.jpg");
	/*background-image: url("golje2aug22/15.jpg");*/
    background-size: cover;
    height: 11em;
	/*background-repeat: repeat-x;*/
  }
  header img {
    width: 40%;
    margin: 0.5em 1em;
    /*float: right;  Beroende på bakgrundsbild. */
  }
/* Navigation */
  nav {
    display: grid;
    grid-template-columns: auto;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  nav ul {
    background-color: #222;
    padding: 20px;
    /*border-bottom: 3px dotted #fff;*/
  }
  nav li {
    display: inline;
  }
  nav li+li::before {
    padding: 0;
    color: #cacaca;
    content: "|\00a0";
  }

/* Main */
  main {
    display: grid;
    grid-template-columns: 1fr;
    padding: 1em;
    max-width: 1100px;
    margin: auto; /* Centrerar innehållet oavsett hur bred skärmen är. */
  }

/* PUFFAR i main-ytan som kan fyllas med text eller bilder. Länkas till undersidor. */
  main wrapper {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: auto auto auto auto;
    max-width: 1100px;
    margin: 1em 0;
  }
  main wrapper wrcontent {
    display: grid;
    position: relative;
    width: 97%;
    text-align: center;
    color: white !important;
    margin-bottom: 0.5em;
  }
  main wrcontent a:link {
    text-decoration: none !important;
  }
  main wrcontent img {
    width: 100% !important;
    transition: 0.3s;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
    z-index: -1;
  }
  main wrcontent img:hover {
    -webkit-filter: none; /* Safari 6.0 - 9.0 */
    filter: none;
  }
  /* --> Hur få till att bilderna blir färg vid fokus??? */
  main wrcontent img:focus {
	-webkit-filter: none;
	filter: none;
  }
  main wrcontent .text-block {
    position: absolute;
    bottom: 0.5em;
    left: 50%;
    transform: translate(-50%);
    padding: 0.5em;
    background-color: white;
    opacity: 0.9;
    width: 90%;
    color:#222;
    font-size: 80%;
  }
  main wrcontent :hover {
    text-decoration-color: white;
    text-decoration: none;
  }

  /* PUFFAR i main-ytan för bilder, länkas till egen bild för zoom. */
  main wrapper-b {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: auto auto auto auto auto;
    max-width: 1100px;
    margin: 1em 0;
  }
  main wrapper-b wrcontent {
    display: grid;
    position: relative;
    width: 97%;
    text-align: center;
    color: white !important;
    margin-bottom: 0.5em;
  }
  main wrapper-b wrcontent a:link {
    text-decoration: none !important;
  }
  main wrapper-b wrcontent img {
    width: 100% !important;
    -webkit-filter: none;
    filter: none;
    z-index: -1;
  }
  main wrapper-b wrcontent h3 {
    color:#222;
  }
  main wrapper-b wrcontent h3 a:link {
    text-decoration: underline;
  }
  main wrapper-b wrcontent h3:hover {
    /*text-decoration-color: white;*/
    text-decoration: underline;
  }
  main wrapper-b wrcontent h3:focus {
    text-decoration: underline;
  }

  /* END of PUFFAR i main... */

    /* Textpuffar på BLOGGSIDAN som även har liten text med ingress i wrappern. */
  main wrapper-t {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: auto auto auto;
    margin: 1em 0 0 0;
  }
  main wrapper-t wrcontent {
    display: grid;
    grid-template-columns: auto;
    text-align: center;
    height: auto;
    padding: 0.1em;
    margin-bottom: 0.7em;
  }
  main wrapper-t div {
    text-align: left;
    line-height: 1.5em;
    font-size: 70%;
    color:#414141;
    padding: 0 2em;
    text-decoration: none;
  }
  main wrapper-t a:link {
    text-decoration: none;
  }
  main wrapper-t div:hover {
    color:#414141;
    text-decoration: none;
  }
  main wrapper-t wrcontent p {
    padding: 0.7em 2em;
    cursor: pointer;
    border: 2px dotted lightgray;
    text-decoration: underline;
  }
  main wrapper-t wrcontent p:hover {
    padding: 0.7em 2em;
    background-color: #f1f1f1;
    color: #393939 !important;
    text-decoration: underline;
  }
    /* Textpuffar på STARTSIDAN som bara har text i wrappern. */
  main wrapper-s {
    display: grid;
    justify-content: space-evenly;
    grid-template-columns: auto auto auto;
    margin: 0.5em 0 1em 0;
  }
  main wrapper-s wrcontent {
    display: grid;
    grid-template-columns: auto;
    text-align: center;
    height: auto;
    padding: 1em;
  }
  main wrapper-s wrcontent p {
    padding: 0.7em 3em;
    cursor: pointer;
    border: 3px dotted lightgray;
  }
  main wrapper-s wrcontent p:hover {
    padding: 0.7em 3em;
    background-color: #f1f1f1;
    color: #393939 !important;
    text-decoration: underline;
  }
  /* 404-felsida */
  .e-page {
    /*padding: 2em;
    margin: 2em;
    border: 2px dotted #6d6d6d;*/
    max-width: 700px;
  }
  .e-page p {
    margin-top: 1em;
  }

/* Footer */
  footer {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 2em;
    background-image: url("logos/cameraikon.svg");
    background-position: left 1em top 1em;
    background-size: 7%;
    background-repeat: no-repeat;
    background-color: #222;
  }
  footer a:hover {
    background-image: url("logos/cameraikon.svg");
    background-position: right 1em top 1em;
    background-size: 7%;
    background-repeat: no-repeat;
    background-color: #333;
    text-decoration: underline;
    color: white;
  }
      /* FB-logga */
  footer left {
    display: flex;
    flex-direction: column;
    padding-top: 1em;
  }
  footer left img {
    height: 2em;
  }
      /* Texten Åström på Facebook */
  footer right {
    display: flex;
    flex-direction: column;
  }
  footer right p {
    color: steelblue;
    font-size: 100%;
    text-align: center;
    padding: 0.5em 0 0.5em 0;
  }

  copyright {
    display: flex;
    flex-direction: column;
    min-height: 1em;
    text-align: center;
    background-color: #414141;
    padding: 0;
    margin-bottom: 1em;
  }
  copyright p {
    color: white;
    font-size: 90%;
    padding: 0.5em 0 0.5em 0;
  }
  w-host {
	display: flex;
    flex-direction: column;
    min-height: 1em;
    text-align: center;
    background-color: #272727;
    padding: 1em;
    margin-bottom: 1em;
  }
  w-host p {
	color: white;
	font-size: 85%;
  }
  bmenu { /* Menyn i sidfoten */
    display: grid;
    grid-template-columns: auto;
    background-color: lightgrey;
    padding: 1em 2em 4em 2em;
    color: #333;
  }
  bmenu p {
    font-size: 85%;
    font-weight: bold;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #444;
    margin-bottom: -0.5em;
  }
  bmenu ul {
    padding: 0;
  }
  bmenu li {
    display: flex;
    font-size: 85%;
    color: #333 !important;
    margin-bottom: -0.5em;
  }
  bmenu li a {
    color: #777 !important;
  }
  bmenu li a:hover {
    color: #444 !important;
  }

/* LIGHTBOX - Modal Image Gallery */
  .row > .column {
    padding: 0.2em;
  }
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
    /* Fem bilder i bredd. Håller mig till det, annars ändra width. */
  .column {
    float: left;
    width: 20%;
  }
    /* The Modal background */
  .modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 40px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
  }
      /* Modal Content */
  .modal-content {
    position: relative;
    margin: auto;
    padding: 0;
    width: 90%;
    max-width: 1500px;
  }
      /* The Close Button */
  .close {
    color: white;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 35px;
    font-weight: bold;
  }
  .close:hover,
  .close:focus {
    color: #999;
    text-decoration: none;
    cursor: pointer;
  }
  .mySlides {
    display: none;
  }
  .cursor {
    cursor: pointer;
  }
    /* Next & previous buttons */
  .prev,
  .next {
    cursor: pointer;
    position: absolute;
    top: 25%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 20px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
  }
    /* Position the "next button" to the right */
  .next {
    right: 0;
    border-radius: 3px 0 0 3px;
  }
    /* On hover, add a black background color with a little bit see-through */
  .prev:hover,
  .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: white !important;
    text-decoration: none !important;
  }
    /* Number text (1/3 etc) */
  .numbertext {
    color: #f2f2f2;
    font-size: 20px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
  }
  img {
    margin-bottom: -4px;
  }

  .demo {
    opacity: 0.6;
  }
  .active,
  .demo:hover {
    opacity: 1;
  }
  img.hover-shadow {
    transition: 0.3s;
  }
  .hover-shadow:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
/* END of Lightbox */

/* --> SLIDESHOW GALLERY <-- */

/* Få till att kunna bläddra med piltangenterna. Det vore toppen! */
/* Få till fokus... */

/* Position the image container (needed to position the left and right arrows) */
.l-image,
.container {
  position: relative;
}

/* Hide the images by default */
/*.mySlide {
  display: none;
}*/

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.pre,
.nex {
  cursor: pointer;
  position: absolute;
  top: 0;
  bottom: 0;
  /*width: auto;*/
  /*padding:125px 15px;*/
  /*color: white;
  font-weight: bold;
  font-size: 25px;*/
  /*border-radius: 0;*/
  user-select: none;
  -webkit-user-select: none;
}

.pre {
	background-image: url("logos/arrowleft.svg");
	background-repeat: no-repeat;
	background-position: center center;
	padding: 0 30px;
	opacity: 0.7;
}

/* Position the "next button" to the right */
.nex {
	right: 0;
	background-image: url("logos/arrowright.svg");
	background-repeat: no-repeat;
	background-position: center center;
	padding: 0 30px;
	opacity: 0.7;
}

/* On hover, add a black background color with a little bit see-through */
.pre:hover,
.nex:hover {
  background-color: rgba(0, 0, 0, 0.2);
  /*color: white !important;
  text-decoration: none !important;*/
  opacity: 1;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 14px;
  padding: 12px;
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50px;
}

/* Container for image text */
/*.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}*/

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Five columns side by side */
.column {
  float: left;
  width: 20%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

/* END of Slideshow Gallery */

/* h1 ÅSTRÖM på startsidan */
  #headline h1 {
    color: white;
    font-size: 0.1em;
  }
/* PENNA */
  #pencil h2 {
    float: left;
    margin-right: 1em;
  }
  #pencil img {
    margin-top: 1em;
    padding-top: 0.3em;
    width: 15%;
  }
/* KAMERA */
  #camera img {
    max-width: 10%;
    filter:invert(100%);
  }

/* OM MIG Enstaka bilder. Kan också förekomma på andra sidor, ex. blogg. */
.oneshot {
  width: 100%;
  margin: 1em 0 1em 0;
}
.oneshot img {
  width: 60% !important;
  transition: 0.3s;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  z-index: -1;
}
.oneshot img:hover {
  -webkit-filter: none; /* Safari 6.0 - 9.0 */
  filter: none;
}
.oneshot p {
  font-size: 70%;
}

/* TILL TOPPEN - Scroll to top button */
  #myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: cornflowerblue;
    color: white;
    cursor: pointer;
    padding: 15px 40px 15px 15px;
    border-radius: 10px;
    /* Eventuellt göra en ny bild för till toppen - endast pil upp... Göra den i någon färg och lägga till filter:invert:(100%) i css:en för dark mode. */
    background-image: url("logos/arrowtop.svg");
    background-position: right 0.3em center;
    background-size: 20%;
    background-repeat: no-repeat;
  }
  #myBtn:hover {
    background-color: #555;
  }  

/* BRYTPUNKTER */
  @media (max-width: 700px) {
    header {
      height: 7em !important;
    }
    header img {
      /*width: 65%;*/
	  width: 50%;
    }
    main {
      padding: 0.7em !important;
      width: 97%;
      font-size: 90%;
    }
    main wrapper {
      grid-template-columns: auto auto;
    }
    main wrapper-t {
      grid-template-columns: auto;
    }
    main wrapper-t wrcontent p {
      padding: 0.7em 0.3em !important;
    }
    main wrapper-s {
      grid-template-columns: auto;
    }
    main wrapper-s wrcontent {
      /*margin-bottom: 1em;*/
      padding: 0.3em !important;
    }
    main wrapper-s wrcontent p {
      padding: 0.7em 5em !important;
    }
    main wrapper-b {
      grid-template-columns: auto auto;
    }
    footer {
      background-size: 15%;
    }
    footer a:hover {
      background-size: 15%;
    }
    .column {
      float: left !important;
      width: 20%;
      padding: 0 0.15em;
    }
    #imgtext {
      font-size: 80%;
    }
    .closebtn {
      font-size: 35px;
    }
    .row > .column {/* LIGHTBOX - Modal Image Gallery */
      padding: 0.1em;
    }
    .column-1 { /* BILDRAD */
      /*background-color: #141414;*/
      margin: 1.5em 0 1em 0;
      /*padding: 1em 1em 0 1em;*/
    }
    .column-1 img {
      /*border: 2px solid grey;*/
      /*padding: 0 0 2em 0;*/
      /*padding: 0.5em;*/
      margin-bottom: 1em;
    }
    #pencil img{ /* PENNA */
      margin-top: 1em;
      padding-top: 0.5em;
      width: 20%;
    }
	/* Slideshow Gallery */
	.pre {
		padding: 0 15px;
	}

	/* Position the "next button" to the right */
	.nex {
		padding: 0 15px;
	}
  }
  @media (min-width: 1700px) {
    header img {
      width: 20%;
    }
    footer {
      background-size: 3%;
    }
    footer a:hover {
      background-size: 3%;
    }
  }

  /* DARK MODE - från useit https://useit.se/aktuellt/goer-din-webbplats-mer-tillgaenglig-med-personalisering/ */
  /* Det funkar men jag har stängt av den tillfälligt, vissa justeringar behöver göras. Exempelvis - pennan på startsidan syns inte i dark mode medan H1:an på start som är mini syns. */
  @media (prefers-color-scheme: dark) {
    /* Din CSS-kod för mörkt läge här  */
    body {
      background-color: #000;
      color: #fff;
    }
    h1 {
      color: #fff;
    }
    /* h1 ÅSTRÖM på startsidan */
    #headline h1 {
      color: #000;
      /*color: white;*/
      font-size: 0.1em;
    }
    /* PENNA */
    #pencil img {
      margin-top: 1em;
      padding-top: 0.3em;
      width: 15%;
      filter:invert(100%);
    }
    /* KAMERA */
    #camera img {
      filter: none;
    }
    /* Punktlista */
    ul.b {
      color: #fff;
    }

    /* Textpuffar på STARTSIDAN som bara har text i wrappern. */
    main wrapper-s wrcontent p {
      padding: 0.7em 3em;
      cursor: pointer;
      border: 3px dotted lightgray;
    }
    main wrapper-s wrcontent p:hover {
      padding: 0.7em 3em;
      background-color: #272727;
      color: #fff !important;
      text-decoration: underline;
    }

    /* Blogg-sida mindre brödtext under årtalen. */
    main wrapper-t div {
      text-align: left;
      line-height: 1.5em;
      font-size: 70%;
      color: #fff;
      padding: 0 2em;
      text-decoration: none;
    }
    main wrapper-t a:link {
      text-decoration: none;
    }
    main wrapper-t :hover {
      background-color: #272727;
      color:#fff !important;
      text-decoration: none;
    }
    main wrapper-t wrcontent p:hover {
      background-color: #272727;
      color: #fff !important;
      text-decoration: underline;
    }
    /* Fokusering vid tab-navigering. */
    :focus {
      background-color: #272727;
      border: none !important;
      outline: 2px solid #b7b7b7 !important;
      outline-offset: 3px !important;
    }
    input:focus {
      background-color: #272727;
      border: none !important;
      outline: 2px solid #b7b7b7 !important;
      outline-offset: 3px !important;
    }
    a:focus {
      background-color: #272727;
      border: none !important;
      outline: 2px solid #b7b7b7 !important;
      outline-offset: 3px !important;
    }
  }
  
  @media (prefers-color-scheme: light) {
    /* Din CSS-kod för ljust läge här -- Den har jag ovanför allt från början. */
    /*body {
      background-color: #fff;
      color: #000;
    }*/
  }