#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;
    height: 56px;
    flex: 1 1 1130px;
    gap: 10px;
    justify-content: space-between;
    max-width: 1130px;
    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 {
      background-color: var(--colorGreyBright);
      display: flex;
      height: 30px;
      justify-content: flex-end;
      margin: 0px 0px 8px 0px;
      position: relative;
      @media (max-width: 900px) or (pointer: coarse) {
        flex: 1;
      }
      > input {
        height: 30px;
        opacity: 0;
        margin: 0px;
        position: absolute;
        right: 0px;
        top: 0px;
        width: 100%;
        z-index: 1;
        @media (pointer: fine) {
          &:hover {
            cursor: pointer;
          }
        }
        &:checked {
          ~ div {
            height: 60px;
            > div {
              > img {
                transform: rotate(180deg);
              }
            }
          }
        }
      }
      > div {
        background-color: var(--colorGreyBright);
        border-radius: 5px;
        box-shadow: 1px 1px 3px var(--colorBlue);
        display: flex;
        /* flex-wrap: wrap; */
        flex-direction: column;
        height: 30px;
        overflow: hidden;
        > a {
          line-height: 30px;
          padding: 0px 5px 0px 10px;
          text-decoration: none;
          @media (pointer: fine) {
            &:hover {
              color: var(--colorGreen);
            }
          }
        }
        > div {
          display: flex;
          > img {
            height: 20px;
            margin: 5px 10px 5px 5px;
          }
          > p {
            color: var(--colorGreen);
            line-height: 30px;
            margin: 0px 5px 0px 10px;
          }
        }
      }
    }
  }
}