@charset "UTF-8";

html, body {
  height: 100%;
  width: 100%;
  margin: auto;
}

article, aside, footer, header, main, nav, section {
  display: block;
  font-family: sans-serif;
}

.mobile {
  display: none;
}

header {
  background: #353535;
  box-shadow: 0px 10px 5px grey;
}

.logo {
  display: block;
  margin: auto;
}

nav {
  color: white;
  display: flex;
  margin: auto;
}

summary:hover {
  text-decoration: underline;
  cursor: pointer;
}

details {
  padding: 5px;
  text-align: left;
  width: 550px;
  margin-left: auto;
  margin-right: auto;
}

nav a {
  text-decoration: none;
  padding: 5px;
  transition: font-size 0.2s;
  color: white; 
}

nav a:hover {
  text-shadow: -1px 0 blue, 0 1px blue, 1px 0 blue, 0 -1px blue;
}

summary {
  text-align: center;
}

main {
  max-width: 1010px;
  padding: 10px;
  margin: auto;
}

main a {
  text-decoration: none;
  transition: text-decoration 0.2s;
}

main a:hover, main a:focus {
  text-decoration: underline;
  cursor: pointer;
}

.subheader {
  border-radius: 5px;
}

.subheader, thead {
  background:  #3498DB;
}

h1 {
  color: white;
}

h3 {
  margin-left: 5px;
  color: white;
}

table img:hover {
   box-shadow: 2px 2px 4px #000000;
}

footer {
  max-width: 1000px;
  margin: auto;
  padding-top:10px;
}

footer a {
  padding: 5px;
  transition: font-size 0.2s;
}

footer a:hover {
   box-shadow: 2px 2px 4px #000000;
}

section {
  display: flex;
}

section ul {
  width: 50%;
  list-style-type: none;
}

aside {
  background: lightgray;
  padding-top: 5px;
  padding-bottom: 5px;
}

/* Responsive
==================================== */

@media (max-width: 800px) {
        main, footer { width: 90% }
	.hello { border-spacing:0px; }
	.hello td { display:table;padding-left:20px;padding-right:20px;margin:auto;width:90%; }
	article table { border-style:solid; }
        tr { display:table;width:100%; }
        td { display:table-row; }
        .row div { display:table;  width:100%; }
        .column { display:table-row; }
	section { display:block; }
	section ul { width:90%; }
	.logo { margin-right:10px; }
	.desktop { display: none;}
	.mobile { display: block; }
	details { background: #353535; padding: 5px; position: absolute; top: 8px; left: 8px; width: auto;}
	summary { text-align: left; }
	header {  height: 55px; }
	header a {text-decoration: none; list-style-type: none; }
	details > summary { list-style: none; }
	details > summary::marker { display: none; }
	footer p a { display:block; }
    }