/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


body {
  color: lightyellow;
  font-family: "EB Garamond", garamond, serif;
  margin: 50px auto 50px auto;

  background-size: cover;
  background-image: url(Inside_the_Library_1.png);
  background-color: #2A7B9B;
  background-attachment: fixed;
}

.headercontainer{
  display: flex;
  flex-flow: nowrap column;
  justify-content: center;
  margin: auto;
  width: fit-content;
}

.header {
  display: block;
  text-align: center;
  overflow: hidden;
  line-height: 0;
  background-color: rgba(13, 12, 12, 0.75);
  padding: 0 15pt;
  border: 1pt solid sienna;
  width: fit-content;
  margin: auto auto 5pt;
}

.header h1 {
  font-size: 400%;
}

.subtitle {
  letter-spacing: 0.65pt;
}

.navandmain{
  display: flex;
  margin: 5pt auto;
  justify-content: center;
  width: 60%;
}

.labels{
  display: flex;
  flex-flow: nowrap column;
  border: 1pt solid sienna;
  background: rgba(13, 12, 12, 0.75);
  margin: 0;
  padding: 0;
  text-align: center;
  justify-content: center;
}

.maincontainer {
  display: flex;
  flex-flow: column nowrap;
  margin: 0 0 0 10pt;
}

.mainstuff {
  margin: 0 0 10pt;
  padding: auto;
  width: auto;
  overflow: auto;
  line-height: 1.25;
  border: 1pt solid sienna;
  background: rgba(13, 12, 12, 0.75);
}

.mainstuff h3{
  margin: 0;
  padding: 0;
  text-align: center;
  border-bottom: 1pt solid sienna;
}

.textcontent {
  margin: auto 30pt;
  text-align: center;
}

.textcontentalt {
  margin: auto 30pt;
  padding: auto 30pt;
  justify-content: flex-start;
  text-align: left;
  flex-flow: nowrap column;
}

.lists {
  display: flex;
  flex-flow: nowrap column;
  margin: auto auto auto 10pt;
  padding: 5pt;
}

.navigation ul{
  list-style-type: none;
  margin: auto;
  padding: 0;
  width: 150pt;
  background: rgba(13, 12, 12, 0.75);
  border: 1pt solid sienna;
  text-align: center;
  position: sticky;
  top: 30pt;
}

.navigation li{
  border-bottom: 1pt solid sienna;
}

.navigation li a{
  display: block;
  padding: 8px 16px;
  border-bottom: 1pt solid sienna;
  text-decoration: none;
  background: transparent;
  background: linear-gradient(270deg, rgba(13, 12, 12, 0) 60%, rgba(11, 112, 70, 0.75) 100%);
}

.navigation li a:hover {
  background-color: #555555;
}

.navigation li:last-child {
  border-bottom: none;
}

.navigation h3{
  margin: 0;
  padding: 0;
}

span {
    color: cyan;
}

a:link {
    color: mediumspringgreen;
}

a:visited {
    color: mediumseagreen;
}

a:hover {
    color: chartreuse;
}

a:active {
    color: palegreen;
}

.tertiarycontainer{
  display: flex;
  flex-flow: column nowrap;
  margin: 0 0 0 10pt;
  align-self: flex-start;
}

.notice {
    text-align: center;
    overflow: auto;
    margin: auto auto 10pt;
    padding: 5pt;
    max-width: 250px;
    height: fit-content;
    color: lightpink;
    background-color: navy;
    border-style: dashed;
    border-color: hotpink;
    border-width: 2px;
}

.buttons {
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.artcontent {
  margin: auto;
  padding: 10pt;
  text-align: center;
}

.artcontent summary::marker,
:is(::-webkit-details-marker){
  content: "";
}

.artcontent summary{
  width:600px;
  min-width: 70%;
  max-width: 70%;
  padding: 5pt;
  margin: auto auto 5pt;
  border: 1pt solid sienna;
  cursor:pointer
}

.artcontent img{
  border: 1pt solid sienna;
}