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;
                margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        
      }

      img {
        width: 100%;
        height: 100%;
      }

        article:hover ~ .bg-fade { animation: pulse 7s infinite; }

      .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 {
        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;

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

      h2 {
        font-variant: small-caps;
        font-style: italic;
        text-align: center;
        letter-spacing: 1.3em;
        word-spacing:2em;
        color: #C9D2D4;
        background-color: #000000c1;
        width:fit-content;
        margin:auto;
        margin-bottom: 20px;

      }
      
      section.box1 {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        word-spacing: auto;
        margin:auto;
        text-align: center;
        background-color: #00000058;
        width: fit-content;
        height:fit-content;

      }

      section.topbar {
        display:grid;
        grid-template-columns: .15fr 1fr .15fr;
        padding: 0%;
        width:80%;
        background-color: transparent;
        border:none;

      }

/*one*/

      .intotheworm {
        font-variant: small-caps;
        background-image: url("/img/avatars/spider.png");
        background-size: cover;
        background-position: center;
        border:#030105 solid 40px;
        background-color: #16101cb3;
        text-align: center;
        font-style: italic;
        margin:auto;
        position:relative;
        border-radius:555px;
        z-index: 1;


        transition: opacity 7s ease, scale 20s ease;
      }

      .intotheworm::before {
        content: "";
        position:absolute;
        inset:0;
        background: #000000;
        opacity: 0.7;
        border-radius: 555px;
        z-index: 0;
        pointer-events: none;
        transition: opacity 3s ease;
      }

      .intotheworm:has(.nightbanner:hover)::before {
        opacity: 0;
        transition: opacity 4s ease;
      }

      .intotheworm > * {
        position: relative;
        z-index: 1;
      }

      @keyframes shrink {
        from { scale: 100%; }
        to { scale: 1%; }
      }

      .intotheworm:hover {
        opacity: 1;
        animation: shrink 30s, spinleft 60s;
      }

      .intotheworm:hover ~ .bg-fade {
        opacity: .8;
      }
      
      .intotheworm:has(.nightbanner:hover) ~ .bg-fade {
        opacity: 0;
        transition:opacity 7s ease-in;
      }
    

      .nightwrap {
        position: relative;
        width: 50%;
        margin: auto;
        border-radius: 555px;
        border: black solid 5px;
        overflow: hidden;
        z-index: 10;

        transition: scale 20s ease-in, rotate 20s ease-in;

      }

      @keyframes spin {
        from { rotate: 0deg; }
        to   { rotate: 36000deg; }
      }

      @keyframes spinleft {
        from { rotate: 0deg; }
        to   { rotate: -360deg; }
      }

      @keyframes grow {
        from  { scale: 100%; }
        to { scale: 10000%; }
      }

      .nightwrap:hover {
        animation: spin 60s ease-in forwards;
        scale: 6000%;
      }

      .nightimg {
        position: relative;
        display: block;
        width: 100%;
        opacity: 100%;
      }

      .nightcover {
        position: absolute;
        inset: 0;
        background: url("/img/carrd/night.jpg") center/cover;
        clip-path: circle(0% at center);
        transition: clip-path 1.5s ease;
      }

      .nightwrap:hover .nightcover {
        clip-path: circle(75% at center);
      }
/*two*/

      .parerbogaowl {
        border-radius: 555%;
      }

      .parerbogaowl::before {
        content:"";
        background-color: #00000058;

      }

      a {
       color:#eaeaeab4;
       text-decoration: none;
       margin: auto;
      }





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

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

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