/* STYLES.CSS */

/* Parameters */
:root {--txt: #111111;
       --lin: #dddddd;
       --wht: #ffffff;
       --gry: #f3f3f3;
       --blu: #0000ff;
       --mdb: #003366;
       --red: #ff0000;
       --blk: #000000;}

/* Scroll bar */
html {overflow-y: scroll;}

/* Body, Sections */
body {
  background:    var(--wht);
  color:         var(--txt);
  font-family:   Arial, sans-serif;
  font-size:     14px;
  line-height:   1.5;
  text-align:    justify;
  text-justify:  inter-word;
  max-width:     1000px;
  margin-inline: auto;
}
.section {
  border: 1px solid var(--lin);
  border-radius: 10px;
  padding: 10px;
  margin:  10px;
}
.section:first-of-type {margin-top: 55px;}
.norm {background: var(--wht);}
.gray {background: var(--gry);}
.header {display: flex; justify-content: space-between; align-items: flex-start;}

/* Photo */
.photo img {border-radius: 10px; margin: 60 0 0 10;}

/* Links, List items */
a:link,a:visited{color: var(--blu);} a:hover,a:active{color: var(--red);}
h1 {margin: 10 0 0 0;}
h2 {margin: 10 0 0 0;}
h3 {margin: 10 0 0 0;}
hr {border:0; border-top:1px solid var(--lin); margin: 15 0 0 0;}
ul {margin: 10px; padding:0; list-style-type: square;}
ol {margin: 10px; padding:0;}
li {margin: 10px; padding:0;}

/* Page break for print */
@media print {.page {page-break-after: always;}}

/* Menu */
.menu   {position: fixed; z-index: 9999; top: 0px; background: var(--wht); padding: 10px 0px 10px 0px; max-width: 1000px; width: 100%;}
.menu a {display: inline-block; margin: 0px 0px 0px 10px; padding: 5px 10px; border-radius: 10px; background: var(--gry); color: var(--txt); text-decoration: none;}
.menu a:hover {background: var(--mdb); color: var(--wht);}
.menu a.active{background: var(--mdb); color: var(--wht);}