/* FONTS */

@font-face {
  font-family: "HelvetiHand";
  src: url("../fonts/HelvetiHand.woff") format('woff');
  font-weight: normal;
}

@font-face {
  font-family: "Dudu Calligraphy q";
  src: url("../fonts/Dudu_Calligraphy_q.woff") format('woff');
  font-weight: normal;
}

@font-face {
  font-family: "ZenKurenaido-Regular";
  src: url("../fonts/ZenKurenaido-Regular.woff") format('woff');
  font-weight: normal;
}

@font-face {
  font-family: "Yomogi-SymbolsOnly";
  src: url("../fonts/Yomogi-SymbolsOnly.woff") format('woff');
  font-weight: normal;
}

/* LAYOUT */

html {
  width: 100vw;
}

body {
  position: relative;
  color: #333;
  font-size: 20px;
  line-height: 1.273;
  padding: 0;
  margin: 0;
  overflow-x:hidden;
  
  color: #4B4E53; /* Graphite */

  cursor: url("../cursors/ribbonarrow_blue.png"), auto;
}

.main-container {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  max-width: var(--container-size);
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}

.paper {
  font-family: 'Dudu Calligraphy q', 'ZenKurenaido-Regular';
  font-size: 1.1em;
  margin-bottom: 1rem;
  /*background-color: #fafdff;*/
  background-position-x: -0.1rem;
  background-position-y: -0.1rem;
  border-style: solid;
  outline-offset: 10rem;
  border-image: url("/images/cloudborder_7.png") 7 fill round;
  border-width: 7px;
  border-color: white;
  /*margin-left: 0.6rem;
  margin-right: 0.6rem;*/
  padding: 0.5rem 1.6rem 1rem 1.6rem;
  align-items: center;
  max-width: var(--mainbox-size);
}

.content {
  /*max-width: var(--mainbox-size);*/
  flex: 3 1;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  /*box-shadow: 0em 0em 0.2em #4a5a7466;*/
  /*border-style:solid;*/
}

.sidebar {
  /*max-width: 15rem;*/
  min-width: 8.3em;
  flex: 1.18 1;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  align-self: start;
  /*background-image: url("/images/ring2.png");*/
  background-repeat: repeat-y;
}

/* Styling specific to a sheet of lined paper */
p, .underline {
  background: repeating-linear-gradient(#ffffff00, #ffffff00 26px, white 26px, #e2e2e2 27px, #e2e2e2 28px);
  background-position-y: -32px;
  font-family: 'Dudu Calligraphy q', 'ZenKurenaido-Regular';
  padding: 0;
  margin-top: -3px;
  margin-bottom: 0px;
  margin-left: 0px;
}

main li {
  font-family: 'Dudu Calligraphy q', 'ZenKurenaido-Regular';
  margin-top: -3px;
}

.paper ul {
  background: repeating-linear-gradient(#ffffff00, #ffffff00 26px, white 26px, #e2e2e2 27px, #e2e2e2 28px);
  background-position-y: -32px;
  font-family: 'Yomogi-SymbolsOnly';
  list-style-type: "・ ";
  margin-top: 0;
  padding-top: var(--line-size);
  padding-top: 0;
}

.paper li::marker {
  font-family: 'Yomogi-SymbolsOnly';
}

/* Aggiustamenti per vecchi browser */
a {
  outline : none;
  color: #58c5ff;
}
a img {
  outline : none;
}
img {
  border : 0;
}
:active, :focus {
  outline: none;
  -moz-outline-style: none;
}

.paper h1 {
  background: repeating-linear-gradient(#ffffff00, #ffffff00 46px, white 46px, #e2e2e2 47px, #e2e2e2 49px);
  background-position-y: -9px;
  font-family: 'HelvetiHand', 'ZenKurenaido-Regular';
  /*font-size: 44px;*/
  font-size: 38.5px;
  margin-top:0.5rem;
  margin-bottom:0.2rem;
  color: #31A0DD;
}

.paper h2 {
  background: repeating-linear-gradient(#ffffff00, #ffffff00 39px, white 39px, #e2e2e2 40px, #e2e2e2 42px);
  background-position-y: -8px;

  font-family: 'HelvetiHand', 'ZenKurenaido-Regular';
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.paper h3 {
  line-height: 1.2;
  margin-bottom: 0;
  margin-top: 0;
}

.paper h3 :not(.post-snippet) {
  /*background: repeating-linear-gradient(#ffffff00, #ffffff00 17px, white 18px, #e2e2e2 19px, #e2e2e2 21px);
  background-position-y: 8px;
*/
  font-family: 'HelvetiHand', 'ZenKurenaido-Regular';
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.paper h4 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.paper h5 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.paper h6 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.grechetta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

hr {
  background: repeating-linear-gradient(#ffffff00, #ffffff00 62px, white 63px, #e2e2e2 64px, #e2e2e2 66px);
  background-position-y: -40px;
  border-top: 0.1rem;
  border-bottom:0rem;
  margin-top:0.55rem;
  margin-bottom:0.55rem;
  border-color: rgb(73, 89, 116);
  border-style:dashed;
} 

#footer {
  position: relative;
  clear: both;
}

p.footer {
  background: none;
}

.header {

}

.footersection {
  font-family: 'HelvetiHand', 'ZenKurenaido-Regular';
  margin-top:0;
  margin-bottom:0;
}

a, a:link {
  text-decoration: none;
}

/* NAVIGATION */

@font-face {
  font-family: TwinkleStar-Regular;
  src: url(/fonts/TwinkleStar-Regular.woff);
}

.site-nav {
  display: flex;
  width: 100%;
  font-size: 2.5rem;
  font-family: TwinkleStar-Regular;
  justify-content: center;
  text-align: center;
  font-weight: bold;
}

.nav-title {
  font-size: 1em;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}

.logo, li:nth-child(0) a:link a:visited {
  color/**/: white;
  text-shadow: 0px 0px 2px #83E2DD, 0px 0px 5px #83E2DD, 0px 0px 4px #83E2DD, 0px 0px 4px #83E2DD, 0px 0px 6px hsl(175, 63%, 50%);
}

.site-nav a:active {
  color/**/: hsl(175, 63%, 96%);
}

.nav-element, li:nth-child(1) a:link a:visited {
  color/**/: white;
  text-shadow: 0px 0px 2px #80D0FF, 0px 0px 2px #80D0FF, 0px 0px 4px #80D0FF, 0px 0px 4px #80D0FF, 0px 0px 6px hsl(201, 100%, 50%);
}

.main-menu li:nth-child(1) a:active {
  color/**/: hsl(201, 100%, 96%);
}

.main-menu li:nth-child(3) a:link {
  text-shadow: 0px 0px 2px #BBADFF, 0px 0px 2px #BBADFF, 0px 0px 4px #BBADFF, 0px 0px 4px #BBADFF, 0px 0px 6px hsl(250, 100%, 60%);
}

.main-menu li:nth-child(3) a:active {
  color/**/: hsl(250, 100%, 97%);
}

.main-menu li:nth-child(4) a:link {
  text-shadow: 0px 0px 2px #FFB3C7, 0px 0px 2px #FFB3C7, 0px 0px 4px #FFB3C7, 0px 0px 4px #FFB3C7, 0px 0px 6px hsl(342, 100%, 60%);
}

.site-nav li:nth-child(4) a:active {
  color/**/: hsl(342, 100%, 97%);
}

.main-menu li:nth-child(5) a:link {
  text-shadow: 0px 0px 2px #FFB280, 0px 0px 2px #FFB280, 0px 0px 4px #FFB280, 0px 0px 4px #FFB280, 0px 0px 6px hsl(29, 100%, 60%);
}

.site-nav li:nth-child(5) a:active {
  color: hsl(342, 100%, 97%);
}

.pixel {
  image-rendering: pixelated;
}

a, a:active {
  color: #58c5ff;
}

.paper a:active {
  text-shadow: 0px 0px 3px #58c5ff;
}

table.clouds {
  width:100%;
  height:63px;
  border: 0;
  border-spacing: 0;
  background-image: url(/images/curtain.gif);
}

table.reverse {
  /*-webkit-transform: scaleY(-1);
  transform: scaleY(-1);*/
  background-image: none;
  background-image: url(/images/curtain_reverse.gif);
}

#maintable {
    margin: auto;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.site-nav::before {
  /*content: url(/images/logo.png);
  content: "Placeholder";*/
}

.site-nav a {
  display: block;
  padding: 0.5rem;
  text-decoration: none;
  padding-bottom: 0;
  padding-left: 0.5em;
}

/* Navbar per IE5 */
ul.main-menu {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  text-align: center;
}

li.main-menu {
  float: left;
  text-align: center;
}

.site-nav .logo {
  font-weight: bold;
  padding-left: 0.05em;
}

.main-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

li:before {
  padding-right: 5px;
  color: green;
}

li:nth-child(1):before:active {
    color: green;
}

li:nth-child(2):before:active {
    color: red;
}

li:nth-child(3):before {
    color: blue;
}  


/* Mobile bar */
@media screen and (max-width: 54rem) {
  .site-nav, .main-menu {
    /*flex-direction: column; */
  }

  .site-nav a {
    padding-left: 0.2em;
    font-size: 2rem;
  }

  .main-container {
    margin: 0.5rem;
  }
}

@media screen and (max-width: 46em) /* Don't use the variable. It's broken. */ {
  ul.site-nav, ul.main-menu {
    flex-wrap: wrap;
    width: 100%;
    padding-left: 2rem;
    padding-right: 2rem;
    justify-content: center;
  }

  li.site-nav, li.main-menu {
    width: calc(100% / 2);
    text-align: center;
  }

  .site-nav a {
    padding: 0.5rem;
    padding-bottom: 0;
    padding-left: 0.2em;
    font-size: 2rem;
  }

  .main-container {
    margin: 0.5rem;
  }
}

#footer {
  text-align: center;
  bottom: 0;
  width: 100%;
  /*height: 9rem;  /* Footer height */
}

.bannerini {
  max-width: 49rem;
  margin: auto;
}

.banner {
  margin: 0.05em;
}

#page-container {
  background-image: url(/images/stripes.webp);
  position: relative;
  /*min-height: 97.77vh;*/
}

.footer-afterimage {
  background-color: white;
  /* height: -webkit-fill-available; */
}

.footer-afterimage::after {
  background-color: white;
}

p.footer {
  font-family: 'HelvetiHand';
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-align: center;
}

.copyleft {
  display: inline-block;
  transform: rotate(180deg);
  vertical-align: text-bottom;
}

/* LISTS */

.post-snippet {
  margin-bottom: 1rem;
}

article.post-snippet {
  margin-bottom: 0.25rem;
  background: repeating-linear-gradient(#fff0, #fff0 29px, white 26px, #e2e2e2 27px, #e2e2e2 31px);
  background-position-y: 0%;
}

time {
  /*background: repeating-linear-gradient(#ffffff00, #ffffff00 2px, white 18px, #e2e2e2 20px, #e2e2e2 21px);
  background-position-y: 0%;*/
  line-height: 1.8;
}

.drawing {
  background: repeating-linear-gradient(#fff0, #fff0 29px, white 26px, #e2e2e2 27px, #e2e2e2 31px);
  background-clip: content-box, padding-box;
}

.photo {
  box-shadow: 0em 0em 0.6em #4a5a7466;
  padding: var(--image-padding);
  margin-top: var(--image-padding);
  background-color: white;
  width: calc(var(--image-size) + var(--image-padding));
}

.photo-left {
  rotate: -3deg;
  margin-right: 1em;
  margin-left: -3.5em;
}

.photo-right {
  rotate: 3deg;
  margin-right: -3.5em;
  margin-left: 1em;
}

.image {
  width: var(--image-size);
}

@media only screen and (max-width: 60em){
  img.desktop-only-right-sidebar {
    text-align: center;
    display: block;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }

  img.desktop-only-left-sidebar {
    text-align: center;
    display: block;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
  }

  .photo {
    width: calc(var(--image-size) + var(--image-padding));
  }

  .photo-left {
    rotate: 3deg;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
  }

  .photo-right {
    rotate: 1.8deg;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.5em;
  }
}

@media only screen and (min-width: 60em){
  .desktop-only-right-sidebar {
    float: right;
  }

  .desktop-only-left-sidebar {
    float: left;
  }
}

ruby {
  display: inline-block;
  position: relative;
  font-size: 80%;
}

ruby rt {
  font-size: 0.6em;
  position: absolute;
  bottom: 100%; /* Posiziona il furigana sopra il testo */
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  pointer-events: none; /* Evita che il furigana interferisca con la selezione del testo */
}

:root {
  /* Sizes */
  --mainbox-size: 46rem;
  --container-size: 70rem;
  --line-size: 28px;
  --image-size: 12em;
  /* Colors */
  --red-warning: #E3748F;
  --image-padding: 0.5em;
}