html,
body {
  height: 100%;
}

body {
  background-image:
    radial-gradient(circle at right bottom,

      rgb(255, 255, 255) 45%,
      rgba(255, 255, 255, 0) 100%),
    url("/images/cherry.jpeg");



  background-size: contain;
  background-position: left;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Identification */
.identity {
  grid-area: identity;
}

.showcase {
  grid-area: showcase;
}

.sidebar {
  grid-area: sidebar;
}

.narrative {
  grid-area: narrative;
}

.information-displayed {
  grid-area:body;

}

/* for main page */

.page {
  min-height: 0;
  align-content: center;
  border: double 5px rgba(0, 0, 0);
  border-radius:25px;
}

/* frame image */

.page {
  display: grid;

  grid-template-columns:
    minmax(180px, 220px) minmax(0, 1fr) minmax(260px, 300px);

  grid-template-rows:
    auto
    /* identity */
    auto
    /* showcase */
    minmax(0,1fr)
    /* body */
    auto;
  /* footer */

  grid-template-areas:
    "identity identity identity"
    ".        showcase sidebar"
    ".        body     sidebar"
    ".        narrative sidebar";

  gap: 15px;

  max-width: 1400px;
  margin: 20px auto;
  padding: 32px;
}

@media (max-width: 900px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "identity"
      "showcase"
      "body"
      "sidebar"
      "narrative";
  }
}

.information-displayed {
  grid-area:body;
  display: grid;
  overflow-y:auto;


  gap: 24px;
  padding: 24px;

  background:
    linear-gradient(rgba(255, 255, 255, 0.08),
      rgba(255, 255, 255, 0.02));

  backdrop-filter: blur(16px) saturate(110%);
  -webkit-backdrop-filter: blur(16px) saturate(110%);

  outline: 1px solid rgba(0, 0, 0);
}


.information-displayed p {
  max-width: 95ch;
  line-height: 1.6;
}

.frame {
  padding: 12px;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(25px);
  outline: 1px solid rgba(0, 0, 0);
  border-radius: 1px;
}

.canvas {
  position: relative;
  background: rgb(0, 0, 0, 0.45);
  padding: 16px;
  border-radius: 1px;
  overflow: hidden;
  outline: 1px solid rgba(0, 0, 0);

}

.overlay-text {
  position: absolute;
  bottom: 12px;
  left: 12px;
  max-width: 60%;
  opacity: 100;
}

/* lists */

.link-list {
  list-style: none;
  padding: 12px;
  opacity: 100;
  outline: 1px solid rgba(0,0,0);
}


.link-list li {
  padding: 6px 0;
  opacity: 100;
}


/* sidebar*/
.panel {
  display:grid;
  align-self: stretch;
  position: relative;
  padding: 1px 16px 16px;
  outline: .5px solid rgba(0, 0, 0.1);
  
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2);
  border-radius: 1px;
}

.sectioned-panel{
  display: grid;
  align-self: stretch;
  position: relative;
  padding: 1px 16px 16px;
  outline: .5px solid rgba(0, 0, 0);


  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2);
  border-radius: 1px;  
}


.sidebar {
  display:grid;
  align-self:stretch;

  gap: 10px; 

}

.sectiontitle{
  display:grid;
  grid-template-columns: auto,1fr,auto;
  border: double 4px rgba(0, 0, 0,0.1);
  outline: 1px solid rgba(0,0,0);

}

.latest-panel{
  display: grid;
  position: relative;
  resize: none;
} 

.webring-copy{
  display: grid
}

/* grids n stuff (for sidebar)*/


.username{
  display: grid;
  outline: 1px rgba(0,0,0);

}

.status{
  display: grid;
  outline: 1px rgba(0,0,0);

}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 10px;
  margin: 12px 1px;


}

.id-grid {
  display: grid;
  grid-template-columns: 85px auto auto;
  grid-template-rows: auto;
 
  align-items: center;
  margin:0.2px;
  max-height: 150px;

  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(34px);
  padding: 15px;
  border-radius: 1px;
  outline: 1px solid rgba(0, 0, 0)
}



.identity {
  display:grid;
  padding: 12px;
  background: rgb(0, 0, 0, 0.15);
  backdrop-filter: blur(25px);
  outline: 1px solid rgba(0, 0, 0);
}


/* footer */

.muted {
  font-size: 0.9rem;
}

.narrative {
  align-self: stretch;
}

.narrative .panel {
  opacity: 0.85;
  font-size: 0.9rem;

}

.textarea{
  max-width:215px;
  max-height:550; 
  box-sizing: border-box;
  resize: none;
}

/*

.page > * {
  outline: 1px solid rgba(99, 2, 2, 0.3);
}

[id$="grid"], .icon-grid {
  outline: 1px solid rgba(0,0,255,0.3);
}

.page > * {
  isolation: isolate;
}

*/