html { width: 100%; height: 100%; }
body{background:url(./fondo.jpg) top center/cover no-repeat fixed;width:100%;margin:0px;
    padding:0px;font-family:sans-serif;font-size:12pt}
a{text-decoration:none;}a:hover{color:#cc3300}
h2 a, h3 a, h4 a, h5 a, h6 a{color:white;text-shadow:3px 3px 2px #003300}
h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{
    color:white;text-shadow:3px 3px 2px #cc3300}
.pagecontainer h2, h3, h4, h5, h6{
    width:max-content;max-width:95%; padding:2px 2%;margin:1em 0 0 0}
.pagehead h2{color:white;text-shadow:3px 3px 2px #003300;transform:rotate(-3deg)}
.pagehead, ul.menu, .pagefooter{display:flex;flex-wrap:wrap}
.pagehead, .pagefooter{justify-content:space-between}
ul.menu, ul.menu ul, .pagecontainer, .pagefooter ,.pagecontainer > * ,.blogcontent > div{
    border-radius:7px; }
.pagehead li{margin:0 0 0.2em 1em;list-style:none}
.pagehead li ul{display:none;position:absolute;right:1em}
.pagefooter{margin-top: 1% !important;}
.pagefooter>div{font-size:small}.blogcontent > h3:not(:first-of-type){margin-top:2em}
.blogtags .label{border:2px outset #006600;border-radius:5px;padding:0
1em;margin: .2em;line-height:1.5em;background-color:#336633;color:white;
text-shadow:1px 1px black}
.blogtags .label:hover{border-style:inset;background-color:#557755}
.active,.current{font-weight:bold}
.success{display:inline-block;color:#9bba1c}
.form-group{display:grid;grid-gap:0.2em;padding:0.8em 0 0 0;justify-items:center;
    justify-content:space-around}
code{display:block;border:thin solid;background-color:#fffcf0}
div.paging::before{content:'Páginas:';padding-right:1.5em}.paging
span{font-weight:bold;border:thin solid;padding:2px;border-radius:3px}.paging
.nolink{color:#666}.paging .withlink:hover{background-color:white}.paging
.numpag{padding:2px 5px}
.center{ margin: 0 auto; text-align: center;}
.divscroll{position: fixed; bottom: 1em; right: 2%; padding: 0px 10px 4px 10px;
    font-size: xx-large; background-color: #ffffffbb;
    border: thin solid #666666; border-radius: 20px;
    transform:rotate(-90deg); cursor: pointer;}
img { max-width: 100%; }
/* colores */
.error{color:#cc0000;}.noerror{color:#006600;}
/*      normal      */
a{color:darkgreen;}
ul.menu, ul.menu ul, .pagecontainer, .pagefooter ,.pagecontainer > * ,.blogcontent > div{
    background-color:#fff9f480;}
.pagecontainer h2, h3, h4, h5, h6{
    color:white; background-color:#33333399; }
li>div.darkchange{ width: 1em; height: 1em; cursor: pointer;
    background: linear-gradient(-70deg, #ffa 0%, #000 60%);}
/*      dark      */
body.dark{
    color: #d5d5d5;
    backdrop-filter: brightness(70%);
    a{ color:limegreen; }
    ul.menu, ul.menu ul, .pagecontainer, .pagefooter ,.pagecontainer > * ,.blogcontent > div{
        background-color:#00090480; }
    .pagecontainer h2, h3, h4, h5, h6{
        color:#333333; background-color:#f6f6f699;}
    li>div.darkchange{ width: 1em; height: 1em; cursor: pointer;
        background: linear-gradient(-70deg, #000 0%, #ffa 60%);}
}
/* tamaños */
.pagebody{padding-bottom: 2%;}
.pagebody > div{margin:0 4%}
ul.menu, ul.menu ul{padding:2%;}
.pagecontainer, .pagefooter ,
.pagecontainer > * ,.blogcontent > div{padding:4%;}
.pagecontainer > *{margin:4% 0}
.pagecontainer > *:first-child,
.pagecontainer > *:last-child{margin: 0}
@media (max-width: 1200px) {/* tablet horizontal */
    /* body{background:blue;} */
    .pagebody > div{margin:0 3%}
    .pagecontainer, .pagefooter ,
    .pagecontainer > * ,.blogcontent > div{padding:3%;}
    .pagecontainer > *{margin:3% 0}
}
@media (max-width: 800px) {/* moviles horizontal */
    /* body{background:green;} */
    .pagebody > div{margin:0 2%}
    .divscroll{right:1%;}
    .pagecontainer, .pagefooter ,
    .pagecontainer > * ,.blogcontent > div{padding:2%;}
    .pagecontainer > *{margin:2% 0}
}
@media (max-width: 400px) {/* moviles vertical */
    /* body{background:red;} */
    .pagebody > div{margin:0 1%}
    .pagecontainer, .pagefooter ,
    .pagecontainer > * ,.blogcontent > div{padding:1%;}
    .pagecontainer > *{margin:1% 0}
}