/* ==========================
   GLOBAL
========================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

    position:relative;
    background:#0b0617;

    background-image:
        radial-gradient(circle at top,#552288 0%,transparent 50%),
        linear-gradient(#130026,#06000f);

    color:#ddddff;
    font-family:Quantico;
    z-index:0;

}

body::before{
    content:"";
    position:fixed;
    inset:0;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    opacity:0.25; /* controls how strong the image is */
    z-index:-2;
    pointer-events:none;
}

/* ==========================
   CRT Scanlines
========================== */

.scanlines{

position:fixed;

inset:0;

pointer-events:none;

background-image:

repeating-linear-gradient(

to bottom,

rgba(255,255,255,.02),

rgba(255,255,255,.02) 2px,

transparent 2px,

transparent 4px

);

mix-blend-mode:overlay;

opacity:.4;

}

/* ==========================
   TOPBAR
========================== */

.topbar{

position:sticky;

top:0;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 40px;

background:#120021;

border-bottom:2px solid #ff00cc;

z-index:100;

box-shadow:

0 0 20px #ff00cc,

0 0 40px #7700ff;

font-size: 20px;

}

.logo{

font-size:26px;

font-weight:bold;

color:#5eff00;

text-shadow:

0 0 8px #5eff00,

0 0 20px #5eff00;

}

.logo img{
    max-height:50px;
    width:auto;
}

.topbar nav{

display:flex;

gap:30px;

}

.topbar a{

text-decoration:none;

color:white;

transition:.25s;

}

.topbar a:hover{

color:#5eff00;

text-shadow:0 0 12px 5eff00;

}

/* ==========================
   LAYOUT
========================== */

.layout{

display:flex;

}

/* ==========================
   SIDEBAR
========================== */

.sidebar{

position:sticky;

top:80px;

width:260px;

height:calc(100vh - 80px);

overflow:auto;

padding:30px;

background:#11001f;

border-right:2px solid #ff00cc;

    /* Firefox */
    scrollbar-width: none;

    /* IE/Edge Legacy */
    -ms-overflow-style: none;
}

/* Chrome, Edge, Safari */
.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar h3{

margin-bottom:20px;

color:#ff44ff;

}

.sidebar ul{

list-style:none;

}

.sidebar li{

margin:15px 0;

}

.sidebar a{

color:#ddddff;

text-decoration:none;

}

.sidebar a:hover{

color:#5eff00;

}

/* ==========================
   CONTENT
========================== */

.content{

flex:1;

padding:60px;

max-width:1200px;

 margin:0 auto;

}

section{

margin-bottom:30px;

}

hr{

margin:30px 0;

border:1px solid #552288;

}

/* ==========================
   HEADERS
========================== */

h1,h2,h3,h4{

margin-bottom:0px;

color:#7fff2a;

text-shadow:

0 0 0px #58aa20;
}

.center
{
   text-align: center;
}

.center-topmargin
{
   text-align: center;
   margin-top: 20px;
   margin-bottom: 20px;
}


.center-big
{
   text-align: center;
   font-size: 80px;
}


/* ==========================
   LISTS
========================== */

ul,ol{

padding-left:35px;

margin-bottom:25px;

}

li{

margin:10px 0;

font-size: 20px;

}

/* ==========================
   CODE
========================== */

details{

margin:25px 0;

border:3px solid #ff00cc;

box-shadow:

0 0 5px #ff00cc;

border-radius:10px;

overflow:hidden;

}

summary{

cursor:pointer;

padding:15px;

background:#14002b;

}

pre{

padding:25px;

overflow-x:auto;
overflow-y:hidden;
max-width:100%;

background:#050008;

    /* Firefox */
    scrollbar-width: none;

    /* IE/Edge Legacy */
    -ms-overflow-style: none;
}

/* Chrome, Edge, Safari */
.sidebar::-webkit-scrollbar {
    display: none;
}

code{

font-family:Fira Code, monospace;

color:#5eff00;

}

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

.img-logo{

width:100%;

border-radius:12px;

border:3px solid #ff00cc;

box-shadow:

0 0 5px #ff00cc;

}

img{

width:100%;

border-radius:12px;

border:3px solid #ff00cc;

box-shadow:

0 0 25px #ff00cc;

}

/* ==========================
   IMAGE GRID
========================== */

.image-grid-4{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
    gap:24px;
    margin-top:25px;
}

.image-grid-3{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:24px;
    margin-top:25px;
}

.image-grid-2{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(400px,1fr));
    gap:24px;
    margin-top:25px;
}

/* ==========================
   IMAGE WRAPPER (important)
========================== */

.img-wrap{
    position:relative;
    overflow:hidden;
    border-radius:12px;

    border:2px solid #ff00cc;
    box-shadow:
        0 0 15px rgba(255,0,204,.5),
        0 0 30px rgba(0,255,255,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* hover effect on whole tile */
.img-wrap:hover{
    transform:translateY(-6px) scale(1.02);
    border-color:#5eff00;
    box-shadow:
        0 0 20px #5eff00,
        0 0 40px #1d5000;
}

/* image inside wrapper */
.img-wrap img{
    display:block;
    width:100%;
    height:100%;
    border:none;
    border-radius:0;
}

/* ==========================
   OVERLAY TEXT (Casey-style UI label)
========================== */

.img-overlay-text{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;

    color:#fff;
    font-size:20px;

    padding:6px 10px;
    background:rgba(0,0,0,0.55);

    border:1px solid rgba(9, 255, 0, 0.35);
    border-radius:6px;

   box-shadow:
   0 0 5px rgba(16, 128, 31, 0.5),

    text-shadow:0 0 10px black;

    backdrop-filter: blur(4px);

    transition:opacity .2s ease;
}

/* ==========================
   VIDEO
========================== */

.video{
    position:relative;
    padding-top:56.25%; /* 16:9 aspect ratio */
    overflow:hidden;
    
border:2px solid #ff00ff;
    border-radius:10px;

    border-color:#ff00ff;
    box-shadow:
        0 0 5px #ae00ff,
        0 0 10px #ff00cc;

        margin-top: 15px;
}

.video video{
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;

    border:none;
    border-radius:10px;

    box-shadow:0 0 25px #5eff00;

    object-fit:cover; /* makes it fill like a proper UI panel */
}
.video iframe{

position:absolute;

width:100%;

height:100%;

top:0;
left:0;

border:none;

border-radius:10px;

box-shadow:

0 0 25px #5eff00;

}

/* ==========================
   TABLE
========================== */

table{

width:100%;

border-collapse:collapse;

margin-top:20px;

}

th{

background:#2b0050;

color:#5eff00;

padding:16px;

}

td{

padding:16px;

background:#140022;

}

table,th,td{

border:1px solid #ff00cc;

}

/* ==========================
   LINKS
========================== */

a{

color:#5eff00;

transition:.25s;

}

a:hover{

color:#ff66ff;

text-shadow:

0 0 10px #66ff66;

}

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

@media(max-width:900px){

.layout{

flex-direction:column;

}

.sidebar{

position:relative;

width:100%;

height:auto;

border-right:none;

border-bottom:2px solid cyan;

}

.content{

padding:30px;

}

.topbar{

flex-direction:column;

gap:20px;

}

}

.footer{
    padding:40px 20px;
    background:#11001f;
    border-top:2px solid #ff00cc;
    color:#ddddff;
    text-align:center;

    display:flex;
    flex-direction:column;
}

/* top row: links */
.footer-top{
    display:flex;
    justify-content:space-between;
    align-items:center;

    max-width:900px;
    width:100%;
    margin:0 auto;
}

/* link styling */
.footer-top a{
    color:#5eff00;
    text-decoration:none;
    transition:.25s;
}

.footer-top a:hover{
    color:#ff66ff;
    text-shadow:0 0 10px #ff66ff;
}

/* bottom copyright text */
.footer-bottom{
    margin:0;
    font-size:14px;
    opacity:0.8;
}

.no-margin
{
   margin: 0;
}

/* ==========================
   text
========================== */
p{
   font-size: 20px;
   margin-top: 10px;
}