@charset "UTF-8";

header {
  top: 0;
  left: 0;
  position: fixed;
  width: 100vw;
  height: 70px;
  box-sizing: border-box;
  padding: 0 20%;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;

  justify-items: center;
  align-items: center;
  background-color: #f7fafc;
  z-index: 1000;

  &:not(:has(*)) {
    display: none;
  }

  > span#logotype {
    display: flex;
    flex-direction: column;
    font-size: 1.1rem;

    > h4:only-of-type:first-child {
      margin: unset;
      font-family: "Cascadia Code";
      font-size: 2.5em;
    }

    > small:only-of-type:last-child {
      justify-self: end;
      align-self: end;
      margin-top: -0.8em;
      font-family: "Bahnschrift";
      font-size: 0.62em;
      font-weight: 800;
      text-transform: uppercase;
    }
  }

  > nav#menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    font-family: "Geologica";

    > a {
      text-decoration: none;
      font-weight: 500;
      font-size: 1rem;
      text-transform: uppercase;
      color: rgb(0, 0, 0, 0.5);
      transition: ease 0.2s;

      &:hover {
        color: #000;
      }
    }
  }

  > a#order {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 0.5em 1.3em;
    border-radius: 1.125em;

    font-family: "Cascadia Code";
    font-weight: 400;
    text-decoration: none;
    background-color: #0ea5e9;
    color: #fff;
    transition: 0.2s;

    &:hover {
      transform: scale(1.05);
    }
  }
}
