#StyleContainer {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  align-items: center;
  justify-content: center;
}
#SchriftfarbeWrapper,
#BackgroundWrapper,
#kleineKachelWrapper,
#kleineKachelHoverWrapper,
#kleineKachelOnWrapper,
#ButtonfarbeWrapper,
#großeKachelWrapper,
#UmrandungWrapper {
  display: flex;
  flex-direction: column;
  margin: 2px;
  background-color: var(--kleineKachel);
  width: 100%;
  border-radius: 10px;
  align-items: center;
}
#Schriftfarbe,
#Background,
#kleineKachel,
#kleineKachelHover,
#kleineKachelOn,
#Buttonfarbe,
#großeKachel,
#Umrandung {
  display: flex;
  background-color: var(--kleineKachel);
  width: 100%;
  height: 50px;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}
#colorpickerWrapperSchriftfarbe,
#colorpickerWrapperBackground,
#colorpickerWrapperkleineKachel,
#colorpickerWrapperkleineKachelHover,
#colorpickerWrapperkleineKachelOn,
#colorpickerWrapperButtonfarbe,
#colorpickerWrappergroßeKachel,
#colorpickerWrapperUmrandung {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  display: none;
}
.colorpicker {
  display: flex;
  border: 1px solid var(--Umrandung);
  border-radius: 10px;
  width: 50%;
  height: 40px;
  background-color: var(--Buttonfarbe);
}

#StyleChoseWrapper {
  display: flex;
  flex-direction: row;
}
#StyleChoseButtonDark,
#StyleResetWrapper,
#StyleImportWrapper,
#StyleShareWrapper,
#StyleChoseButtonLight,
#StyleChoseButtonCustom {
  display: flex;
  height: 40px;
  width: 100%;
  margin: 10px;
  background-color: var(--kleineKachel);
  border: 1px solid var(--Umrandung);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
}
#Darkmode {
  width: 25px;
  height: 35px;
  background-image: url(IMG/moon-solid.png);
  color: var(--Schriftfarbe);
  background-size: 100%;
  background-repeat: no-repeat;
}
#Lightmode {
  width: 35px;
  height: 35px;
  background-image: url(IMG/sun-solid.png);
  color: var(--Schriftfarbe);
  background-size: 100%;
  background-repeat: no-repeat;
}
#Custommode {
  width: 35px;
  height: 35px;
  background-image: url(IMG/pen-solid.png);
  color: var(--Schriftfarbe);
  background-size: 100%;
  background-repeat: no-repeat;
}
#StyleChoseButtonDark:hover, #StyleChoseButtonLight:hover, #StyleChoseButtonCustom:hover{
  background-color: var(--kleineKachelHover);
}
