/* 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, .page5{
    height: 100vh;
    /* full height */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    
    
}

/* Stacked Layout Media Q */
@media (max-width: 768px) {
    body {
        margin: 0;
        padding: 0;
        overflow-x: hidden; 
    }
  
    .page1,
    .page2,
    .page3,
    .page4,
    .page5 {
        height: auto; 
        min-height: 100vh; 
        width: 100%; 
        display: flex;
        flex-direction: column; 
    }
  }

/* 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:
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". ndthexlogo ndthexlogo . ndtlogo ndtlogo ndtlogo ndtlogo ndtlogo ndtlogo . scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer ."
      ". ndthexlogo ndthexlogo . ndtlogo ndtlogo ndtlogo ndtlogo ndtlogo ndtlogo . scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer scrollingcontainer ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection ."
      ". largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection ."
      ". largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection ."
      ". largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection ."
      ". largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection ."
      ". largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection ."
      ". largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection ."
      ". largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection ."
      ". largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection largesection ."
      ". . . . . . . . . . . . . . . . . . . . . . .";
  }
  
  .ndthexlogo { grid-area: ndthexlogo; }
  
  .ndtlogo { grid-area: ndtlogo; }
  
  
  .largesection { grid-area: largesection; }

  .largesection img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .ndthexlogo, .ndtlogo, .scrollingcontainer, .largesection{
    width: 100%;
    height: 100%;


  }

  .scrollingcontainer { 
    grid-area: scrollingcontainer;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 20px;
    overflow-y: auto;
    justify-content: flex-start; 
    align-items: flex-start;
    width: 100%;
    height: 100%;
    


}

.scrollingsection1, .scrollingsection2, .scrollingsection3, .scrollingsection4, .scrollingsection5{
    flex: 0 0 auto; 
    width: 100%;   
    height: 100%;  
    display: flex;
    justify-content: left;
    align-items: top;
    font-size: 1.9vw;
}

/*Page1 Media Q*/

@media (max-width: 768px) {
    .page1 {
        display: flex;
        flex-direction: column; 
        gap: 20px; 
    }

    
    .ndthexlogo, .ndtlogo {
        display: inline-flex; 
        width: 30%; 
        height: auto; 
        justify-content: center; 
        align-items: center; 
    }

    
    .ndthexlogo + .ndtlogo {
        display: flex;
        flex-direction: row; 
        gap: 10px; 
        width: 90%; 
        justify-content: center; 
        align-items: center; 
    }

    .scrollingcontainer {
        display: flex;
        flex-direction: column; 
        width: 80%; 
        gap: 20px; 
        align-items: flex-start; 
        overflow-y: auto; 
        overflow-x: hidden; 
        padding: 10px;
        height: 200px;
    }

    .scrollingsection1, .scrollingsection2, .scrollingsection3, .scrollingsection4, .scrollingsection5 {
        flex: 0 0 auto; 
        width: 100%; 
        height: auto; 
        font-size: 6vw; 
    }

    .largesection {
        width: 90%; 
        height: auto; 
        margin-bottom: 20px; 
    }

    .largesection img {
        width: 100%; 
        height: auto; 
    }
}





/* Page 2 */

.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:
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". image1 image1 image1 image1 image1 image1 image1 image1 image1 image1 . image2 image2 image2 image2 image2 image2 image2 image2 image2 image2 ."
      ". image1 image1 image1 image1 image1 image1 image1 image1 image1 image1 . image2 image2 image2 image2 image2 image2 image2 image2 image2 image2 ."
      ". image1 image1 image1 image1 image1 image1 image1 image1 image1 image1 . image2 image2 image2 image2 image2 image2 image2 image2 image2 image2 ."
      ". image1 image1 image1 image1 image1 image1 image1 image1 image1 image1 . image2 image2 image2 image2 image2 image2 image2 image2 image2 image2 ."
      ". image1 image1 image1 image1 image1 image1 image1 image1 image1 image1 . image2 image2 image2 image2 image2 image2 image2 image2 image2 image2 ."
      ". image1 image1 image1 image1 image1 image1 image1 image1 image1 image1 . image2 image2 image2 image2 image2 image2 image2 image2 image2 image2 ."
      ". image1 image1 image1 image1 image1 image1 image1 image1 image1 image1 . image2 image2 image2 image2 image2 image2 image2 image2 image2 image2 ."
      ". image1 image1 image1 image1 image1 image1 image1 image1 image1 image1 . image2 image2 image2 image2 image2 image2 image2 image2 image2 image2 ."
      ". image1 image1 image1 image1 image1 image1 image1 image1 image1 image1 . image2 image2 image2 image2 image2 image2 image2 image2 image2 image2 ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 . . . . . . . . ndttagline ndttagline ndttagline ."
      ". text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 . . . . . . . . . . . ."
      ". text1 text1 text1 text1 text1 text1 text1 text1 text1 text1 . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . .";
  }
  
  .image1 { grid-area: image1; }
  
  .image2 { grid-area: image2; }
  
  .text1 { grid-area: text1;
    font-size: 1.3vw;
}
  
  .ndttagline { grid-area: ndttagline; }

  .image1, .image2, .text1, .ndttagline{
    width: 100%;
    height: 100%;
    
  }
  
  .image1 img, .image2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /*Page 2 Media Q*/
  

  @media (max-width: 768px) {
    .page2 {
        display: flex;
        flex-direction: column; 
        gap: 20px; 
        width: 100%; 
    }

    
    .image-container {
        display: flex; 
        gap: 10px; 
        justify-content: center; 
        width: 90%; 
    }

    .image1, .image2 {
        width: 90%; 
        height: auto; 
    }

    .image1 img, .image2 img {
        width: 100%; 
        height: auto; 
    }

    
    .text1 {
        width: 90%; 
        font-size: 2vw; 
        text-align: left; 
    }

    
    .ndttagline {
        width: 90%; 
        
    }
}



  /* Page 3*/

  .page3 {  display: grid;
    grid-template-columns: repeat(23, 1fr);
    grid-template-rows: repeat(16, 1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". subtext subtext subtext subtext subtext subtext subtext subtext subtext subtext . . subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 ."
      ". subtext subtext subtext subtext subtext subtext subtext subtext subtext subtext . . subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 ."
      ". subtext subtext subtext subtext subtext subtext subtext subtext subtext subtext . . subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 subtext2 ."
      ". subtext subtext subtext subtext subtext subtext subtext subtext subtext subtext . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". subimage subimage subimage subimage subimage subimage subimage subimage subimage subimage . . . . . . . . . . . ."
      ". subimage subimage subimage subimage subimage subimage subimage subimage subimage subimage . . . . . . . . . . . ."
      ". subimage subimage subimage subimage subimage subimage subimage subimage subimage subimage . . . . . . . . . . . ."
      ". subimage subimage subimage subimage subimage subimage subimage subimage subimage subimage . . . . . . . . . . . ."
      ". subimage subimage subimage subimage subimage subimage subimage subimage subimage subimage . . . . . . . . . . . ."
      ". subimage subimage subimage subimage subimage subimage subimage subimage subimage subimage . . . . . . . . . . . ."
      ". subimage subimage subimage subimage subimage subimage subimage subimage subimage subimage . . . . . . . . . . . ."
      ". subimage subimage subimage subimage subimage subimage subimage subimage subimage subimage . . . . . . . . . . . ."
      ". subimage subimage subimage subimage subimage subimage subimage subimage subimage subimage . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . .";
  }
  
  .subtext { grid-area: subtext; }
  
  .subimage { grid-area: subimage; }
  
  .subtext2 { grid-area: subtext2; }
  
  .subtext, .subimage, .subtext2 {
    width: 100%;
    height: 100%;
    
  }
  .subtext {
    font-size: 1.7vw;
  }
  .subtext2 {
    font-size: 1.1vw;
  }

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

  /*Page 3 Mediq Q*/

  @media (max-width: 768px) {
    .page3 {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .subtext, .subtext2 {
        width: 90%;
        text-align: left;
    }

    .subtext {
        font-size: 5vw;
    }

    .subtext2 {
        font-size: 3.5vw;
    }

    .subimage {
        width: 90%;
        height: auto;
    }

    .subimage img {
        width: 100%;
        height: auto;
    }
}


  /* Page 4 */

  .page4 {  display: grid;
    grid-template-columns: repeat(23, 1fr);
    grid-template-rows: repeat(16, 1fr);
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 ."
      ". . . . . . . . . . . chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 ."
      ". . . . . . . . . . . chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 chunkytext1 ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . chunkytext2 chunkytext2 chunkytext2 chunkytext2 chunkytext2 chunkytext2 chunkytext2 chunkytext2 chunkytext2 chunkytext2 chunkytext2 ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 ."
      ". . . . . . . . . . . chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 ."
      ". . . . . . . . . . . chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 chunkytext3 ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo ."
      ". . . . . . . . . . . largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo ."
      ". . . . . . . . . . . largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo largelogo ."
      ". . . . . . . . . . . . . . . . . . . . . . .";
  }
  
  .largelogo { grid-area: largelogo; }
  
  .chunkytext1 { grid-area: chunkytext1; }
  
  .chunkytext2 { grid-area: chunkytext2; }
  
  .chunkytext3 { grid-area: chunkytext3; }
  
  .largelogo, .chunkytext1, .chunkytext2, .chunkytext3 {
    width: 100%;
    height: 100%;
  }

  .chunkytext1, .chunkytext2, .chunkytext3 {
    font-size: 1.5vw;
  }

  /* Page 4 media Q */

  @media (max-width: 768px) {
    .page4 {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }

    .chunkytext1, .chunkytext2, .chunkytext3 {
        font-size: 5vw;
        text-align: left;
        width: 90%;
    }

    .largelogo {
        width: 90%;
        text-align: center;
    }
}