/* 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;
}

/* 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: 30vh; 
        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: 
    ". . . . . . . . . . . . . . . . . . . . . . ."
    ". ndtmerch ndtmerch . . . . . . . . . obvious obvious obvious . . . . . putitonashirt putitonashirt ."
    ". . . . . . . . . . . . . . . . . . . . . . ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."
    ". maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer maincontainer ."; 
}
  
  .ndtmerch, .putitonashirt, .obvious, .maincontainer {
    width: 100%;
    height: 100%;
  }
  
  .ndtmerch { grid-area: ndtmerch; align-content: center;}
  
  .putitonashirt { grid-area: putitonashirt; align-content: center; }
  
  .obvious { grid-area: obvious; align-content: center; }
  
  .maincontainer { 
    grid-area: maincontainer;
    display: flex;
    padding: 10px;
    gap: 10px;
    overflow-x: auto;
    justify-content: flex-start; 
    align-items: flex-end;
    height: 80vh; 
}

.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
    flex: 0 0 auto; 
    width: 400px;   
    height: 250px;  
    color: white;
    display: flex;
    justify-content: center;
    align-items: center; 
    transition: width 0.6s ease-in-out, height 0.6s ease-in-out; 
}

/* Hover  */
.box1:hover, .box2:hover, .box3:hover, .box4:hover, .box5:hover, .box6:hover, .box7:hover, .box8:hover {
    width: 600px;    
    height: 700px;   
}

.box1 img, .box2 img, .box3 img, .box4 img, .box5 img, .box6 img, .box7 img, .box8 img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

/*Page 1 Media Q*/

@media (max-width: 768px) {
    .page1 {
        display: block; 
    
    }

    .maincontainer {
        display: flex;
        flex-direction: row; 
        overflow-x: auto; 
        gap: 15px; 
        height: auto;
        width: 90%; 
        justify-content: flex-start;
        align-items: flex-end;
        
    }

    
    .ndtmerch, .putitonashirt, .obvious {
        display: block; 
        width: 90%;
        margin-bottom: 15px; 
        padding: 10px;
        margin-left: 15px;
    }

    .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8 {
        width: 100%; 
        height: 200px; 
        margin-bottom: 20px; 
    }
}





/* 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:
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 maincontainer2 ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". ndtcoaster ndtcoaster ndtcoaster . . . . . wettable wettable wettable wettable wettable . . . . . putpints putpints putpints ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . ."
      ". . . . . . . . . . . . . . . . . . . . . . .";
  }
  
  
  
  .ndtcoaster { grid-area: ndtcoaster; align-content: center;}
  
  .putpints { grid-area: putpints; align-content: center;}
  
  .wettable { grid-area: wettable; align-content: center; }
  
  .maincontainer2, .ndtcoaster, .putpints, .wettable {
    width: 100%;
    height: 100%;
  }

  .maincontainer2 { 
    grid-area: maincontainer2;
    display: flex;
    padding: 10px;
    gap: 10px;
    overflow-x: auto;
    justify-content: flex-start; 
    align-items: flex-start;
    height: 80vh;
}

.secondarybox1, .secondarybox2, .secondarybox3, .secondarybox4, .secondarybox5, .secondarybox6, .secondarybox7, .secondarybox8, .secondarybox9, .secondarybox10 {
    flex: 0 0 auto; 
    width: 400px;   
    height: 250px;  
    color: black;
    display: flex;
    justify-content: center;
    align-items: center; 
    transition: width 0.6s ease-in-out, height 0.6s ease-in-out; 
}

/* Hover  */
.secondarybox1:hover, .secondarybox2:hover, .secondarybox3:hover, .secondarybox4:hover, .secondarybox5:hover, .secondarybox6:hover, .secondarybox7:hover, .secondarybox8:hover, .secondarybox9:hover, .secondarybox10:hover {
    width: 600px;    
    height: 700px;   
}

.secondarybox1 img, .secondarybox2 img, .secondarybox3 img, .secondarybox4 img, .secondarybox5 img, .secondarybox6 img, .secondarybox7 img, .secondarybox8 img, .secondarybox9 img, .secondarybox10 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*Page 2 Media Query*/

@media (max-width: 768px) {
    .page2 {
        display: block; 
    }

    .maincontainer2 {
        display: flex;
        flex-direction: row; 
        overflow-x: auto; 
        gap: 15px; 
        height: auto;
        width: 100%; 
    }

    
    .ndtcoaster, .putpints, .wettable {
        display: block; 
        width: 90%;
        margin-bottom: 15px; 
        padding: 10px;
    }

    .secondarybox1, .secondarybox2, .secondarybox3, .secondarybox4, .secondarybox5, .secondarybox6, .secondarybox7, .secondarybox8, .secondarybox9, .secondarybox10 {
        width: 100%; 
        height: 200px; 
        margin-bottom: 20px; 
    }
}