html {
    scrollbar-color: burlywood #eeeeee;
    scrollbar-width: thin;
}

img { max-width:100%; height:auto; }

::selection{
  background:gainsboro;
  color:slategray;
}

body {
    background-color: slategray;
    background-image: url(background-halfflower.png);
    background-repeat: repeat;
    background-position: center;
    background-attachment: fixed;
    background-blend-mode: soft-light;
}

#content {
    background-color: linen;
	font-family: serif;
    font-size: 16pt;
    color: darkslategrey;
	max-width: 750px;
    height: inherit;
	margin: auto;
	padding: 5%;
    border-style: solid;
    border-color: burlywood;
    border-width: thick;
	position: relative;
}

header {
	font-family: Georgia, serif;
    text-align: center;
    border-bottom-style: dashed;
    border-bottom-color: burlywood;
    margin-top: -8%;
}

footer {
    text-align: center;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 14pt;
    border-top-style: dashed;
    border-color: burlywood;
    padding-top: 2%;
}

#imagedesc {
    background-color: wheat;
    font-style: italic;
    margin: 5% 9%;
    padding: 5%;
    border-radius: 10px;
    font-size: 15pt;
}

h1 {
    font-family: Georgia, serif;
    font-size: 32pt;
}

h2 {
    font-family: Georgia, serif;
    font-size: 16pt;
    font-style: italic;
}

a:link, a:visited {
  color: slategray;
}

a:hover, a:active {
  color: burlywood;
}

.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 30%;
  max-width: 33%;
  padding: 0 4px;
}

.columntwo {
  flex: 45%;
  max-width: 48%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 750px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 750px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}

@media only screen and (max-width: 750px) {
                #flex {
                    flex-wrap: wrap;
                }

                aside {
                    width: 100%;
    }}

@media (prefers-color-scheme:dark) {
  #content {
    background-color:darkslategray;
    color:linen;
  }

  a:link, a:visited {
    color:burlywood;
  }

  a:hover {
    color:gainsboro;
  }

  #imagedesc {
    background-color:rgb(0,0,0,0.4);
  }
}