html{
        color: #ffffff;
        font-family: serif;
        font-size: 14px;
        margin:auto;
      }
      
      body {
        background-image:url("/img/banner.jpg");
        background-size: cover;
        background-position: top;
        background-repeat: no-repeat;
        background-attachment:fixed;
      }

      .bg-fade {
        position: fixed;
        inset: 0;
        background: black;
        opacity: 1;
        transition: opacity 2s ease;
        pointer-events: none;
        z-index: 0;
      }

      header, h2 {
        position: relative;
        z-index: 1;
        padding-left: 1%;
        padding-right: .24%;
        padding-top: .5%;
  
        padding-bottom: .001%;
      }

      main {
        display: grid;
        grid-template-rows: auto 1fr 1fr;
        height:auto;
        margin: auto;

      }
    
      header {
        display:grid;
        font-family: serif;
        text-align: center;
        letter-spacing: 1.3em;
        word-spacing:2em;
        font-family: serif;
        font-variant: small-caps;
        color: #FCFFD9;
        background-color: #000000b4;
        width:fit-content;
        margin:auto;
        margin-bottom: 20px;  

        
      }

      article {
        position:relative;
        z-index: 10;
        font-family: serif;
        text-align: center;
        letter-spacing: 1.3em;
        word-spacing:2em;
        font-family: serif;
        font-variant: small-caps;
        color: #FCFFD9;
        background-color: #000000b4;
        width:fit-content;
        margin:auto;
        margin-bottom: 20px;  

        padding: 2%;
      }

      section {
        font-family: serif;
        text-align: left;
        letter-spacing: .2em;
        word-spacing:1em;
        font-family: serif;
        font-variant: normal;
        color: #FCFFD9;
        border:#00000058 solid 2px;
        background-color: #000000b3;
        width:fit-content;
        margin:auto;
        margin-bottom: 20px;  

        padding: 5%;
      }
      a {
       color:#eaeaeab4;
       display: inline-block;
       text-decoration: none;
       transition: .4s ease;
      }

      a:hover {
        scale:105%;
      }

      a:hover ~ .bg-fade {
        opacity: 70%;
      }



@keyframes pulse {
  0% { opacity: 1};
  25%{opacity:.9};
  100%{opacity:1};
}

.pen-logo {
  width:auto; 
  height:auto; 
  margin:auto;
}

summary {
  cursor: pointer;
  font-variant: small-caps;
  font-weight: bold;
}