@import url('https://fonts.googleapis.com/css2?family=Lato&family=Mr+Dafoe&display=swap');

html, body {
  background-color: #2c2b30;
  background: #2c2b30;
  color: white;
}

body {
  scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
}

.navbar {
    width: 250px;
    height: 100vh;
    position: fixed;
    margin-left: -300px;
    background-color: #101010;
    transition: 0.4s;
}

.nav-link {
    font-size: 1.25em;
}

.nav-link:active,
.nav-link:focus,
.nav-link:hover {
    background-color: #ffffff26;
}

.dropdown-menu {
    background-color: #7952b3;
}

.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #ffffff26;
}

.my-container {
    transition: 0.4s;
}


/* for navbar */

.active-nav {
    margin-left: 0;
}


/* for main section */

.active-cont {
    margin-left: 250px;
}

#menu-btn {
  color: #ffffff;
  padding-left: 0px;
  font-size: 1.7rem;
}

#menu-contact {
  color: #ffffff;
  padding-left: 0px;
  font-size: 1.7rem;
}

#menu-logo {
  color: #ffffff;
  font-family: 'Mr Dafoe', cursive;
  font-size: 2rem;
  text-decoration: none;
}



#menu-btn:focus {
    box-shadow: 0 0 0 0.25rem #7952b344;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif;
}

.textareaGrau {
  background-color: rgba(17, 17, 17, 1);
  color: white;
  border: none;
  height: 200px;
}

.formEingabe {
  max-width: 600px;
  background: #101010;
  padding-top: 30px;
  padding-bottom: 20px;
  padding-left: 35px;
  padding-right: 35px;
  border-top-right-radius: 40px;
  border-top-left-radius: 0px;
  margin-top: 50px;
  margin-bottom: 0px;
}

.formEingabe textarea {
  min-height: 150px;
}

.formEingabe h2 {
  margin-bottom: 20px;
}

.formEingabe .form-floating>label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  padding: 1rem .75rem;
  pointer-events: none;
  border: 1px solid transparent;
  transform-origin: 0 0;
  transition: opacity .1s ease-in-out,transform .1s ease-in-out;
  color: initial;
}

.formEingabe .btn {
  border-radius: 30px;
  padding-right: 20px;
  padding-left: 20px;
  margin-top: 10px;
}

.btn-primary {
  color: #ffffff;
  background-color: #1472e3;
  border-color: #1472e3;
}

.btn-secondary {
  color: #ffffff;
  background-color: #2c2b30;
  border-color: #2c2b30;
}

.table-dark {
  --bs-table-bg: #2c2b30;
  --bs-table-striped-bg: #2c2b30;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  color: #fff;
}

.fa-toggle-on {
  font-size: 2rem;
  color: #1472e3;
  transition: color .4s ease-in-out;
}
  
.fa-toggle-on:hover {
  color: #0b5ed7;
  transition: color .4s ease-in-out;
}
  
.fa-toggle-off {
  font-size: 2rem;
  color: #101010;
  transition: color .4s ease-in-out;
}
  
.fa-toggle-off:hover {
  color: #565e64;
  transition: color .4s ease-in-out;
}

@media (max-width: 768px) {
  .formEingabe {
    max-width: auto;
    border-top-right-radius: 40px;
    border-top-left-radius: 40px;
    width: 100%;
  }
}

@media (min-width: 769px) {
  .formEingabe {
    margin-right: auto;
    margin-left: auto;
  }
  
  .formPre {
    background: #101010;
  }
}





/*
Black: #101010
White: #ffffff

Primary: #1472e3
Secondary: #2c2b30
*/