/* CSS RESET START */



/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 62.5%;
	font: inherit;
	vertical-align: baseline;
  
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

                                                                                                 /* CSS RESET END */



                                                                                                /* CSS ROOT START */

:root {
    --colortoggle-1: grey;
    --colortoggle-2: whitesmoke;
    --colortoggle-3:#ffa622;
    --colortoggle-4: black;
    --colortoggle-5: black;
    --colortoggle-6: #333;
    --colortoggle-7: whitesmoke;
    --colortoggle-8: rgb(128, 128, 128);
    --colortoggle-9: #5f0005;

  
    --bar-width: clamp(.2rem, 3.5vw, 10rem);
    --bar-height: clamp(.2rem, .7vw, 10rem);
    --hamburger-gap: clamp(.2rem, .5vw, .6rem);
    --color: white;
    --color-hover: #5f0005;
    --hamburger-margin: clamp(.5rem, 2vw, 5.6rem);
    --hamburger-animate: 200ms ease-in-out;
    --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2); /* height of entire hamburger; burger height of 3 bars, 2 gaps = 3x bar length + 2x gap */
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    width: 100%;
    height: 100%;
    /* overflow-x: hidden;    Gets rid of small weird horizontal scrolling in News.html  */
}

html {
    scroll-behavior: smooth;
    width: 100%;
    min-height: 100vh;  /* allows expansion beyond the viewport if needed */
  height: auto;       /* ensure they can grow */
  overflow-y: auto; 
    /* overflow-x: hidden;  Gets rid of small weird horizontal scrolling in News.html  */
}



                                                                                                 /* CSS ROOT END */



                                                                                               /* CSS STYLES START */




                                                                   /* Landing/Welcome PAGE */

/* Loading Screen */
#loading-screen {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #010616; /* Ensure it matches your background color */
    z-index: 1000; /* Ensure it sits above all other elements */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

/* Loader animation */
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #5f0005; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}





.hide {
    visibility: hidden;


}

#landing {
    position: relative;
    height: 120vh;
    background-color: #010616; 

}


#video {
    position: relative;
    width: 100vw;
    width: 100%;
    z-index: 1;
    display: flex;
    height: 120vh;
    object-fit: cover;
    pointer-events: none;
    

}


#overlay {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 28, 94, 0.227); 
    z-index: 2;
}

#title{ 
    position: absolute;
    background-image: url("images/NB_titleB.svg");
    background-size: 100%;   
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    z-index: 3;
    top: -2%;
    
    
}

/* About Section */

#about{
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-right: 10rem;
    padding-left: 10rem;
    padding-top: 10rem;
    padding-bottom: 4rem;


    gap: 2em; 
}

#videotwo{
    width: 100vw;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    position: absolute;
    object-fit: cover;
    left: 0;
    top: 0;
    pointer-events: none;
}

#overlaytwo {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 28, 94, 0.227); 
    z-index: 2;
}

.Synopsis{
    position: relative;
    z-index: 3;
    /* top: 10%; */
    /* left: 2.5%; */
}

h2{
    color: var(--colortoggle-9);
    font-size: clamp(.6rem, 5vw, 9.6rem);  
    font-family: "futura-pt-bold", sans-serif;
    font-weight: 700;
    font-style: normal;

}

.Psynopsis{
    /* outline: 2px solid blue; */
    position: relative;
    z-index: 3;
    margin-right: 5rem;
    margin-left: 5rem;
    margin-top: 2rem;
    /* top: 25%; */
    /* width: 70%; */

}

#about p:nth-child(1){
    text-align: center;
    word-spacing: clamp(0.1rem, 0.25vw, 1rem); 
    /* color: antiquewhite; */

}

#about p {
    text-align: justify;
    color: var(--colortoggle-2);
    font-size: clamp(0.2rem, 2vw, 3.6rem);   
    font-family: "amplitude-compressed", sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 2.6vw;
}

/* NAV/Buttons */

#buttons {
    /* outline: 2px solid red; */
    margin-top: 3em;
    width: 100%;
    height: 20%;
    z-index: 5;
    position: relative;
    display: flex;
    justify-content: space-around;
}

#buttons button{
    background: none;
    border: none;
    cursor: pointer;
    position: relative;

}

button svg{
   width: clamp(.5rem, 5.5vw, 8rem);
   height: clamp(.5rem, 5.5vw, 8rem);

}

.Btext{
    position: absolute;
    top: 110%; 
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it's centered */

    visibility: visible; /* Hidden by default */
    opacity: 1; /* Make it fully transparent */
    transition: opacity 0.3s, visibility 0.3s; 
    font-size: clamp(0.25rem, 1.5vw, 3.0rem);
    font-family: "futura-pt-bold", sans-serif;
    color: var(--colortoggle-2);
    /* outline: 2px solid red; */

}

#WIP {
    color: #9b0008;

 }

button:hover .Btext {
    visibility: visible;
    opacity: 1;
}

/* Footer */

footer div {
    display: flex;
    position: relative;
    justify-content: center;
    z-index: 1000;
    /* background-color: #ffa622; */
    margin-top: 10%;
    gap: 5%;
    


}

svg {
    width: clamp(2rem, 6vw, 5rem);
    /* background-color: #5f0005; */
    z-index: 1000;
    height: auto;
}

.bluesky {
    width: clamp(2rem, 6vw, 5rem);
    height: auto;
    padding-bottom: 7px;

}


                                                                   /* Chapters PAGE */
                                  

#chaptersbody > video{
    /* background-color: green; */
    width: 100%;
    z-index: 1;
    object-fit: cover;
    position: fixed; /* Keeps the video in the same position in the viewport no matter what. A fixed position. SOLVED the BG video bug whitespace overflow -> still there this is a workaround. */
    z-index: -1;
    height: 100%;
    outline: 2px solid red;
    pointer-events: none;
}

/* #overlay3 {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 20, 68, 0.227); 
    z-index: -1;
} */

/* #chaptersbody{
    background-image: url("images/Artboard 1.png");

} */


#header{
    position: relative;
    /* outline: 2px solid green; */
    height: 15vw;
}
                                                                   


#brand{
    position: absolute;
    background-image: url("images/NB_titleB.svg");
    background-position: left 50% bottom;
    background-size: contain;   
    width: 50%;
    height: 160%;
    background-repeat: no-repeat;
    z-index: 3;
    /* outline: 2px solid red; */
    left: 25%;
    bottom: -20%;
    /* background-color: green; */

}

#chaptersTitle {
 position: absolute;
    top: 65%; 
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it's centered */

    font-size: clamp(0.25rem, 1.5vw, 3.0rem);
    font-family: "futura-pt-bold", sans-serif;
    color: var(--colortoggle-2);

}

#newsTitle {
    position: absolute;
    top: 65%; 
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it's centered */

    font-size: clamp(0.25rem, 1.5vw, 3.0rem);
    font-family: "futura-pt-bold", sans-serif;
    color: var(--colortoggle-2);


}

                                                                                   /* Hamburger Menu */


.hamburger{
    display: flex;
    flex-direction: column-reverse;
    gap: var(--hamburger-gap);
    width: max-content; /* width only takes up where content is, not the entire flex box */
    /* background-color: #5f0005; */
    position: absolute;
    top: var(--hamburger-margin);
    left: var(--hamburger-margin);
    cursor: pointer;
    z-index: 10;

    --x-width: calc(var(--hamburger-height) * 1.41421356237) /* this number because transform using right angle; using this to figure out good length for the diagonal line of the X finish */
}



.hamburger::before,
.hamburger::after,
.hamburger input{
    content: "";
    width: var(--bar-width);
    height: var(--bar-height);
    background-color: var(--color);
    border-radius: 9000px;
    transform-origin: left center;
    transition: opacity var(--hamburger-animate), width var(--hamburger-animate), rotate var(--hamburger-animate), translate var(--hamburger-animate), background-color var(--hamburger-animate);
    

}

/* .hamburger:has(:hover)::before{
    background-color: var(--color-hover);

}

.hamburger:has(:hover)::after{
    background-color: var(--color-hover);

}

.hamburger:has(:hover) input{
    background-color: var(--color-hover);

} */

.hamburger:has(input:checked)::after {
    rotate: 45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / -2); /* offset in y (0 for x) for the line; half of the height of the burger */
    background-color: var(--color-hover);
}

.hamburger:has(input:checked)::before { 
    rotate: -45deg;
    width: var(--x-width);
    translate: 0 calc(var(--bar-height) / 2); /* offset in y (0 for x) for the line; half of the height of the burger */
    background-color: var(--color-hover);
}

.hamburger input:checked{ /* only affecting the "middle" bar bc of this input selector */
    opacity: 0;
    width: 0;
    background-color: var(--color-hover);
}


.hamburger input{
    appearance: none; /* remove checkbox; works differently from display: none */
    padding: 0;  /* disable default spacing */
    margin: 0;  /* disable default spacing */
    outline: none; /* no weird outline on lines */
    pointer-events: none; /* leaves interaction to entire label element */

}


                                                                                                /* Buttons/NAV */

#buttons-chapters {
    /* outline: 2px solid red; */
    width: max-content;
    height: 20%;
    z-index: 5;
    position: absolute;
    top: 10.5%;
    display: flex;
    justify-content: center;
    gap: clamp(.1rem, 3vw, 10rem);
    transition: 300ms ease-in-out;
    transform: translateX(-100%);
    visibility: hidden;
}



#buttons-chapters.show {
    transform: translateX(40%);
    visibility: visible;
}

#buttons-chapters button{
    background: none;
    border: none;
    cursor: pointer;
    position: relative;

}

.CBtext{
    position: absolute;
    top: 135%; 
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it's centered */

    visibility: hidden; /* Hidden by default */
    opacity: 0; /* Make it fully transparent */
    transition: opacity 0.3s, visibility 0.3s; 
    font-size: clamp(0.25rem, 1.25vw, 3.0rem);
    font-family: "futura-pt-bold", sans-serif;
    color: var(--colortoggle-2);
    /* outline: 2px solid red; */

}

button:hover .CBtext {
    visibility: visible;
    opacity: 1;
}

#buttons-chapters svg{
    width: clamp(.5rem, 3.5vw, 8rem);
    height: clamp(.5rem, 3.5vw, 8rem);
 
 }

 .CBtext:has(span) span{
    color: #9b0008;

 }

 @media (max-width: 700px){
    #buttons-chapters {
       
        gap: clamp(.01rem, .1vw, 10rem);
        
    }


 }

                

           /* CAROUSEL */

main {
  display: block; /* or remove display: flex entirely */
  /* or if you do need flex for some reason: */
  /* align-items: flex-start; */
  /* justify-content: center; */
}

#carouselBody {
    display: flex;
    justify-content: center;  /* horizontally center */
    align-items: flex-start;  /* or center, if you want vertical centering too */
  }
  
  

 #chapters{
    max-width: 1200px;
    width: 95%;
    /* background-color: #5f0005; */
 }

 .carouselwrapper{
    /* background-color: #5f0005; */
    position: relative;
    top: 3rem;
 }

 /*

 .chapters-list {
  overflow-y: visible;
}


.chapters-list .centerchapter img {
    transition: transform 0.5s, opacity 0.5s;
    opacity: 0.8;
}

.chapters-list .centerchapter img.active,
.chapters-list .centerchapter:hover img {
    transform: scale(1.2);
    opacity: 1;
    cursor: pointer;
}

  

.centerchapter img {
    max-width: 70%;
    height: auto;
}

*/


.img-wrapper {
    position: relative;
    overflow: visible;
  }
  
  .img-wrapper img {

    max-width: 65%;
    height: auto;
    transition: transform 0.5s, opacity 0.5s;
    opacity: 0.8;
    position: relative;
    z-index: 1;
  }

  
  .img-wrapper:hover img {
    transform: scale(1.1); /* enlarge from current position */
    transform-origin: top top; /* ensures it scales from the center */
    opacity: 1;
    cursor: pointer;
    z-index: 10000; /* keep above siblings */
  }
  
  .centerchapter {
    overflow: hidden; /* if you have an overflow rule here, ensure it’s visible */
  }
  



 .carouselbutton{
    position: absolute;
    top: 50%;
    background-color: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 3rem !important; /* controls only the chevron size; not the background/whole thing */
   transition: 300ms ease-in-out;
   color: #5f0005;

 }

 #leftslide{
    left: -7rem;
    /* display: none; */
    z-index: 11;
 }

 #rightslide{
    right: -7rem;
    z-index: 11;

 }

 .carouselbutton:hover{
    transform: scale(2);
 }

.chapters-list{
    align-items: center; 
    display: grid;
    grid-template-columns: repeat(6, 440px);
    overflow-x: auto;
    font-size: 0;
    margin-bottom: 30px;
    scrollbar-width: none;
 

}

.chapters-list::-webkit-scrollbar{
    display: none;

}



.scrollslider{ /* entire scrollbar */
    height: 24px;
    width: 100%;
    /* background: red; */
    display: flex;
    align-items: center;

}

.scrolltrack{ /* "runway" of the scrollslider where thumb "runs over"; includes the thumb */
    height: 2px;
    width: 100%;
    background: white;
    position: relative;
    border-radius: 4.5px;
}

.scrolltrack:hover{ 
    height: 4px;

}


.scrollthumb{ /* the part u move in scrollbar */
    position: absolute;
    height: 100%;
    width: 50%;
    background: var(--color-hover);
    border-radius: inherit;
    cursor: grab;

}

.scrollthumb:active{
    cursor: grabbing;
    height: 8px;
    top: -2px; /* offset for no break design */

}

.scrollthumb::after{ /* add space to easier grab the scrollthumb */
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    bottom: -10px;

}


@media (max-width: 1450px) {

    .carouselbutton{
        
        top: 100%;
  
     }

    #leftslide{
        left: 0;
    
     }
    
     #rightslide{
        right: 0;
        
    
     }


}



                                                                   /* News PAGE */


#newsbody > video{
    /* background-color: green; */
    width: 100%;
    object-fit: cover;
    position: fixed; /* Keeps the video in the same position in the viewport no matter what. A fixed position. SOLVED the BG video bug whitespace overflow -> still there this is a workaround. */
    z-index: -1;
    height: 100%;
    outline: 2px solid red;
    pointer-events: none;
}

#headerNews{
    position: relative;
    /* background-color: green; */
    height: 15vw;
}
                                                                   
#newsContainer {
    display: flex;
    flex-direction: column;
    gap: 2em;
    padding-left: 5em;
    padding-right: 5em;
    margin-top: 5rem;
    margin-bottom: 8rem;
    /* background-color: rgb(255, 208, 0); */
    
}

.post {
    display: flex;
    height: 40vh;
    color: white;
    border-radius: 20px;
    margin: 5rem;
    /* background-color: rgb(255, 255, 255); */
}


.post .thumbnail {
    width: 100%;
    height: 100%;
    background-size: cover;
    border-radius: 50px;
    /* background-color: rgb(255, 0, 0); */
    
}

.thumbnail:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.post .postInfo {
    width: 66%;
    height: 100%;
    display: flex;
    font-family: "amplitude-compressed", sans-serif;
    flex-direction: column;
    gap: 30px;
    padding-left: 30px;
    /* background-color: rgb(132, 45, 212); */
}

.post .postTitle {
    font-family: "futura-pt-bold";
    font-size: 50px;
    /* background-color: rgb(0, 183, 255); */
    cursor: pointer;
}

.post .postDate {
    font-size: 22px;
    /* background-color: green; */
}

.post .postContent {
    font-size: 30px;
    /* background-color: rgb(200, 255, 0); */
    height: 10vh;
    overflow: hidden;
    width: 40vw;
    cursor: pointer;
    

    /* Doesnt work */
    /* ellipses show
    display: -webkit-box; 
    -webkit-line-clamp: 3; number of lines to show */
    /* line-clamp: 3; 
    -webkit-box-orient: vertical; */
}

.post a {
    text-decoration: none;
    color: inherit;

}

/* News Sort UI */

#newsSortMenu{
    width: 100px;
    position: absolute;
    top: 70%; 
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it's centered */
}

#newsSortButton {
    display: flex;
    height: 45px;
    cursor: pointer;
    font-size: 20px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    /* background-color: #5f0005; */
}

#newsSortButton span {
    color: #ffffff;
    font-family: "futura", sans-serif;
    font-variant: small-caps;
    transition: 0.6s;
    

}

#newsSortButton span:hover {
    color:#9b0008;

}

#newsSortOptions {
    /* background-color: #919191; */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0px 5px 5px black inset;
    align-items: center;
    visibility: hidden;

}

.newsSortItem {
    cursor: pointer;
    margin-bottom: 20px;
    /* background-color: #ffa622; */
    width: 100%;
    display: flex;
    justify-content: center;
    font-variant: small-caps;
    font-family: "futura", sans-serif;
    color:#ffffff;
    font-size: 20px;
    
}



#newsSortMenu.active #newsSortOptions {
    visibility: visible;

}

#newsSortMenu.active #newsSortButton span {
    color: #9b0008;

}

.newsSortMenuArrow {
    transform: rotate(-180deg);
    transition: .3s;
}

#newsSortMenu.active .newsSortMenuArrow {
    transform: rotate(0deg);
    

}

.newsSortItem:hover{
    color: #9b0008;

}



.newsSortMenuArrow{
    color:#9b0008;

}

/* For nonews UI */


  #newsmain {
    /* background-color: aqua; */
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
    
}  

 #nonews{
    /* background-color: #ffa622; */
    width: fit-content;
    height: fit-content;

}

#nonews h2 {
    font-family: "futura-pt-bold", sans-serif;
    font-variant: small-caps;
    font-size: 50px;
    padding-right: 50px;
    text-align: center;

}

#nonews:hover {
    opacity: 50%;
    transition-duration: 1s;
    cursor:default;

} 

 



                                                                   /* News PAGES PAGE */


#newspagebody > video{
    /* background-color: green; */
    width: 100%;
    object-fit: cover;
    position: fixed; /* Keeps the video in the same position in the viewport no matter what. A fixed position. SOLVED the BG video bug whitespace overflow -> still there this is a workaround. */
    z-index: -1;
    height: 100%;
    /* outline: 2px solid red; */
    pointer-events: none;
}



#headerNewsPages {
    position: relative;
    /* outline: 2px solid green; */
    height: 15vw;
}

/* #overlay4 {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 20, 68, 0.227); 
    z-index: -1;
} */


/* NewsPage Buttons/NAV */

    
#buttons-newspage {
    /* outline: 2px solid red; */
    width: max-content;
    height: 20%;
    z-index: 5;
    position: absolute;
    top: 10.5%;
    display: flex;
    justify-content: center;
    gap: clamp(.1rem, 3vw, 10rem);
    transition: 300ms ease-in-out;
    transform: translateX(-100%);
    visibility: hidden;
}



#buttons-newspage.newspagenav {
    transform: translateX(30%);
    visibility: visible;
}

#buttons-newspage button{
    background: none;
    border: none;
    cursor: pointer;
    position: relative;

}

.CBtextNewsPage{
    position: absolute;
    top: 135%; 
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it's centered */

    visibility: hidden; /* Hidden by default */
    opacity: 0; /* Make it fully transparent */
    transition: opacity 0.3s, visibility 0.3s; 
    font-size: clamp(0.25rem, 1.25vw, 3.0rem);
    font-family: "futura-pt-bold", sans-serif;
    color: var(--colortoggle-2);
    /* outline: 2px solid red; */

}

button:hover .CBtextNewsPage {
    visibility: visible;
    opacity: 1;
}

#buttons-newspage svg{
    width: clamp(.5rem, 3.5vw, 8rem);
    height: clamp(.5rem, 3.5vw, 8rem);
 
 }

 .CBtextNewsPage:has(span) span{
    color: #9b0008;

 }

 @media (max-width: 700px){
    #buttons-newspage {
       
        gap: clamp(.01rem, .1vw, 10rem);
        
    }


 }


/* Body */


.newsarticle {

    display: flex;
    /* background-color: #5f0005; */
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
    margin-right: 100px;
    margin-left: 100px;
    flex-direction: column;
    align-items: center;
    padding-bottom: 10%;
    margin-top: -4%;
    
}

.newsPageTitle {
    display: flex;
    /* background-color: green; */
    width: fit-content;
    height: auto;
    justify-content: center;
    align-items: center;
    font-variant: small-caps;    
    margin-bottom: 3%;
}

.newsPageTitle h2 {
    
    font-family: "futura-pt-bold", sans-serif;
    font-size: clamp(.5rem, 6vw, 10rem);
    color: white;

}

/* .newspagethumbnail {
    background-color: antiquewhite;
    
} */

.newsarticle figure img {
    width: clamp(1.2rem, 99vw, 1000rem);
    height: auto;
    position: relative;
}


.newsPageContent {
    /* background-color: #ffa622; */
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding-top: 5%;

}

.newsPageContent h3 {

    font-size: clamp(1.2rem, 4vw, 7.5rem);
    color: antiquewhite;
    font-family: "futura-pt-bold",sans-serif;
    
}

.newsPageContent h4 {

    font-size: clamp(1rem, 3.9vw, 6rem);
    color: antiquewhite;
    font-variant: small-caps;
    margin-top: 5%;
    margin-left: 3%;
    font-weight: 600;
    font-family: "futura-pt-bold", sans-serif;

}

.newsPageP {
    width: 85%;
    height: 50%;
    /* background-color: aqua; */



}

.newsPageP p {
    font-family: "Amplitude", sans-serif;
    font-size: clamp(.9rem, 2.2vw, 4.5rem);
    line-height: 1.7;
    color: rgb(255, 255, 255);
    margin-top: 5%;
    

}

.newsPageP ul {
    list-style-type: disc;
    padding-left: 8%;
    padding-top: 5%;
}

.newsPageP ul ul {
    list-style-type: circle;

}

.midh3 {
    margin-top: 10%;

}


.newsPageP li {
    color: #ffffff;
    margin-bottom: 3%;
    line-height: 1.2;
    font-family: "Amplitude", sans-serif;
    font-size: clamp(.9rem, 2.2vw, 4.5rem);


}

.newspagebodyimgdiv_1 {
    display: flex;
    /* background-color: #5f0005; */
    justify-content: center;
    margin-top: 3%;


}

.newspagebodyimg_1 {
    width: 90%;
    height: auto;

}

.newsPageP .newspagebodyimglist {
    margin-bottom: 10%;


}

.colorstyle1 {

    color: antiquewhite;
}

.textstyle1 {
    font-weight: bold;
    color: var(--colortoggle-3);

}

.textstyle2 {
    font-weight: bold;
    color: var(--colortoggle-3);
    

}

.textstyle3 {
    font-weight: bold;
    color: var(--colortoggle-3);
}

a.scope-style-color {
    color: antiquewhite;
    
}

a.scope-style-color:visited {
    color: antiquewhite;
    
}

                                                                                             /* Media Query */



@media (max-width: 768px) {

     /* footer - home */


     footer {
        margin-top: 6%;
        padding-bottom: 5%;
    
    
    }
    

}

@media (max-width: 600px) {

    /* footer - home */


    footer {
       margin-top: 0%;
       padding-bottom: 5%;
   
   
   }
   

}

/* home.html */

@media (max-width: 768px) {

    #title{ 
        position: absolute;
        background-image: url("images/NB_titleB.svg");
        background-size: 100%;   
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        z-index: 3;
        top: -2%;
        background-position-y: 30%;
        
        
    }

    #about{
        padding: 0rem;
        gap: 0em; 
    }

    #about p {
        text-align: justify;
        font-size: clamp(0.7rem, 4vw, 3.6rem);   
        font-family: "amplitude-compressed", sans-serif;
        font-weight: 400;
        font-style: normal;
        line-height:6vw;
    }

    .Synopsis{
        padding-left: 2rem;
    }

    .Psynopsis{
        /* background-color: blue; */
        position: relative;
        z-index: 3;
        margin-right: 3.5rem;
        margin-left: 3.5rem;
        margin-top: 2rem;
        /* top: 25%; */
        /* width: 100%; */
    
    }

    #buttons {
        margin-bottom: 5rem;
    }

    .Btext{
        visibility: visible; 
        opacity: 1;
        font-size: clamp(0.25rem, 3.5vw, 3.0rem);
    
    }

    button svg{
        width: clamp(.5rem, 8vw, 8rem);
        height: clamp(.5rem, 8vw, 8rem);
     
     }

     h2{
        font-size: clamp(.6rem, 7vw, 9.6rem);  
    
    }

   


/* chapters.html */

    /* Top Graphic */

    #chaptersTitle {
        top: 55%; 
        left: 50%; /* Center horizontally */    
        font-size: clamp(0.25rem, 4.5vw, 3.0rem);

    }

    /* Chapter Thumbails */

    .img-wrapper img {
        opacity: 1;
        
      }
    
      
      .img-wrapper:hover img {
        transform: none;
        
      }

    /* NAV Buttons */


#buttons-chapters.show {
    transform: translateX(20%);
    visibility: visible;
}

#buttons-chapters {
    /* outline: 2px solid red; */
    width: max-content;
    height: 20%;
    z-index: 5;
    position: absolute;
    top: 15vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(.1rem, 3vw, 10rem);
    transition: 300ms ease-in-out;
    transform: translateX(-400%);
}

#buttons-chapters svg{
    width: clamp(.5rem, 8vw, 8rem);
    height: clamp(.5rem, 8vw, 8rem);
 
 }

 
.CBtext{
    position: absolute;
    top: 30%; 
    left: 135%; /* Center horizontally */
    transform: translateX(-50%); /* Ensure it's centered */
    font-size: clamp(0.25rem, 2.5vw, 3.0rem);
    font-family: "futura-pt-bold", sans-serif;
    visibility: visible; 
    opacity: 1; 

}

.CBtext.two {
    
    left: 200%; /* Center horizontally */
    

}

     /* NAV Hamburger */
     

     .hamburger::before,
     .hamburger::after,
     .hamburger input{
         width: clamp(.2rem, 7vw, 10rem);

     }



 /* news.html */

           /* Top Graphic */


    #brand{
        background-size: cover;   
        width: 60%;
        left: 22%;
        bottom: -68%;
        /* background-color: green; */

    }
    
    #newsTitle {
        top: 55%; 
        left: 50%; /* Center horizontally */    
        font-size: clamp(0.25rem, 4.5vw, 3.0rem);
    
    }


      /* NAV Buttons */

      .CBtext.one.responsive {
    
        left: 160%; /* Center horizontally */
        
    
    }
    

    /* Sort Items */

    .newsSortItem {
        margin-bottom: 30px;
        font-size: 12px;
        
    }

    #newsSortActive {
        font-size: clamp(0.25rem, 4.5vw, 3.0rem);

    }

    /* Posts */
    
    #newsContainer {
        display: flex;
        flex-direction: column;
        padding-left: 0em;
        padding-right: 0em;
        margin-top: 12rem;
        margin-bottom: 0rem;
        gap: 1em;
        /* background-color: pink;         */
    }
    
    .post {
        display: flex;
        height: 18rem;
        color: white;
        /* margin-left: 10rem; */
        /* background-color: black; */
        margin: 0rem;
    }

    
    .post a {
        /* background-color: rgb(255, 255, 255); */
        height: fit-content;
        margin-left: 20px;
    }
    
    
    .post .thumbnail {
        width: 38vw;
        height: 38vw;
        background-size: cover;
        
        
        
    }
    
    .post .postInfo {
        gap: 5vw;
        /* background-color: #ffa622; */
        /* opacity: 0; */
        padding-left: 10px;
        
        
    }
    
    .post .postTitle {
        font-family: "futura-pt-bold";
        font-size: 8.5vw;
        /* background-color: #9b0008; */
        width: fit-content;
        margin-right: 3vw;
    }
    
    .post .postDate {
        font-size: 5vw;
        /* background-color: green; */
        width: fit-content;
    }
    
    .post .postContent {
        font-size: 5vw;
        /* margin-right: 12px; */
        line-height: 1;
        height: 10vh;
        /* background-color: aqua; */
        width: fit-content;
        margin-right: 3vw;

        /* Doesnt work */
        /* -webkit-line-clamp: 4; number of lines to show */
        /* line-clamp: 4;  */
    }

}

/* Newspage.html */

@media (max-width: 900px) {
    
.newsarticle {

    display: flex;
    /* background-color: #5f0005; */
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: center;
    margin-right: 50px;
    margin-left: 50px;
    flex-direction: column;
    align-items: center;
    padding-bottom: 10%;
    margin-top: 10%;
    
}

.newsPageTitle {
    display: flex;
    /* background-color: green; */
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: center;
    font-variant: small-caps;    
    margin-bottom: 10%;
    text-align: center;
}

.newsPageTitle h2 {
    
    font-family: "futura-pt-bold";
    font-size: clamp(.5rem, 8vw, 8rem);
    color: white;

}

.newsarticle figure img {
    width: 100%;
    height: auto;
    position: relative;
}


.newsPageContent {
    /* background-color: #ffa622; */
    width: 120%;
    height: 100%;
    display: flex;
    justify-content: center;
    padding-top: 7%;

}

.newsPageP {
    width: 105%;
    height: 100%;
    /* background-color: aqua; */
    padding-left: 6%;
    padding-right: 6%;


}

.newsPageP p {
    font-family: "Amplitude", sans-serif;
    line-height: 1.7;
    color: rgb(255, 255, 255);
    

}

        /* NAV */
    

#buttons-newspage {
    /* outline: 2px solid red; */
    gap: clamp(.1rem, 7.5vw, 10rem);
    
}



#buttons-newspage.newspagenav {
    transform: translate(18%);
}

.CBtextNewsPage {
    top: 350%; 
    opacity: 1;
    visibility: visible; 
    font-size: clamp(0.25rem, 2.5vw, 3.0rem);
    /* outline: 2px solid red; */
    
}

#chaptersnewsPageWeirdButton {
    left: 4%;

}



#buttons-newspage svg{
    width: clamp(.5rem, 8vw, 8rem);
    height: clamp(.5rem, 8vw, 8rem);
 
 }



 
}