@import "normalize.css";

html { background-image:url("../images/background.jpeg"); background-size:cover; background-attachment:fixed; }

a { color:black;
	text-decoration:none; }
a:hover { color:gray; }

body { width:96%; max-width: 950px; margin-left:auto; margin-right:auto; }

header::before { content:url("../images/logo.png"); display:block; margin:1em auto; text-align:center; } 
header * { display:none; }

nav#mainmenu { background:rgba(255,255,255,0.4); padding:1ex; text-align:center; margin-bottom:1em; }
nav#mainmenu ul { list-style: none; }
nav#mainmenu * { display: inline; }

nav#mainmenu li::after { content:"|"; }
nav#mainmenu a { text-transform: uppercase; margin:0 1ex; }

main { float:right; width:73%; padding:0.5rem 1rem; background:rgba(255,255,255,0.4); font-size:90% } 
main p { text-align:justify; }

section > h1:first-child { font-weight:200; font-size:180%; margin-top:1ex; border-bottom:1px solid black; color:gray; margin-bottom:0.6em; padding-left:1em; text-transform:uppercase; }
section > h2 { font-weight:500; font-size:150%; margin-top:1em; margin-bottom:0.5em; }
section img { float:right; max-width:50%; height:auto; margin-left:1ex; }

nav.sidebar { width:calc(27% - 3.5rem); }

.sidebar ul { list-style: none; padding:0; margin:0 }
.sidebar li a { width:100%; background-color:rgba(255,255,255,0.4); padding:0.5ex; text-align:right; margin-bottom:1ex; text-transform:uppercase; display:block; overflow:hidden; }

footer { clear:both; font-size:75%; text-align:right; padding-top:1rem; } 
footer a { text-transform:uppercase; display:block;}

#buttons { text-align:justify; margin-bottom: -1rem; }
#buttons:after { content:" "; line-height:0; height:0; width:100%; display:inline-block; }
#buttons a { width:100%; display:block; }
#buttons section { display:inline-block; width:215px;  height:175px; margin-bottom:1em; text-align:center; padding:5px; position:relative; background-color:rgba(255,255,255,0.4); overflow:hidden; text-overflow:ellipsis; }
#buttons section:hover { background-color:rgba(255,255,145,0.4); }
#buttons section img { max-width:calc(100% - 10px); max-height:auto; position:absolute; top:5px; left:5px; margin:0; padding:0; }
#buttons h2 { position:relative; margin:0; top:147px; font-weight:500; }