@font-face {
  font-family: "openSans";
  src: url("OpenSans.ttf") format("truetype");
}

@font-face {
  font-family: "urbanist";
  src: url("Urbanist-VariableFont_wght.ttf") format("truetype");
}

body{
  font-family: urbanist;
  background-color: #20272f;
  color: #FFFFFF;
  height: 100%;
  /*background-image: linear-gradient(60deg, #20272f 0%, #0f1113 100%);*/
  background-attachment: fixed;
}

html {
    max-width: 100%;
    overflow-x: hidden;
}

.linkNoDeco:link, .linkNoDeco:visited, .linkNoDeco:hover, .linkNoDeco:active{
  text-decoration: none;
  color: #FFFFFF;
}

.onOffButtonIconContainer{
  border: 1px solid rgb(204, 204, 204);
  border-radius: 5px;
}

.hotbarContainer{
  width: 100%;
}

#hotbar-content{
  display: flex;
  flex-direction: column;
  width: 100%;
  border-bottom: 1px solid rgb(204, 204, 204);
}

#hotbar-buttons{
  display: flex;
  flex-direction: row;
}

#hotbar-headline{
  display: flex;
  flex-direction: row;
  min-width: 28rem;
  align-items: center;
}

#hotbar-logo{
  font-family: urbanist;
}

.hotbar-button-container{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 1rem;
}

.decoScrollBarContainer{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
  /*margin-left: 5rem;*/
}

.sectionsContainer{
  transition: width 1s;
  margin-bottom: 1rem;
  margin-left: 4rem;
  margin-right: 4rem;
}

.sectionContent{
  padding: 2rem;
  width: 100%;
  font-size: 120%;
}

.flexRow{
  display: flex;
  flex-direction: row;
}

.flexCol{
  display: flex;
  flex-direction: column;
}

.mr-025{
  margin-right: 0.25rem;
}

.mr-05{
  margin-right: 0.5rem;
}

.w-100p{
  width: 100%;
}

.w-50p{
  width: 50%;
}

.font-lighter{
  font-weight: lighter;
}

.highlight-100{
  color: #A7FFEB;
  font-size: 150%;
  font-weight: bold;
}

.highlight-200{
  color: #64FFDA;
  font-size: 150%;
  font-weight: bold;
}

.highlight-300{
  color: #1DE9B6;
  font-size: 150%;
  font-weight: bold;
}

.footerContainer{
display: flex;
width: 100%;
}

.imprintContainer{
  display: flex;
  flex-direction: row;
  padding: 1rem;
}

.imprintHeader{
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.imprintColumn{
  margin: 1rem;
  display: flex;
  flex-direction: column;
}

.imprintColumn:first-child{
  margin-left: 0px;
}

.contactRow{
  display: flex;
  flex-direction: row;
}

fancy-contact{
  max-width: 35%;
}

g8-partners{
  display: flex;
  width: 100%;
}

h1{
  margin: 0px;
}

@media only screen and (max-width: 600px) {
  body {

  }

  #hotbar-headline{
    min-width: 1rem;
  }

  #hotbar-buttons {
    flex-direction: column;
  }


  .hotbar-button-container {
    justify-content: flex-start;
    justify-content: center;
  }

  #hotbar-headline {
    justify-content: center;
  }

  .sectionsContainer{
    transition: width 1s;
    margin-bottom: 1rem;
    margin-left: 0rem;
    margin-right: 0rem;
  }

  .sectionContent{
    font-size: 100%;
  }

  .fancySection{
    max-width: 100%;
    min-width: 0%;
  }

  .imprintContainer{
  display: flex;
  flex-direction: column;
  }

  .imprintColumn{
    margin: 0rem;
    margin-bottom: 1rem;
  }

  .imprintColumn:first-child{
    margin: 0rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  fancy-contact{
    max-width: 100%;
  }

  .contactRow{
    display: flex;
    flex-direction: column;
  }
}