:root {
  --blue: #002330;
  --jeans: #2c638f;
  --white: #ffffff;
  --black: #000000;
  --gray: #808080;
  --lemon: #bfff40;
  --highlight: #bfff40;
  } 

html, body {height:100%; margin: 0px; padding: 0px;}
aside, footer, section {display: block;}
body, nav {font-family:  sans-serif, Tahoma, verdana; text-align: center; }
//header {background-color: var(--white);}
section (font-size: 1em; text-align: justify;)
footer{position: absolute; bottom: 0; height: 90px; width:100vw;}

/*header*/
//#header_col1, #header_col2, #foto {float: left;}
//#header_col1 {width: 30%;}
//#header_col2 {width: 70%; text-align: center;}
#foto {height: 35vh; border-radius:50%;}


#title {font-weight:bold;}
#title {font-size: 3em; margin-top: 10vh;}
#subtitle {font-size: 2em; color: var(--gray);}

/*menu*/   
ul,li {list-style:none; padding:0; margin:0;}
nav {background-color: var(--blue); line-height:4em; border-top: 3px solid var(--white);}
nav li {display:inline;}
nav li a {font-weight: bold; color: var(--white); padding: 1.5em; text-transform: uppercase;}
nav li a:link{color:  var(--white);}
nav li a:visited {color:  var(--white);}
nav li a:hover {color: var(--blue); background-color:  var(--lemon);}

/*paragraphs*/
h1 {color: var(--black); font-size: 200%;}
h2 {color: var(--jeans);  font-size: 150%;}
h3 {color: var(--jeans); font-size: 120%;}
h4 {color: var(--jeans); font-size: 100%;}
p {}
a {text-decoration:none;}
a:link{color: var(--jeans);}

/*body*/
#content {margin: 0 2vw 0 2vw;}   
#files {margin-left: auto; margin-right: auto;}
#files tr:hover {background-color: var(--highlight);}
table, th, td {
  border-collapse: collapse;
  border: 1px solid;
  border-color: var(--jeans);
  padding: 8px;
}
th {
  padding-top: 12px;
  padding-bottom: 12px;
 // text-align: left;
  background-color: var(--jeans);
  color: white;
}

/*columns*/   
.column2 {
  float: left;
  width: 47vw;
} 
.column3 {
  float: left;
  width: 30%;
  padding: 0 1% 0 1%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*sessionize*/
.sz-group__title {margin-top: 12px; margin-bottom: 6px; font-weight: bold;}
.sz-item {margin-inline-start:0; }
.sz-item__title {margin-top: 6px; margin-bottom: 3px;  color: var(--jeans);}
.sz-item__meta {margin-top: 3px; margin-bottom: 3px; color: var(--gray);display: block;}
.sz-powered-by a:link {font-size:70%; color: var(--gray);}
.sz-powered-by a:visited {font-size:70%; color: var(--gray);}

/*footer*/
.icon {width: 5vh; height: 5vh; padding: 1vh;}
#contact {text-align: center;}
#contact_h2 {background-color: var(--blue); color: var(--white); padding: 1%;}
#copyright {color:var(--gray); text-align: left; padding-left:1vw;}
#gototop {text-align: right; padding-right:1vw;}
#gototop a:visited {color: var(--jeans);}


/*mobile adaptation*/
@media only screen and (max-width : 1100px),
only screen and (max-device-width : 1100px){
.icon {width: 10vw; height: 10vw; padding: 1vw;}
//body, table {text-align: left;}
nav, #about {font-size: 1.5em;}
table {font-size: 2em;}
//#foto {height:30vw; float: left;}
#title {margin-top: 3vh;}

//#header_col1 {width: 100vw;}
//#header_col2 {width: 100vw; border-top: 10px solid var(--blue);}
      
#content {margin: 0 2vw 0 2vw;} 

#copyright, #gototop {text-align: center; width: 100vw; font-size:2em;}


}