/**************************+*************************/
/*               font import from monotype           */
/*                                                  */
/****************************************************/

/* @import must be at top of file, otherwise CSS will not work */
@import url("https://cdn.fonts.net/t/1.css?apiType=css&projectid=8d32ce6f-ce9c-421c-a4cd-ef3e95b12ec7");

@font-face {
  font-family: "NeueHelvetica75Bold";
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("assets/NeueHelvetica/NeueHelvetica75Bold_normal_normal.woff2")
      format("woff2"),
    url("assets/NeueHelvetica/NeueHelvetica75Bold_normal_normal.woff")
      format("woff");
}
@font-face {
  font-family: "NeueHelvetica45Light";
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url("assets/NeueHelvetica/NeueHelvetica45Light_normal_normal.woff2")
      format("woff2"),
    url("assets/NeueHelvetica/NeueHelvetica45Light_normal_normal.woff")
      format("woff");
}

/**************************+*************************/
/*                   reset                          */
/* https://piccalil.li/blog/a-more-modern-css-reset */
/****************************************************/

@layer reset {
  /* Box sizing rules */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Prevent font size inflation */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  /* Remove default margin in favour of better control in authored CSS */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin-block-end: 0;
  }

  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role="list"],
  ol[role="list"] {
    list-style: none;
  }

  /* Set core body defaults */
  body {
    min-height: 100vh;
    line-height: 1.5;
  }

  /* Set shorter line heights on headings and interactive elements */
  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1;
  }

  /* Balance text wrapping on headings */
  h1,
  h2,
  h3,
  h4 {
    text-wrap: balance;
  }

  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
  }

  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }

  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit;
  }

  /* Make sure textareas without a rows attribute are not tiny */
  textarea:not([rows]) {
    min-height: 10em;
  }

  /* Anything that has been anchored to should have extra scroll margin 
  :target {
    scroll-margin-block: 5ex;
  }
  */
}

/**************************+*************************/
/*               coustom propertie                  */
/*                                                  */
/****************************************************/

:root {
  /******************** color *************************/

  --font-family-bold: "NeueHelvetica75Bold";
  --font-family-light: "NeueHelvetica45Light";

  --clr-primery-400: hsl(0, 68%, 49%);

  --clr-secondary-400: hsl(0, 0%, 70%);

  --clr-neutral-900: hsl(0, 0%, 100%);
  --clr-neutral-700: hsl(0, 0%, 90%);
  --clr-neutral-100: hsl(0, 0%, 0%);

  --clr-accent-400: blue;

  --clr-main-font: var(--clr-neutral-100);
  --clr-card-countdown: var(--clr-neutral-700);

  --height-header: 180px;
  /******************** type **************************/

  /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--2: clamp(0.56rem, 0.6206rem + -0.0646vi, 0.6076rem);
  --step--1: clamp(0.7rem, 0.7371rem + -0.0395vi, 0.7292rem);
  --step-0: clamp(0.875rem, 0.875rem + 0vi, 0.875rem);
  --step-1: clamp(1.05rem, 1.0381rem + 0.0593vi, 1.0938rem);
  --step-2: clamp(1.26rem, 1.2309rem + 0.1453vi, 1.3672rem);
  --step-3: clamp(1.512rem, 1.4586rem + 0.2671vi, 1.709rem);
  --step-4: clamp(1.8144rem, 1.7271rem + 0.4364vi, 2.1362rem);
  --step-5: clamp(2.1773rem, 2.0436rem + 0.6685vi, 2.6703rem);
  --step-6: clamp(2.6127rem, 2.4161rem + 0.9832vi, 3.3379rem);
  --step-7: clamp(3.1353rem, 2.8541rem + 1.4062vi, 4.1723rem);
  --step-8: clamp(3.7623rem, 3.3683rem + 1.9703vi, 5.2154rem);
  --step-9: clamp(4.5148rem, 3.9712rem + 2.7179vi, 6.5193rem);
  --step-10: clamp(5.4178rem, 4.6771rem + 3.7035vi, 8.1491rem);

  /******************** space *************************/

  /* @link https://utopia.fyi/space/calculator?c=320,15,1.2,1920,15,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --space-3xs: clamp(0.25rem, 0.25rem + 0vi, 0.25rem);
  --space-2xs: clamp(0.5rem, 0.5rem + 0vi, 0.5rem);
  --space-xs: clamp(0.6875rem, 0.6875rem + 0vi, 0.6875rem);
  --space-s: clamp(0.9375rem, 0.9375rem + 0vi, 0.9375rem);
  --space-m: clamp(1.4375rem, 1.4375rem + 0vi, 1.4375rem);
  --space-l: clamp(1.875rem, 1.875rem + 0vi, 1.875rem);
  --space-xl: clamp(2.8125rem, 2.8125rem + 0vi, 2.8125rem);
  --space-2xl: clamp(3.75rem, 3.75rem + 0vi, 3.75rem);
  --space-3xl: clamp(5.625rem, 5.625rem + 0vi, 5.625rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.2rem + 0.25vi, 0.5rem);
  --space-2xs-xs: clamp(0.5rem, 0.4625rem + 0.1875vi, 0.6875rem);
  --space-xs-s: clamp(0.6875rem, 0.6375rem + 0.25vi, 0.9375rem);
  --space-s-m: clamp(0.9375rem, 0.8375rem + 0.5vi, 1.4375rem);
  --space-m-l: clamp(1.4375rem, 1.35rem + 0.4375vi, 1.875rem);
  --space-l-xl: clamp(1.875rem, 1.6875rem + 0.9375vi, 2.8125rem);
  --space-xl-2xl: clamp(2.8125rem, 2.625rem + 0.9375vi, 3.75rem);
  --space-2xl-3xl: clamp(3.75rem, 3.375rem + 1.875vi, 5.625rem);

  /* Custom pairs */
  --space-3xl-3xl: clamp(10rem, 10rem + 0vi, 10rem);
}

/**************************+*************************/
/*                     base                         */
/*                                                  */
/****************************************************/

@layer base {
  body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    min-height: 100vh;
    font-family: var(--font-family-bold);
    font-style: normal;
    font-stretch: normal;
    font-size: var(--step-0);
    color: var(--clr-main-font);
    margin: 0;
  }
  /* https://www.youtube.com/watch?v=pKWSXyilG9k */
  .btn {
    display: inline-block;
    background: var(--btn-bg, blue);
    padding: 0.8em var(--space-xs) 0.5em;
    color: var(--btn-text, white);
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font-size: var(--step--1);
    border-bottom: 4px solid white;
  }
  @media (min-width: 768px) {
    .btn {
      padding: 1em var(--space-m) 0.7em;
      border: 0;
    }
  }

  .btn:hover,
  .btn:focus {
    background-color: var(--btn-bg-hover, rgba(0, 0, 255, 0.517));
    color: var(--btn-text-hover, white);
  }
  .btn[data-type="countdown"] {
    display: block;
    text-align: center;
    padding: 1.1em var(--space-s) 0.8em;
    font-size: var(--step--0);
    border: 0;
  }

  .primary-navigation,
  .header,
  section {
    border: 0px solid red;
  }
}

/**************************+*************************/
/*               composition                        */
/*                                                  */
/****************************************************/

@layer composition {
  /*https://www.youtube.com/watch?v=hk3RgcBx5Fc*/
  html {
    scroll-behavior: smooth;
    scroll-padding: var(--scroll-padding, 10rem);
  }

  .container {
    --container-max-width: 1920px; /*1920px*/
    --space-m-3xl: clamp(1.4375rem, 0.6103rem + 4.1358vi, 5.625rem);
    width: min(100% - var(--space-m-3xl), var(--container-max-width));
    margin-inline: auto;
  }

  header.header {
    height: 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0px;
    background-color: inherit;
    z-index: 2000;
    background-color: white;
  }

  @media (min-width: 768px) {
    header.header {
      height: var(--height-header);
    }
  }

  @media (min-width: 768px) {
    .layout {
      position: relative;
      display: flex;
      flex-direction: row;
    }
  }

  #video,
  #brand,
  #token-presale {
    margin-bottom: var(--space-3xl-3xl);
  }
  footer.footer {
    height: 240px;
    margin-bottom: var(--space-l);
  }
  @media (min-width: 768px) {
    /* calc postion disclaimer on click  vh - height disclaimer -header */
    footer.footer {
      margin-bottom: calc(100vh - 240px - var(--height-header));
    }
  }

  /*------------------*/
  /* nav primary      */
  /*------------------*/
  .nav-list {
    display: none;
  }
  @media (min-width: 768px) {
    .nav-list {
      display: block;
      min-width: 280px;
      position: sticky;
      margin-block-start: 0;
      top: var(--height-header);
    }
  }
  ul {
    list-style-type: none;
    padding-inline-start: 0;
  }
  /*
  li:not(:last-child) {
    margin-inline-end: 8rem;
  }
  */

  .nav-list a:link {
    color: black;
    text-decoration: none;
  }

  /* visited link */
  .nav-list a:visited {
    color: black;
  }

  /* mouse over link */
  .nav-list a:hover {
    color: blue;
  }

  /* selected link */
  .nav-list a.active {
    color: blue;
  }

  /*------------------*/
  /* continuous text  */
  /*------------------*/

  .column-count-1-2,
  .column-count-1-2-3,
  .column-count-1-2-4 {
    column-count: 1;
    column-gap: var(--space-l);
  }

  @media (min-width: 1025px) {
    .column-count-1-2,
    .column-count-1-2-3,
    .column-count-1-2-4 {
      column-count: 2;
    }
  }

  @media (min-width: 1240px) {
    .column-count-1-2-3 {
      column-count: 3;
    }
    .column-count-1-2-4 {
      column-count: 4;
    }
  }

  /*--------------*/
  /* logo         */
  /*--------------*/
  .logo {
    width: 100%;
    max-width: 120px;
  }
  @media (min-width: 500px) {
    .logo {
      width: 100%;
      max-width: 170px;
    }
  }
}

/**************************+*************************/
/*               utility                            */
/*                                                  */
/****************************************************/

@layer utilitie {
  .step-10 {
    font-size: 15vw;
  }
  .step-9 {
    font-size: var(--step-9);
  }
  .step-8 {
    font-size: var(--step-8);
  }
  .step-7 {
    font-size: var(--step-7);
  }
  .step-5 {
    font-size: var(--step-5);
  }
  .step-4 {
    font-size: var(--step-4);
  }
  .step-3 {
    font-size: var(--step-3);
  }
  .step-2 {
    font-size: var(--step-2);
  }
  .step-1 {
    font-size: var(--step-1);
  }
  .step-0 {
    font-size: var(--step-0);
  }
  .step--1 {
    font-size: var(--step--1);
  }

  sup {
    font-size: var(--step--1);
    margin-left: 4px;
  }

  .uppercase {
    text-transform: uppercase;
  }
  .text-center {
    text-align: center;
  }
  .box-shadow-1 {
    box-shadow: 0 0 0.75rem rgb(0 0 0 / 0.25);
  }
  .mx-auto {
    margin-inline: auto;
  }
}

/**************************+*************************/
/*               block                              */
/*                                                  */
/****************************************************/

@layer block {
  /*--------------*/
  /* video        */
  /*--------------*/
  /* dealed space under Video  */
  video {
    display: block;
  }
  @media (max-width: 767px) {
    .hide-mobile {
      display: none;
    }
  }

  /*----------------------*/
  /* section brand        */
  /*----------------------*/

  .brand-svg {
    margin-bottom: var(--space-xl);
  }

  .grid-brand p {
    margin-block-start: 0;
  }
  .grid-brand {
    display: grid;
    gap: var(--space-l);
  }
  @media (min-width: 1240px) {
    .grid-brand {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: var(--space-l);
    }
  }

  /*----------------------*/
  /* section presale      */
  /*----------------------*/

  .grid-presale-header {
    margin-bottom: var(--space-l);
  }

  @media (min-width: 1200px) {
    .grid-presale-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-l);
    }
  }
  .presale-svg {
    margin-bottom: var(--space-xl);
  }

  @media (min-width: 1240px) {
    .grid-presale-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-l);
    }
  }

  .grid-presale-content p {
    margin-block-start: 0;
  }

  .card-countdown {
    --space-s-xl: clamp(0.9375rem, 0.5671rem + 1.8519vi, 2.8125rem);
    background-color: var(--clr-card-countdown);
    padding: var(--space-s-xl);
    margin-top: var(--space-l);
  }
  @media (min-width: 1240px) {
    .card-countdown {
      margin-top: 0;
    }
  }

  #countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--space-s-m);
    text-align: center;
    margin: var(--space-l) 0;
  }
  .day,
  .hour,
  .minute,
  .second {
    font-size: var(--step-6);
    line-height: 1;
    color: blue;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    padding-top: 12px;
  }
  .info {
    font-size: var(--step--1);
    margin-top: var(--space-xs);
  }

  /*--------------------------------*/
  /* section the-products water     */
  /*--------------------------------*/
  .water {
    margin-bottom: var(--space-3xl-3xl);
  }
  .img-water {
    margin-bottom: var(--space-xl);
  }

  /*------------------------------------------*/
  /* section the-products water-with-taste    */
  /*------------------------------------------*/

  @media (min-width: 1240px) {
    .water-with-taste {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      /*grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));*/
      gap: var(--space-m);
    }
  }

  .product-card {
    margin-bottom: var(--space-3xl-3xl);
  }
  .product-card img {
    margin-bottom: var(--space-m);
  }

  .product-title {
    display: block;
    font-size: var(--step-3);
    line-height: 1;
  }
  .product-subline {
    font-family: var(--font-family-light);
    font-size: var(--step-3);

    margin-bottom: var(--space-l);
  }

  /*---------------------------*/
  /* section disclaimer        */
  /*---------------------------*/

  @media (min-width: 1240px) {
    #disclaimer {
      width: 52%;
    }
  }
}

/**************************+*************************/
/*               exception                          */
/*                                                  */
/****************************************************/

@layer exception {
}