/* kumbh-sans-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Kumbh Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/kumbh-sans-v22-latin-regular.woff2") format("woff2");
}
/* kumbh-sans-900 - latin */
@font-face {
  font-display: swap;
  font-family: "Kumbh Sans";
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/kumbh-sans-v22-latin-900.woff2") format("woff2");
}

body {
  background: rgb(135, 232, 110);
  background: linear-gradient(180deg, rgb(135, 232, 110) 0%, rgb(2, 52, 48) 100%);
  min-height: 100vh;
  overflow: hidden;
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: rgb(1, 53, 47);
}

body.local {
  background: var(--color-secondary);
  background: linear-gradient(180deg, rgb(254, 150, 141) 0%, rgb(181, 24, 0) 100%);
}

button {
  font-family: "Kumbh Sans", sans-serif;
  font-weight: 400;
  background-color: rgb(1, 53, 47);
  color: rgb(255, 255, 255);
  border-radius: 4px;
  padding: 16px 32px;
  font-size: 1rem;
  cursor: pointer;
  border: 2px solid rgb(255, 255, 255);
  &:hover {
    color: rgb(1, 53, 47);
    background-color: rgb(135, 232, 110);
  }
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  height: 80px;

  .menu-heading-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }
}

h1 {
  text-transform: uppercase;
  font-weight: 900;
  font-size: 4rem;
  color: rgb(1, 53, 47);
  -webkit-text-fill-color: rgb(1, 53, 47); /* Will override color (regardless of order) */
  -webkit-text-stroke: 3px rgb(255, 255, 255);
}

.browser-support {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-inline-end: 16px;
  gap: 20px;
  svg {
    width: 50px;
    height: 50px;
    fill: rgb(255, 255, 255);
    position: relative;
    .not-supported {
      fill: rgba(255, 255, 255, 0.6);
    }
  }
  div.mobile {
    position: relative;
  }
  svg.mobile {
    position: absolute;
    width: 20px;
    height: auto;
    bottom: -8px;
    right: -12px;
    background-color: rgb(130, 225, 108);
    padding: 2px;
    border-radius: 4px;
    border: 1px solid rgb(255, 255, 255);
  }
}

.menu-wrapper {
  display: flex;
  gap: 32px;
  margin-block-start: 32px;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  li {
    margin-inline-start: 16px;
    margin-block-end: 16px;
    button {
      width: 50px;
      height: 50px;
      padding: 0;
    }
  }
}