/* colors by
 * https://www.colourlovers.com/palette/3025559/Desert_Beauty
 * */
/* links externos */
a[rel^=external]:after{ content: "↝"; }
a{ 
 color: #A00C0A;
}
a:visited{
 font-style: italic;
}
a.icon{
color: #EFD7BB;
}

a.arrow:before{ content: "⇒ "; }

body{
 color: #030400;
 background-color: #AA7E4D;
 max-width:800px;
 margin:0 auto;
 font-size:18px;
 padding: 0 1em;
 font-family:sans-serif;
}


main,header,footer{
 background-color: #EFD7BB;
 padding: 0.5em 1em 0.5em 1em;
}
nav{
 background-color: #EFD7BB;
}

hr{ color: #A00C0A }
h1,h2,h3{
 text-shadow: 1px 1px #A00C0A;
}

.mono-icon{
 stroke: #030400;
 color: #030400;
 text-decoration: none;
 font-size:x-large;
}

#header-icon { float:left; padding: 1.8em 1em 0 0em }

footer{
 font-size: small;
 padding-top:2em;
}

footer img{
 margin:0;
}


pre{
 background-color: #36030C;
 color: #EFD7BB;
 padding:1em;
 overflow-x: auto;
 font-family: monospace;
 box-shadow: 2px 2px #A00C0A;
}

blockquote{
 font-style: italic;
}

main h1{
 margin-top: 2em;
 font-size: xx-large;
}
main h2{
 font-size: x-large;
 margin-left:0.3em;
}
main h3{
 font-size: larger;
 margin-left:0.6em;
}

gallery{
 display:flex;
 flex-direction:row;
 flex-wrap:wrap;
 justify-content:space-evenly;
 align-content:center;
}
img{
 margin:10px;
 border-radius:5px;
 max-width: 320px;
}

nav { float: none }

nav li, #incoming li{ padding:0.2em; }
main li, #incoming li{  padding:0.5em; }
#incoming h1 { font-size: x-large }

table {
	font-size: smaller;
        max-width: 90%;
        border-collapse: collapse;
        margin: 1em auto;
	text-align:left;
    }
table  th {
        border-bottom: 1px solid #36030C;
        padding: 0.1em 1em;
    }
table  td {
        padding: 0.1em 1em;
    }
td.num{
	text-align:right;
}
#translation{
	font-size: smaller;
	font-style: italic;
	margin-left: 2em;
}


/* desktop */
@media screen and (min-width: 600px) {
  nav { 
    float: right; 
    width:30%;
  }
  nav ul { margin-top:0; padding-left: 3em }
  #incoming li{
	display:inline; 
	padding: 0.5em 1em 0.5em 0;
  }
  img{ max-width: 100%; }
  main,header,footer{
    padding: 0.5em 3em 0.5em 3em;
  }
}

@media (prefers-color-scheme: dark) {
a{ 
 color: #AA7E4D;
}
a.icon{
color: #030400;
}
body{
 color: #EFD7BB;
 background-color: #36030C;
}
main,header,footer,nav{
 background-color: #030400;
}
pre{
 background-color: #EFD7BB;
 color: #36030C;
}
table  th {
        border-bottom: 1px solid #A00C0A;
}
.mono-icon{
 stroke: #EFD7BB;
 color: #EFD7BB;
}
}