/* * Denna CSS har jag skapat själv för att fullgöra uppgiften. * Se även noteringarna i html-head. */
 * {
     box-sizing: border-box;
     font-size: 1em;
     font-family: 'Lora', serif;
     /*hyphens: auto;*/
}
 h1, h2, h3 {
     color: #326B3D;
     font-family: 'Krona One', sans-serif;
}
 h1 {
     font-size: 1.5em;
}
 h2 {
     font-size: 1.35em;
}
 h3 {
     font-size: 1.15em;
}
 a[href]{
     text-decoration: none;
     color: #D49400;
}
 body{
     background-color: #326B3D;
     min-width: 300px;
}
 #spindel{
    /*tja...jag kom inte på någon bättre alternativ till bakrundsbild, men visst är den gullig ;
    ) */
     background-image: url(img/spindel.png);
     background-size: 90px;
     background-repeat: no-repeat;
     background-position: left bottom;
}
 body header, main, body footer {
     background-color: white;
     max-width: 70%;
     margin: 0 auto;
     padding: 5px 20px;
}
 body header{
     border-top: 3px solid #326B3D;
     border-bottom: 1px solid #326B3D;
}
 body footer {
     font-size: 0.95em;
     display: flex;
     min-height: auto;
     flex-flow: row wrap;
     color: #8C7965;
     border-radius: 0 0 10px 10px;
     border-top: 1px solid #326B3D;
     margin-bottom: 5%;
}
 header ul {
     display: flex;
     min-height: auto;
     flex-flow: row wrap;
     padding: 0;
     margin: 0;
}
 header li {
     list-style:none;
     padding: 0 15px 0 5px;
     margin: 2px 0;
}
 header a:link, header a:visited {
     display: inline-block;
     color: white;
     padding: 5px 10px;
     text-decoration: none;
     background-color: #CD4CFF;
}
 header a:hover, header a:active {
     background-color: #8712B2;
     color: #D49400;
}
 footer li a:link, footer li a:visited, a.epost{
     color: #8C7965;
     text-decoration: none;
}
 footer ul{
     padding: 0;
     margin: 0;
}
 footer li {
     list-style:none;
     padding-bottom: 2px;
}
 footer section{
     flex: 1 1 33%;
}
 footer h2{
     font-size: 0.95em;
}
 main > div{
     display: flex;
     min-height: auto;
     flex-flow: row wrap;
}
 main > div section{
     flex-grow: 1;
     flex-shrink: 1;
}
 .bild{
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 100%;
     text-align: center;
}
 img {
     border: 1px solid lightgrey;
     border-radius: 5px;
     padding: 5px;
     width: 75%;
     max-width: 250px;
     margin:0px auto;
     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}
 .bild figcaption{
     margin-top: 5px;
     font-size: 0.85em;
     font-style: italic;
}
 #intro {
     flex-basis: 100%;
     columns: 200px 3;
}
 .steg {
     flex: 0 0 30%;
     min-height: 50px;
     border: 1px solid #326B3D;
     border-radius: 5px;
     background-color: #19FF9C;
     padding: 3px;
     margin: 5px;
     vertical-align: text-top;
}
 .steg H2{
     /*margin: 3px 0;*/
     color: #8712B2;
     font-family: 'Coiny', cursive;
     font-size: 1em;
     display: inline;
}
 .steg p{
     /*margin: 0;*/
     display: inline;
}
 .codeContainer pre{
     margin: 1px 1px 1px 1px;
     padding: 15px 30px;
     min-height: 150px;
}
 .code{
     flex-basis: 100%;
     min-height: 10px;
     vertical-align: text-top;
     overflow-x: auto;
     tab-size: 3;
}
 code{
     font-family: 'Roboto Mono', monospace;
     font-size: 1em;
     padding: 0;
     /*hyphens: none;*/
}
 .codeContainer figure{
     border: 1px solid #326B3D;
     border-radius: 5px;
     margin: 0;
     padding: 0;
}
 .codeContainer figcaption {
     background-color: #19FF9C;
     padding: 0 5px;
     border-bottom: 1px solid #326B3D;
     border-radius: 5px 5px 0 0;
     margin: 0.5px 0.5px;
}
 .c{
     color: gray;
}
 .p{
     color: blue;
}
 .k{
     color: aqua;
}
 .v{
     color: orange;
}
 .s{
     color: green;
}
 @media only screen and (max-width: 650px) {
     body {
         background-size: 10%;
    }
     header ul{
         flex-flow: column wrap;
    }
     main > div{
         flex-flow: column wrap;
    }
     body footer {
         flex-flow: column wrap;
    }
    /*Här har jag försökt att även hantera buggigheten som jag sett när jag använt Google Chrome Toggle device toolbar (Ctrl+Shift+M) för att kontrollera layoutens responsiveness.*/
     #intro {
         column-count:1;
         flex-basis: 100%;
         min-height: auto;
    }
     .bild{
         flex-basis: 100%;
         min-height: auto;
    }
}