/* Fonts */
@font-face {
    font-family: "lmodern";
    src: url("resources/fonts/lmroman8-regular.otf") format("opentype");
}
@font-face {
    font-family: "lmodernbold";
    src: url("resources/fonts/lmroman8-bold.otf") format("opentype");
}
@font-face {
    font-family: "lmoderncaps";
    src: url("resources/fonts/lmromancaps10-regular.otf") format("opentype");
}
@font-face {
    font-family: "lmodernmono";
    src: url("resources/fonts/lmmono8-regular.otf") format("opentype");
}

* {font-family: lmodern}
b {font-family: lmodernbold; font-weight: normal}
p {text-align: justify}
body {
	width: 70%;
	max-width: 900px;
	min-width: 390px;
	margin: auto;
	font-size: 1.2em;
}
li { margin-top: .4em; }

.subtitle {margin-top: 0; margin-bottom: 0}
h1 {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.1)), url("resources/automata/1_s.png");
	padding-left: 20px;
	font-size: 2.5em;
}
h2 {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.1)), url("resources/automata/2_s.png");
	padding-left: 20px;
}
article h3 { display: inline }

article {padding: 10px; padding-left: 15px; margin: 10px}

article:nth-child(6n+0) {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0.75)), url("resources/automata/3_s.png");
}
article:nth-child(6n+1) {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.85)), url("resources/automata/4_s.png");
}
article:nth-child(6n+2) {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0.75)), url("resources/automata/9_s.png");
}
article:nth-child(6n+3) {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0.75)), url("resources/automata/6_s.png");
}
article:nth-child(6n+4) {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0.75)), url("resources/automata/7_s.png");
}
article:nth-child(6n+5) {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.65), rgba(255,255,255,0.75)), url("resources/automata/8_s.png");
}

footer {
	width: 100%;
	text-align: center;
	bottom: 0;
	padding: 6px;
	background-color: white;
}

em {font-family: lmoderncaps; font-style: normal}
code {font-family: lmodernmono}

.btn {
    border: 1px solid black;
    border-radius: .45rem;
    color: black;
    font-family: lmodernsans;
    font-weight: 500;
    text-decoration: none;
    margin: 12px;
    float: right;
    padding: .375rem .75rem;
    transition: color 0.15s, background-color 0.15s;
    transition-timing-function: ease-in-out;
}
.btn:hover {
	cursor: pointer;
	color: white;
	background-color: black
}

#portrait {
	margin-top: 1em;
	height: 225px;
	float: right;
	margin-left: 1em;
}

.resume-article {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
    	border-radius: .7rem;
}

@media only screen and (max-width: 700px) {
    body {width: 95%; min-width: initial}
    #portrait {display: block;
        float: left;
	margin-right: 1em;
	margin-left: 0}
}

@media only screen and (max-width: 475px) {
    #portrait {float: none;
	margin-left: auto;
	margin-right: auto}
    footer {display: none}
}