#header {
  align-items: center;
  background-color: var(--colorGreyBright);
  box-shadow: 0px 1px 3px var(--colorGreyFontHover);
  display: flex;
  height: 120px;
  justify-content: center;
  left: 0px;
  position: fixed;
  top: 0px;
  transition: height 0.3s ease;
  width: 100%;
  z-index: 2;
  @container html scroll-state(scrollable: top) {
    height: 70px;
  }
  @media (max-width: 900px) or (pointer: coarse) {
    height: 70px;
  }
  > div {
    align-items: flex-end;
    display: flex;
    flex: 0 1 1130px;
    height: 56px;
    gap: 10px;
    justify-content: space-between;
    padding: 0px 15px 0px 15px;
    > a {
      cursor: pointer;
      > img {
        margin: 0px 0px 0px 0px;
        transition:
          width 0.3s ease,
          margin 0.3s ease;
        width: 140px;
        @container html scroll-state(scrollable: top) {
          margin: 0px 20px 0px 0px;
          width: 120px;
        }
        @media (max-width: 900px) or (pointer: coarse) {
          margin: 0px 20px 0px 0px;
          width: 120px;
        }
      }
    }
    > #language {
      align-items: flex-end;
      display: flex;
      justify-content: flex-end;
      @media (max-width: 900px) or (pointer: coarse) {
        flex: 1;
      }
      > a {
        line-height: 30px;
        padding: 0px 10px 0px 10px;
        text-decoration: none;
        @media (pointer: coarse) {
          padding: 34px 10px 0px 10px;
        }
        @media (pointer: fine) {
          &:hover {
            color: var(--colorGreen);
          }
        }
      }
      > p {
        color: var(--colorGreen);
        font-family: 'Roboto Black', sans-serif;
        line-height: 30px;
        margin: 0px 10px 0px 10px;
      }
    }
  }
}