/* CSS for all pages in #pages-container */



/* Common styles for all page content */
.page-content{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	/*margin-top:32px;*/
    /*margin-bottom:32px;*/
    color:var(--color-text-auto);
}

.page-title{
  font-size:3.0em;
  font-weight:700;
  text-align:center;
  margin-top:8px;
  margin-bottom:16px;
  /*margin-left:32px;
  margin-right:32px;*/
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  color:var(--color-text-auto);
  align-self:stretch;
  
  /*
  --page-title-side-line-gradient:linear-gradient(
    33deg,
    var(--template-hanmari-red)    16%,
    var(--template-hanmari-orange) 16% 33%,
    var(--template-hanmari-yellow) 33% 50%,
    var(--template-hanmari-green)  50% 67%,
    var(--template-hanmari-blue)   67% 83%,
    var(--template-hanmari-violet) 83%
  );*/
}
.page-title.centered::before{
  display:block;
  flex-grow:1;
  margin-right:16px;
  height:4px;
  background-image:linear-gradient(
    to left,
    var(--color-text-auto),
    hsl(from var(--color-text-auto) h s l / 0%)
  );
  content:"";
}
.page-title::after{
  display:block;
  flex-grow:1;
  margin-left:16px;
  height:4px;
  background-image:linear-gradient(
    to right,
    var(--color-text-auto),
    hsl(from var(--color-text-auto) h s l / 0%)
  );
  content:"";
}

.page-preamble{
  color:var(--color-text-auto);
  font-size:1.2em;
  margin-top:0.3em;
  margin-bottom:0.3em;
  line-height:1.5;
}
.page-preamble.centered{
  text-align:center;
}

.page-text-body{
  align-self:stretch;
  font-weight:400;
  text-align:left;
  line-height:1.5;
}
.page-text-body.centered{
  text-align:center;
}
.page-text-body h1{
  margin-top:1.5em;
  font-size:3.0em;
  margin-bottom:0.1em;
}
.page-text-body h2{
  margin-top:0.5em;
  font-size:2.0em;
  margin-bottom:0.1em;
}
.page-text-body h3{
  margin-top:0.5em;
  font-size:1.3em;
  margin-bottom:0.1em;
}
.page-text-body p{
  font-size:1.0em;
  margin-top:0.2em;
  margin-bottom:0.4em;
}
.page-text-body ul,ol{
  list-style-position: outside;
  padding-inline-start: 1.3em;
}

.linkbutton-row{
  margin-top:16px;
  margin-bottom:12px;
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-self:stretch;
  flex-wrap:wrap;
  gap:8px;
}
.linkbutton-row.centered{
  justify-content:center;
}
.linkbutton-row.large{
  font-size:1.3em;
}

/* Responsive Section */
/* Targeting down to 300px. */

/* Mobile mode */
@media (width<640px) {
  .page-title{
    /*margin-left:16px;
    margin-right:16px;*/
  }
  .page-text-body h1{
    /*margin-left:16px;
    margin-right:16px;*/
  }
  .page-text-body p{
    /*margin-left:16px;
    margin-right:16px;*/
  }
}

/* Smaller Mobiles */
@media (width<480px) {
}

/* Ridiculously Small Mobiles */
@media (width<360px) {
}

/* Mobile ladder */
/* PC <-640-> Big Mobile <-480-> Small Mobile <-360-> Ridiculous <-300-> I give up */
@media (width>=480px) and (width<640px) {
  /* 640 ~ 480 : Big Mobiles */
}
@media (width>=360px) and (width<480px) {
  /* 480 ~ 360 : Small Mobiles */
}
@media (width<360px) {
  /* 360 ~ 300 : Ridiculously Small Mobiles */
}