@font-face {
  font-family: ms gothic;
  src: url(/MS Gothic.woff)
}

body{
  font-family: ms gothic, helvetica, sans-serif;
  font-size: 14px;
  color: black;
}

::selection {
  background: #7DB3B0;
}

main{
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  column-gap: 2em;
}

section{
  display: flex;
  flex-flow: row wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: .5em 0;
  border-left: solid 2px;
}

#lastfm{
  margin-top: 1em;
  width: 15em;
}

article{
  max-width: 12em;
  padding: .5em;
  margin-left: .5em;
  border: dotted 1px;
}

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul{
  font-weight: bold;
}

li{
  margin-left: .5em;
  list-style-type: circle;
}

.date{
  list-style-type: none;
}

details p{
  margin-left: .5em;
  margin-top: 0;
}

details[open] summary{
  color: #697C78;
}

h2{
  background-color: #697C78;
  padding: .2em;
  width: 100%;
  color: white;
  width: fit-content;
}

h3{
  background-color: #C6D5CD;
  padding: .1em;
  margin-bottom: 0;
}

blockquote{
  padding: 1em;
  width: fit-content;
  font-weight: bold;
  border-left: solid 2px;
}

a{
  color: black;
}

a:hover{
  color: #697C78;
  
}