html {
  font-size: 1.5em;
}

body {
  margin: 0;
  height: 100svh;
}

.root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.header {
  /* background-color: brown; */

  /* background: linear-gradient(0deg, #442F28 0%, #775344 100%); */
  background: linear-gradient(0deg, #442F28 0%, #69483b 100%);
  /* padding: 0.5rem; */
  /* font-size: 2rem; */
  font-family: sans-serif;
  color: #FDFCFC;
  text-shadow: 0 -2px 1px #1E1110;
  font-weight: bold;
  text-align: center;
  /* font : 100%/1.5 sans-serif; */
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;

  box-shadow: 0px 0px 4px black;
  z-index: 2000;
}

/* See https://codepen.io/jgentes/pen/nrWOmJ */

.content {
  background-color: yellow;
  flex: auto;

  padding : 1rem;
  background : #d2d4dd;
  background-image : linear-gradient(90deg, transparent 30%, rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.02) 55%, transparent 70%);
  background-size : 8px 8px;
  font : 100%/1.5 sans-serif;
  text-shadow : 0 1px 1px white;

  overflow: auto;

  /* background: linear-gradient(180deg, #775344 0%, #775344 2.5rem, #442F28 100%); */
  background: linear-gradient(180deg, #634437 0%, #442F28 100%);
}

.footer {
  background-color: blue;
  display: flex;
  align-items: center;
  box-shadow: 0px 0px 4px 0px black;

  min-height: 2.5rem;

  z-index: 1000;
}

.footer button {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: auto;

  background: linear-gradient(180deg, rgba(69,69,69,1) 0%, rgba(35,35,35,1) 100%);
  color: #BDBDBD;
  /* border: none; */
  border: 1px solid #303030;
  padding: 0;
  box-shadow: inset -1px 1px #4F4F4F;
  font-size: 0.5rem;
  font-weight: bold;

  width: 500px;

  height: 100%;
  justify-content: center;
}

.footer button :first-child {
  font-size: 1rem;
}

/* p {
  background: white;
  border: 1px solid silver;
  border-radius: 0.6rem;
  box-shadow: 0 1px hsla(0, 0%, 100%, 0.8);
  padding: 0.8rem;
} */


/* https://www.sitepoint.com/community/t/how-to-position-a-pseudo-element-to-underline-text/387746/2 */

p::before {
  /* content: 'Friday, July 5th, 2024, 3:48 PM'; */
  /* --creation-date: 'Friday, July 5th, 2024, 3:48 PM'; */
  content: var(--creation-date);
  text-align: right;
  color: #8D4931;
  line-height: 2rem;
  padding-right: 0.5rem;
  font-size: 0.9rem;

  position: absolute;
  display: block;
  
  /* slightly taller than move back, plus z-index backwards, to avoid line due
  to rounding error on some platforms */
  height: 2rem;
  transform: translateY(-1.5rem);
  z-index: -1;

  left:0;
  right:0;
  /* background-color: magenta; */

  background : #F8F4CD;
  background-image :
  /* linear-gradient(0deg, #DDDBA5 0.05rem, transparent 0.05rem), */
  linear-gradient(90deg,
    transparent 0.5rem, #C3B18B 0.5rem, #C3B18B 0.55rem, transparent 0.55rem,
    transparent 0.7rem, #C3B18B 0.7rem, #C3B18B 0.75rem, transparent 0.75rem);
  background-size : 100% 1rem;
}


/* https://projects.verou.me/css3patterns/#lined-paper */

p {
  /* background: #F8F4CD; */
  
  padding: 0 0.5rem 0.7rem 1rem;

  margin: 0.5rem 0 0.5rem 0;

  position:relative;

  background : #F8F4CD;
  background-image :
  linear-gradient(90deg,
    transparent 0.5rem, #C3B18B 0.5rem, #C3B18B 0.55rem, transparent 0.55rem,
    transparent 0.7rem, #C3B18B 0.7rem, #C3B18B 0.75rem, transparent 0.75rem),
  linear-gradient(0deg, transparent .45rem, #cecc99 .45rem, #cecc99 0.5rem, transparent 0.5rem);
  background-size : 100% 1.5rem;

  /* font-size: 0.8rem; */
  line-height: 1.5rem;

  /* border-top: 1rem solid #F8F4CD; */

  font-size: 1.0rem;

  box-shadow: 0 2px 4px hsl(0deg 0% 0% / 15%);

  font-family: "Handlee", cursive;
  font-weight: 400;
  font-style: normal;

  text-shadow: none;

  z-index: 5;

  --creation-date: '';
  padding-top: 1.5rem;
}

h2 {
  font-size: 1rem;

  text-shadow: 0 -2px 1px #1E1110;
  color: white;
}

/* #one::before {
  content: 'FOO';
} */

p:focus {
  /* box-shadow: 0 10px 20px hsl(0deg 0% 0% / 34%); */
  outline: 4px solid white;
  outline-offset: 2px;
}

#title-bar-text {
  margin: auto auto auto 1rem;
}

.header > button {
  background-color: transparent;
  border: 1px solid #37221C;
  border-radius: 6px;
  height: 2rem;
  width: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.25rem 0 0;
  box-shadow: 0 1px 0 #6C5953, inset 0 1px #333;
}

.header > button > svg {
  width: 1.5rem;
  height: 1.5rem;
}

.etch-shadow {
  text-shadow: 0 1px 0 #6C5953, inset 0 1px #333;
}

.hidden {
  display: none!important;
}