html, body {
  background-color: #090909;
  color:rgb(237,240,242);
  border:0;
  margin:0;
  padding:0;
}
.dropdown {
  position:absolute;
  margin-top: 1.2rem;
  margin-left: 1.5rem;
}

#homebtn {
  position: absolute;
  margin-top:3.2vw;
  width:100%;
  height:100px;
  left:9.8rem;
  display:none
}

.dropdown-content {
  position:absolute;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  @media (pointer:none), (pointer:coarse) {
    font-size: 12pt;
    font-weight:bold;
    width:70vw;
  }
  @media (pointer:fine) {
    font-size: 16pt;
    font-weight:bold;
    width:50vw;
    min-width:30rem;
  }
  min-width:20rem;
  max-width: 30rem;
  margin-left:1.5rem;
  margin-top: -2.5rem;
  background-color: #090909;
  border:2px solid grey;
  box-shadow: 0px 8px 16px 0px rgba(172, 167, 167, 0.137);
  z-index: 1;
  display:none;
}

.dropbtn {
  background-color: transparent;
  border: none;
}
.dropbtn img {
  width:32pt;
  height:32pt;
  @media (pointer:fine) {
    width:48pt;
    height:48pt;
  }
}
.dropdown:hover .dropdown-content {display:block; }
.dropdown-content a {
  color:rgb(237,240,242);
  text-decoration: none;
  display: block;
}
.dropdown-content li {
  @media (pointer:fine) {
    padding:0.5rem;
  }
  @media (pointer:none), (pointer:coarse) {
    padding:2vw;
  }
}
.dropdown-content a:hover {background-color: #ddd; color:#090909}


.button1 {
  text-align: center;
  vertical-align: middle;    
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20pt;
  font-weight:bold;
  margin:1em;
}

.button1 a {
  color:rgb(237,240,242);
  text-decoration: none;
  padding:10px;
  background-color: rgb(92, 92, 92); 
  border: 2px solid;
}

.button2 {
  text-align: center;
  vertical-align: middle;    
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20pt;
  font-weight:bold;
  margin:1vw auto;
  color:rgb(237,240,242);
  text-decoration: none;
  padding:10px;
  background-color: rgb(92, 92, 92); 
  border: 2px solid;
}

.button3 {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20pt;
  font-weight:bold;
  margin:1em;
}

.button3 a {
  color:rgb(237,240,242);
  text-decoration: none;
  padding:10px;
  background-color: rgb(92, 92, 92); 
  border: 2px solid;
}

.button3 a:hover  {
  background-color: #ddd; 
  color:#090909;
}

@media (pointer:fine) {
  .button1 a:hover {background-color: #ddd; color:#090909}
  .button2:hover {background-color: #ddd; color:#090909}
}

#backbtn {
  position: absolute;
  top:4vw;
  left:0.5rem; 
  @media (pointer:fine) {
    top:7rem;
    left:2.7rem; 
  }
  height:46pt;
  width:42pt;
}

#backbtn:hover  {
  background-color: rgb(96,96,96);
}


#backbtn2 {
  position: absolute;
  top:5.5rem;
  left:1rem; 
  height:46pt;
  width:42pt;
}

#backbtn2:hover  {
  background-color: rgb(96,96,96);
}

#mailform {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14pt;
  display:none;
  padding-top:2vw;
  margin: 0 auto;
  width:fit-content;
  @media (pointer:fine) {
    width:90vw;
    max-width: 60rem;
  }
}
#mailform input {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13pt; 
}
#mailform textarea {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13pt; 
}

#mailform p {
  margin:0;
  margin-bottom:0.5rem;
}

div.flex-container {
  display:flex;
  flex-direction:column;
  width:100%;
}
div.flex-header {
  height:60vw;
  max-height:30rem;
}
div.flex-body {
  min-height:92vh; 
  @media (height < 600px) {
    min-height:90vh;
  }
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13pt;
}
div.flex-footer {
  height:8vh;
  @media (height < 600px) {
    height:10vh;
  }
  background-color:rgb(20,30,30);
  width:100%;
  overflow:hidden;
  /*border:3px dotted blue;*/
}

div.gen-content {
  /*background-color:blue;*/
  margin-left:5vw;
  width:90vw;
}

div.flex-header2 {
  height:10rem;
}