/* ==================================
   UMBRELLA SECURITY ARCHIVES SYSTEM
   ================================== */


:root{

    --umbrella-red:#cf372c;
    --umbrella-dark:#090909;
    --panel:#160807;
    --panel-light:#2b100d;
    --text:#d8d8d8;
    --warning:#ff5a4d;

}


/* ==============================
      PAGE OVERRIDE
============================== */


body{

    background:#050505;

    color:var(--text);

    font-family:
    "Courier New",
    monospace;

}

main{

    width:90%;

    max-width:1000px;

    margin:auto;

}



h1{

    color:var(--umbrella-red);

    text-transform:uppercase;

    letter-spacing:4px;

    border-bottom:2px solid var(--umbrella-red);

    padding-bottom:15px;

}



h2{

    color:var(--umbrella-red);

    text-align:center;

    letter-spacing:3px;

}



/* ==============================
      TEXT
============================== */


p{

    line-height:1.7;

}



a{

    color:var(--umbrella-red);

    text-decoration:none;

    transition:.25s;

}



a:hover{

    color:white;

}



/* ==============================
      GALLERY CONTAINER
============================== */


.gallery-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin:40px auto;

}



/* ==============================
      IMAGE SCROLLER
============================== */


.gallery-scroll{

    display:flex;

    gap:20px;

    width:700px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

    padding:10px;

}



.gallery-scroll::-webkit-scrollbar{

    display:none;

}



/* ==============================
      IMAGES
============================== */


.gallery-scroll img{

    flex-shrink:0;

    width:220px;

    height:165px;

    object-fit:cover;

    background:black;

    border:2px solid var(--umbrella-red);

    cursor:pointer;

    filter:
    brightness(.75)
    contrast(1.15);

    transition:.3s;

}



.gallery-scroll img:hover{

    transform:scale(1.08);

    filter:
    brightness(1);

    border-color:var(--warning);

    box-shadow:
    0 0 20px rgba(207,55,44,.7);

}



/* ==============================
      ARROW BUTTONS
============================== */


.gallery-btn{

    width:50px;

    height:50px;

    background:

    linear-gradient(
    145deg,
    #2b100d,
    #090909
    );

    border:

    2px solid var(--umbrella-red);


    color:var(--umbrella-red);

    font-size:24px;

    cursor:pointer;

    transition:.25s;

}



.gallery-btn:hover{

    background:var(--umbrella-red);

    color:black;

    box-shadow:
    0 0 20px var(--umbrella-red);

}



/* ==============================
      LIGHTBOX
============================== */


.lightbox{

    display:none;

    position:fixed;

    inset:0;

    background:

    rgba(0,0,0,.95);

    justify-content:center;

    align-items:center;

    z-index:99999;

}



.lightbox img{

    max-width:90vw;

    max-height:90vh;

    border:

    3px solid var(--umbrella-red);

    box-shadow:

    0 0 40px rgba(207,55,44,.8);

}



#closeLightbox{

    position:absolute;

    right:40px;

    top:20px;

    color:var(--umbrella-red);

    font-size:50px;

    cursor:pointer;

}



#closeLightbox:hover{

    color:white;

}



/* ==============================
      ARCHIVE TERMINAL EFFECT
============================== */


main::before{

    content:

    "UMBRELLA SECURITY NETWORK // ACCESSING ARCHIVE DATABASE";

    display:block;

    color:var(--umbrella-red);

    font-size:12px;

    letter-spacing:2px;

    margin-bottom:20px;

    opacity:.7;

}



/* ==============================
      RESPONSIVE
============================== */


@media(max-width:900px){


.gallery-scroll{

    width:460px;

}


}



@media(max-width:600px){


.gallery-wrapper{

    gap:5px;

}


.gallery-scroll{

    width:230px;

}


.gallery-scroll img{

    width:220px;

}


.gallery-btn{

    width:40px;

    height:40px;

}

} /* <-- THIS closes the media query */


/* ==============================
   HEADER + NAV CONTAINERS
============================== */

#headerContainer{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

}



/* Banner */

#header{

    width:50%;
    height:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:20px auto;

}


#header img{

    max-width:100%;

    height:auto;

    display:block;

}



/* Navigation box */

#navContainer{

    width:100%;

    display:flex;

    justify-content:center;

    border-top:1px solid var(--umbrella-red);

    border-bottom:1px solid var(--umbrella-red);

    padding:15px 0;

}



/* Links */

#navbar ul{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:30px;

    list-style:none;

    margin:0;

    padding:0;

}


#navbar a{

    color:var(--umbrella-red);

    text-decoration:none;

    letter-spacing:2px;

    transition:.25s;

}

#navbar a:hover{

    color:white;

    text-shadow:0 0 10px var(--umbrella-red);

}