/* LAYOUT */
body {
  padding: 1rem 4vw;
}
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 0 1.5rem;
  margin: 0;
}
dt {
  font-size: 1.5rem;
  margin-top: 1.5rem;
}
dd {
  margin-right: 2rem;
}
fieldset {
  width: fit-content;
}
fieldset label {
  border: 1px solid silver;
  padding: 4px;
}

/* FONTS */
.wingdings, .wingdings + dd {
  font-family: "wingdings";
}
.wingdings small {
  font-family: serif;
}
.basiic, .basiic + dd {
  font-family: "pixel basiic";
}
.heart, .heart + dd {
  font-family: "pixel heart";
}
.romance, .romance + dd {
  font-family: "pixel romance";
}
.chicago, .chicago + dd {
  font-family: "chicago";
}
.cherrybomb, .cherrybomb + dd {
  font-family: "cherrybomb";
}
.blox, .blox + dd {
  font-family: "blox";
}
.mrsmonster, .mrsmonster + dd {
  font-family: "mrs monster";
}
.trashhand, .trashhand + dd {
  font-family: "trash hand";
}
.flavors, .flavors + dd {
  font-family: "flavors";
}
.babydoll, .babydoll + dd {
  font-family: "baby doll";
}
.papyrus, .papyrus + dd {
  font-family: "papyrus";
}
.comicsans, .comicsans + dd {
  font-family: "Comic Sans MS";
}
.okato, .okato + dd {
  font-family: "MS PGothic Okato"
  ;
}
.bpdots, .bpdots + dd {
  font-family: "BPDots";
}

/* SETTINGS */
body:has(#bold:checked) dd {
  font-weight: bold;
}
body:has(#italic:checked) dd {
  font-style: italic;
}
body:has(#large:checked) dd {
  font-size: 2.5rem;
}
body:has(#smallcaps:checked) dd {
  font-variant: small-caps;
}



/*caw caw*/
.fumetto {
    position: relative;
    padding: 3px;
    margin: auto;
    width: 78%;
    min-height: 10px;
    background-color: white;
    line-height: 34px;
    color: black;
    box-sizing: border-box;
    text-align: center;
 }

.fumettoend { 
  border-top: 46px solid white;
  border-right: 23px solid transparent;
z-index: -2 !important; 
left: 77px;  
top: 19px; 
transform: rotate(32deg); 
 position: absolute;
   bottom: 14px;
   }

.facts {
 min-height: 154px;
  position: sticky;
  width: 153px;
  margin: auto;
  bottom: 0px;
  right: 0px;
  overflow: hidden;
  }

.corrado{
width: 86px;  position: absolute;  bottom: -5px;  z-index: 2;  left: -3px;
}