/* global fontload */

@font-face {
    font-family: 'NewEdge';
    src: url('/data/NEWEDGE666-REGULAR.OTF');
}

/* global hide scrollbar */

::-webkit-scrollbar {
    display: none; 
}

/* Header Grid Layout */
.header {
    display: grid;
    grid-template-columns: repeat(23, 1fr); /* 23 column */
    grid-template-rows: 1fr; /* 1 row */
    gap: 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". notdrinkingtonightlogo notdrinkingtonightlogo . . . honestbrutal honestbrutal honestbrutal . . . home . . . shop . . . ourmission ourmission .";
    width: 100vw; /* width */
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 10px 0; /* headerpadding */
    font-family: "NewEdge", sans-serif;
    
}

/* grid areas */
.notdrinkingtonightlogo {
    grid-area: notdrinkingtonightlogo;
    display: flex;
    align-items: left ;
    justify-content: left;
}

.headerndtlogo{
    height: 100%;
    width: 100%;
}

.honestbrutal {
    grid-area: honestbrutal;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: left;
}

.home {
    grid-area: home;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}

.shop {
    grid-area: shop;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}

.ourmission {
    grid-area: ourmission;
    display: flex;
    align-items: center;
    justify-content: left;
    text-align: left;
}

.honestbrutal, .home, .shop, .ourmission{
    font-size: 1vw;
}

/* Link Style, Hover States */

.honestbrutal a,
.home a,
.shop a,
.ourmission a {
    text-decoration: none;
    color: black;
    transition: transform 0.3s ease, color 0.3s ease;
}

.honestbrutal a:hover,
.home a:hover,
.shop a:hover,
.ourmission a:hover {
    transform: scale(1.1); /* scale effect */
    color: #FF3600; /* ndt colour on hover */
}

.honestbrutal a:visited,
.home a:visited,
.shop a:visited,
.ourmission a:visited {
    color: black; 
    text-decoration: none; 
}

/* logo animation */
.notdrinkingtonightlogo:hover {
    transform: scale(1.1); 
    transition: transform 0.3s ease;
}

/* media query for header */
@media (max-width: 768px) {
    .header {
        display: grid; /* enable grid */
        grid-template-columns: auto 1fr 1fr 1fr 1fr; 
        grid-template-rows: auto; /* 1 row */
        grid-template-areas: "notdrinkingtonightlogo honestbrutal home shop ourmission"; 
        gap: 15px; /* increase gap */
        padding: 10px 20px; 
        align-items: center; 
        box-sizing: border-box; 
    }

    .notdrinkingtonightlogo {
        grid-area: notdrinkingtonightlogo;
        justify-self: start; 
    }

    .honestbrutal {
        grid-area: auto;
        text-align: left;
        font-size: 3vw; 
        margin-right: 10px; 
    }

    .home {
        grid-area: auto;
        text-align: left;
        font-size: 3vw; 
        margin-left: 10px; 
    }

    .shop,
    .ourmission {
        grid-area: auto;
        text-align: left;
        font-size: 3vw;
        margin-right: 10px;
    }

    .headerndtlogo {
        width: 80%; 
    }

    
    .ourmission {
        margin-right: 10px; 
    }
}




/* Body Section */

body,
html {
    margin: 0;
    padding: 0;
    font-family: "NewEdge", sans-serif;
    scroll-behavior: smooth;
    /* Smooth scrolling */
    height: 100%;
    
}

/* Pages */

.page1,
.page2,.page3,.page4{
    height: 100vh;
    /* full height */
    display: flex;
    justify-content: center;
    align-items: center;
}

/*page 1*/

.page1 {
    display: grid;
    grid-template-columns: repeat(23, 1fr);
    grid-template-rows: repeat(16, 1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        ". . . . . . . . . . . . . . . . . . . . . . ."
        ". maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif ."
        ". maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif ."
        ". maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif ."
        ". maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif ."
        ". maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif ."
        ". maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif ."
        ". maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif ."
        ". maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif ."
        ". maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif maingif ."
        ". . . . . . . . . . . . . . . . . . . . . . ."
        ". ndtlogo ndtlogo ndtlogo ndtlogo ndtlogo ndtlogo ndtlogo . . . honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext ."
        ". ndtlogo ndtlogo ndtlogo ndtlogo ndtlogo ndtlogo ndtlogo . . . honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext honestsubtext ."
        ". . . . . . . . . . . . . . . . . . . . . . ."
        ". . . . . . . . . . . . . . . . . . . . . . ."
        ". . . . . . . . . . . . . . . . . . . . . . .";
}

.ndtlogo {
    grid-area: ndtlogo;
    width: 100%;
    height: 100%;
}

.page1ndtlogo{
    width: 80%;
}

.maingif {
    grid-area: maingif;
    width: 100%;
    height: 100%;
}

.maingif img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.honestsubtext {
    grid-area: honestsubtext;
    width: 100%;
    height: 100%;
    font-size: 3vw;
    text-align: right;
    
}
  
/*Page 1 media query*/

@media (max-width: 768px) {
    .page1 {
        display: grid; 
        grid-template-columns: 1fr; 
        grid-template-rows: auto; 
        grid-template-areas:
            "maingif"
            "ndtlogo"
            "honestsubtext"; 
        gap: 10px; 
        padding: 10px; 
    }

    .maingif {
        grid-area: maingif;
        width: 100%; 
        height: auto; 
    }

    .ndtlogo {
        grid-area: ndtlogo;
        display: flex; 
        justify-content: center; 
        align-items: center; 
    }

    .page1ndtlogo {
        width: 100%; 
    }

    .honestsubtext {
        grid-area: honestsubtext;
        text-align: left; 
        font-size: 7vw; 
        margin-left: 30px;
    }
}






/*Page2*/

.page2 {  display: grid;
    grid-template-columns: repeat(23, 1fr);
    grid-template-rows: repeat(16, 1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . largetext largetext largetext largetext largetext largetext largetext ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . . . . . . . . ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . . . . . . . . ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . ndtlogosection ndtlogosection ndtlogosection ndtlogosection . ndthexlogo ndthexlogo ."
      ". largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection largepicturesection . . . ndtlogosection ndtlogosection ndtlogosection ndtlogosection . ndthexlogo ndthexlogo .";
  }
  
  .largepicturesection {
      grid-area: largepicturesection;
      width: 100%;
      height: 100%;
      
  }

  .largepicturesection img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .largetext {
      grid-area: largetext;
      width: 100%;
      height: 100%;
      
      font-size: 1.6vw;
  }

  .ndtlogosection {
      grid-area: ndtlogosection;
      width: 100%;
      height: 100%;
      
  }

  .page2ndtlogo{
    width: 90%;
  }

  .ndthexlogo {
      grid-area: ndthexlogo;
      width: 100%;
      height: 100%;
      
  }

  .page2ndthexlogo{
    width: 40%;
    float: right;
    
  }
  
/* Page 2 Media Query*/

@media (max-width: 768px) {
    .page2 {
        display: grid; 
        grid-template-columns: 1fr; 
        grid-template-rows: auto; 
        grid-template-areas:
            "largepicturesection"
            "largetext"
            "ndtlogosection"
            "ndthexlogo"; 
        gap: 20px; 
        padding: 10px; 
    }

    .largepicturesection {
        grid-area: largepicturesection;
        width: 100%;
        height: auto; 
    }

    .largepicturesection img {
        width: 100%; 
        height: auto; 
        object-fit: cover; 
    }

    .largetext {
        grid-area: largetext;
        text-align: left; 
        font-size: 3vw; 
        padding: 10px; 
    }

    .ndtlogosection {
        grid-area: ndtlogosection;
        display: flex; 
        justify-content: center; 
        align-items: center; 
        height: auto; 
    }

    .page2ndtlogo {
        width: 100%; 
        max-width: 150px; 
        margin: 0 auto; 
    }

    .ndthexlogo {
        grid-area: ndthexlogo;
        display: flex; 
        justify-content: center; 
        align-items: center; 
        height: auto; 
    }

    .page2ndthexlogo {
        width: 10%; 
        max-width: 100px; 
        margin: 0 auto; 
    }
}





  .page3 {
    background-color: white;
    position: relative;
    
}