@font-face {
  font-family: Dongle-Light;
  src: url(https://luney-the-cat.de/fonts/Dongle-Light.ttf);
}
@font-face {
  font-family: Dongle-Regular;
  src: url(https://luney-the-cat.de/fonts/Dongle-Regular.ttf);
}
@font-face {
  font-family: Dongle-Bold;
  src: url(https://luney-the-cat.de/fonts/Dongle-Bold.ttf);
}
@font-face {
  font-family: Dongle-Bold;
  src: url(https://luney-the-cat.de/fonts/Dongle-Bold.ttf);
}
@font-face {
  font-family: Roboto-Italic;
  src: url(https://luney-the-cat.de/fonts/Roboto-Italic-VariableFont_wdth,wght.ttf);
}
@font-face {
  font-family: Roboto-Regular;
  src: url(https://luney-the-cat.de/fonts/Roboto-VariableFont_wdth,wght.ttf);
}

.dongle-Light{
  font-family: "Dongle-Light", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 18px;
  font-style: normal;
}
.dongle-regular{
  font-family: "Dongle-Regular", system-ui;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 18px;
  font-style: normal;
}
.dongle-bold{
  font-family: "Dongle-Bold", system-ui;
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: 18px;
  font-style: normal;
}
.dongle-header{
  font-family: "Dongle-Bold", system-ui;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: 64px;
  font-style: normal;
  color: #f170a6;
}
.roboto-regular{
  font-family: "Roboto-Regular", system-ui;
  font-optical-sizing: auto;
  font-weight: 500;
  font-size: 18px;
  font-style: normal;
}
.BG0{
  background-image: url('https://luney-the-cat.de/images/BG_64px.webp');
}

/*BUTTONS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*PRimary Button but Light*/
.PrimaryButt-Light{
  margin-left: 1%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f79f2f;
  color: #FFFFFF;
  border-style: solid;
  border-color: #f79f2f;
  border-radius: 100px;
  border-width: 4px;
}
.PrimaryButt-Light:hover{
  background-color: #FFFFFF;
  color: #f79f2f;
  border-width: 4px;
  border-radius: 100px;
}
.PrimaryButt-Light:active{
  background-color: #f79f2fA0;
  color: #f79f2f;
  border-radius: 100px;
  border-width: 2px;
}
/*Primary Button but DARK*/
.PrimaryButt-Dark{
  margin-left: 1%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #6D6AD4;
  color: #FFFFFF;
  border-style: solid;
  border-color: #6D6AD4;
  border-radius: 100px;
  border-width: 4px;
}
.PrimaryButt-Dark:hover{
  background-color: #FFFFFF;
  color: #6D6AD4;
  border-width: 4px;
  border-radius: 100px;
}
.PrimaryButt-Dark:active{
  background-color: #6d6ad4a0;
  color: #6D6AD4;
  border-radius: 100px;
  border-width: 2px;
}
.LinkButt-Light{
  margin-left: 1%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #00000000;
  color: #f79f2f;
  border-style: solid;
  border-color: #00000000;
  border-radius: 100px;
  border-width: 4px;
}
.LinkButt-Light:hover{
  background-color: #f79f2f50;
  color: #f79f2f;
  border-color: #f79f2f;
  border-width: 4px;
  border-radius: 100px;
}
.LinkButt-Light:active{
  background-color: #f79f2fA0;
  color: #f79f2f;
  border-color: #f79f2f;
  border-width: 2px;
  border-radius: 100px;
}
.LinkButt-Dark{
  padding-top: 10px;
  margin-left: 1%;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #00000000;
  color: #6D6AD4;
  border-style: solid;
  border-color: #00000000;
  border-radius: 100px;
  border-width: 4px;
}
.LinkButt-Dark:hover{
  background-color: #6d6ad450;
  color: #6D6AD4;
  border-color: #6D6AD4;
  border-width: 4px;
  border-radius: 100px;
}
.LinkButt-Dark:active{
  background-color: #6d6ad4a0;
  color: #6D6AD4;
  border-color: #6D6AD4;
  border-width: 2px;
  border-radius: 100px;
}
.DropdownButt-Top{
  transition-duration: 500ms;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
  background-color: #FFFFFF;
  color: #6D6AD4;
  border-style: solid;
  border-color: #6D6AD4;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-width: 1px;
  width: 100%;
  display: block;
}
.DropdownButt-Top:hover, .DropdownButt-Top:active{
  background-color: #d8d7ff;
  box-shadow: 0 0 10px 0 #00000010;
  transition: max-height 0.2s ease-out;
}
.DropdownButt-Mid{
  transition-duration: 500ms;
  padding-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
  background-color: #FFFFFF;
  color: #6D6AD4;
  border-style: solid;
  border-color: #6D6AD4;
  border-width: 1px;
  width: 100%;
  display: block;
}
.DropdownButt-Mid:hover, .DropdownButt-Mid:active{
  background-color: #d8d7ff;
  box-shadow: 0 0 10px 0 #00000010;
  transition: max-height 0.2s ease-out;
}
.DropdownButt-Bottom{
  transition-duration: 500ms;
  padding-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
  background-color: #FFFFFF;
  color: #6D6AD4;
  border-style: solid;
  border-color: #6D6AD4;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-width: 1px;
  width: 100%;
  display: block;
}
.DropdownButt-Bottom:hover, .DropdownButt-Bottom:active{
  background-color: #d8d7ff;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  box-shadow: 0 0 10px 0 #00000010;
  transition: max-height 0.2s ease-out;
}
.CollapsedCotent-Top{
  display: none;
  background-color: #fff7ee;
  padding: 30px;
  border-width: 0px 1px 1px 1px;
  border-color: #6D6AD4;
  border-style: solid;
}
.CollapsedCotent-Bottom{
  display: none;
  background-color: #fff7ee;
  padding: 30px;
  border-width: 0px 1px 1px 1px;
  border-color: #6D6AD4;
  border-style: solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}


.centerHeaderWarn00{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
}
.centerHeaderWarn01{
  background-color: #1a193f;
}
.headerWarn00{
  margin-top: 0px;
  margin-bottom: 0px;
  color: #f170a6;
  font-size: 64px;
  text-align: center;
  font-family: 'Pacifico', Calibiri, Tahoma, sans-serif;
}
.paragraphWarn00{
  font-size: 30px;
  color: #f79f2f;
  font-family: 'baloo_thambi', Calibiri, Tahoma, sans-serif;
}
.paragraphWarn01{
  font-size: 24px;
  color: #f79f2f;
  font-family: 'baloo_thambi', Calibiri, Tahoma, sans-serif;
}

.centerLogo{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 128px;
}
.header01{
  margin-top: 35px;
  margin-bottom: 0px;
  color: #f170a6;
  font-size: 64px;
  text-align: center;
  font-family: 'Dongle-Bold', Calibiri, Tahoma, sans-serif;
}

/*Buttons styleguide*/

.centerButtons{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 64px;
}
.button {
  text-align: center;
  font-family: 'Roboto-Regular', Calibiri, Tahoma, sans-serif;
  width: 256px;
  background-color: #1a193f;
  box-shadow: 0 0 15px #f79f2f;
  border: rgb(26, 25, 63);
  border-radius: 25px;
  padding: 15px;
  color: rgb(244, 244, 197);
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 10px 2px;
  transition-duration: 0.2s;
} 
.button:hover{
  background-color: #f79f2f;
  box-shadow: 0 0 20px #f4f4c5;
  width: 280px;
  margin: 13px 2px;
  font-size: 18px;
}
.Collapsable + * {
  display: none;
}