/* Grundlayout Michaels Homepage */

html {
  background: transparent!important;
  --blue: #306f91;
  --green: #8db243;
  --red: #c32e04;
  --yellow: #dfac20;
  --lightblue: #e6f2f7;
  --lightgreen: #ebf5d7; 
  --lightred: #ffebe6;
  --lightyellow: #fdfcf3;
}

body {
  margin: auto;
  padding: 0;
/*  font-family: sans-serif;*/
  color: #333333;
}

a:link {
  color: lightgreen;
/*  -webkit-text-fill-color: green;*/
}

a:visited { 
  color: gold;
/*  -webkit-text-fill-color: gold;*/
}

header,
main,
aside,
footer {
  border-radius: 0.5em;
  border: 2px solid;
  margin: 0;
/*  font-family: 'PT Sans';*/
}

header {
/*  grid-column: 1 / -1;*/
  background: red;
  border-color: silver;
  color: green;
  height: 4em;
}

#logo { 
  height: 4em;
  border-radius: 0.5em;
}

main {
  border-color: gold;
  background-attachment: local;
  height: 35em;
  overflow-y: scroll;
}

#main {
  color: orange;
  background-color: blue;
  background-image: url(src/assets/wappen.png);
  background-repeat: no-repeat;
  background-position: top center;
  padding-top: 11em;
  height: 24em;
}

#z1 { 
  height: 5em;
}

#toplink {
  background: white;
  bottom: 0;
  margin: 0;
  padding: 0.5em 1em;
  position: fixed;
  right: 0;
}

#main section { 
  padding-top: 26em;
}

p {
/*  max-width: 46em;*/
  max-width: 50em;
}

h1,
main > svg,
body > svg {
  border-radius: 0 .5rem .5rem;
  border: 1px solid;
  padding: 1rem;
  margin: 0.1em;
}

main > svg {
  width: calc(100% - 2rem);
  background: white;
  padding:0;
}

body > svg {
  border: 1px dashed var(--blue);
  padding: 0;
}

#currently {
  display: flex;
  border-color: #d5d5d5;
  font-size: 100%;
  color: red;
  padding-top: 0.5em;
  align-items: center;
  justify-content: center;
}

#counter { 
  align-items: center;
  justify-content: center;
}

#hinweis {     /* für Container */
  padding: 1em;
  margin: 2em auto;
  min-width: 20em;
  height: auto;
  background-color: white;
  border-left: 5px solid #c32e04;
}

.hinweis {     /* für Textzeile */
  color: #c32e04;
  font-style: italic;
  border-bottom: 1px dotted;
  display:inline-block;
}

#musica { 
  color: green;
  background-color: #ffaaff;
  overflow: auto;
}

#mh a:link {
  color: purple;
}

#mh table,
#mh th,
#mh td {
  border: 1px solid;
  border-collapse: collapse;
  color: blue;
  background-color: #00fa00;
}

#mh thead tr {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 0;
}

#mh td {
  padding: .5em;
}

#mh td:empty{
  background-color: #00fa9f;
}

#sonstige { 
  color: red;
  background-color: #ffaaff;
  overflow: auto;
}

#mr {
  color: lightgreen;
  background-color: white;
  overflow: auto;
}

#cover {
  border: 1px solid;
  border-color: black;
  max-width: 100%;
  vertical-align: top;
}

#job {
  color: lightgray;
  background-color: blue;
}

#job table,
#job td {
  border-style: none;
  border-collapse: collapse;
}

#job td {
  padding: .5em;
  box-shadow: inset 1px 3px 5px -3px rgba(0,0,0,0.5);
}

#job tbody tr:nth-child(odd) {
  color: black;
  background-color: #0090ff;
}

#job td:empty{
  box-shadow: none;
  background-color: none;
}

#job tr:empty{
  box-shadow: none;
  background-color: black;
}

#hobbie { 
  background-color: #ffaaaa;
}

#hobbie h3 { 
  color: blue;
}

@media(min-height: 45em){
  main {
    height: 51em;
  }
  #main {
    height: 40em;
  }
  #main section { 
    padding-top: 24em;
  }
}

@media(min-height: 65em){
  main {
    height: 73em;
  }
  #main {
    height: 70em;
  }
  #main section { 
    padding-top: 24em;
  }
}