/* Allgemeine Header CSS-Datei -> Beeifnlusst alle Seiten */

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.header-div {
  padding: 9px 50px;

  background-color: rgb(241, 240, 228);

  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* Logo */

.logo-div {
  display: flex;
  justify-content: center;
}

.logo {
  width: 120px;

  cursor: pointer;
}

/* Header Links */

.header-buttons {
  width: 370px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.article-button,
.articlewish-button,
.contact-button {
  padding: 7px 14px;
  margin-left: -17px;

  background-color: rgb(241, 240, 228);

  font-size: 15px;

  border: none;
  border-radius: 4px;

  cursor: pointer;
  transition: background-color 0.2s;
}

.article-button:hover,
.articlewish-button:hover,
.contact-button:hover {
  background-color: rgb(125, 141, 134);
  color: white;
}

/* Benuzer-Icon */

.user-icon-button {
  width: 42px;
  height: 42px;

  background-color: rgb(241, 240, 228);

  border: solid;
  border-color: rgb(62, 63, 41);
  border-width: 2px;
  border-radius: 25px;

  cursor: pointer;
  transition: opactiy 0.2s;
}
.user-icon-button:hover {
  opacity: 0.8;
}

/* Bildschirmgrösseanpassung */

@media (max-width: 720px) {
  .logo {
    width: 0;
  }

  .header-div {
    padding-top: 25px;

    justify-content: center;
  }

  .header-buttons {
    margin-left: -10px;

    justify-content: space-between;
  }
}

@media (max-width: 430px) {
  .user-icon-button {
    margin-right: -25px;
    
  }

  .article-button,
  .articlewish-button,
  .contact-button {
    font-size: 15px;

    transition: background-color 0s;
  }

  .user-icon-button {
    transition: opacatiy 0s;
  }
}