@font-face {
    font-family: "Concert One";
    src: url("fonts/ConcertOne-Regular.ttf") format("truetype");
}

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

::selection{
  background:peachpuff;
  color:darkslateblue;
}

body {
    background-image: linear-gradient(darkslateblue,lightsalmon,lightgoldenrodyellow);
    background-repeat:no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

#content {
    background-color: linen;
	font-family: "verdana", "sans-serif";
    font-size: 16pt;
    color: black;
	max-width: 900px;
    height: inherit;
	margin: -5% auto;
	padding: 5%;
	position: relative;
}

header {
	text-align: center;
    border-bottom-style: dotted;
    border-bottom-color: thistle;
}

h2 {
    font-family: "Concert One", "sans-serif";
    font-size: 48pt;
    text-align: center;
    font-variant:small-caps;
}

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

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

#block {
    background-color: palegoldenrod;
    padding: 5px 20px;
    border-radius: 10px;
}

footer {
    border-top-style: dotted;
    border-top-color: thistle;
}

/* FOR MULTIPLE RESPONSIVE IMAGES */

.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%;
    }}