/* Brooks Dudley */
body { margin:0; font-family:'Bebas Neue', sans-serif; cursor:url("../images/mouse.png"), auto; }
body::before {content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:url("../images/blue_wave.png") center / cover no-repeat;z-index:-1;pointer-events:none;}
.page { max-width:1300px; margin:0 auto; background-color:#2b0000; color:#f5dada; padding:10px; position:relative; z-index:2; }
header { background-color:rgba(120,0,0,0.9); padding:15px; }
nav { background-color:rgba(60,0,0,0.9); width:100%; }
nav a.active { background-color:rgba(255,0,0,0.4); }
nav ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; }
nav li { position:relative; }
nav a { display:block; padding:15px 20px; color:white; text-decoration:none; }
nav a:hover, nav a:focus { background-color:rgba(255,255,255,0.2); }
nav li ul { display:none; position:absolute; background-color:rgba(0,0,0,0.9); }
nav li:hover ul { display:block; }
.intro { display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding:20px 0; }
.responsive-img { max-width:100%; height:auto; }
.cta { display:inline-block; margin-top:10px; padding:10px 15px; background-color:rgba(0,0,0,0.7); color:white; text-decoration:none; }
.cta:hover { background-color:rgba(0,0,0,0.9); }
.projects { display:flex; flex-wrap:wrap; gap:20px; position:relative; z-index:3; }
footer { padding:10px; text-align:center; }
body.projects-page { background:url("../images/blue_wave.png") center / cover no-repeat; }
.projects-page .page { background-color:#2b0000; color:#f5dada; }
.projects-page header { background-color:rgba(120,0,0,0.9); }
.projects-page nav { background-color:rgba(60,0,0,0.9); }
.projects-page nav a.active { background-color:rgba(255,0,0,0.4); }
.projects-layout { display:grid; grid-template-columns:1fr 400px; gap:20px; align-items:start; font-family:'Bebas Neue', sans-serif; }
.power-container { position:relative; height:100%; overflow:visible; z-index:5; }
.power-container img { position:absolute; top:-120px; right:-300px; width:900px; max-width:none; }
.alien { position:absolute; width:300px; max-width:none; opacity:0; animation:alienDrop 1.2s ease-out forwards; }
.alien.a1 { top:800px; right:-150px; animation-delay:0.2s; }
.alien.a2 { top:500px; right:-250px; animation-delay:0.5s; }
.alien.a4 { top:-450px; right:-500px; animation-delay:1.1s; }
.alien.a5_upright { animation:alienDropUpright 1.2s ease-out forwards; }
@keyframes alienDrop {
0% { transform:translateY(-150%) rotate(200deg) scale(1); opacity:0; }
60% { transform:translateY(30px) rotate(200deg) scale(1); opacity:1; }
80% { transform:translateY(-15px) rotate(200deg) scale(1); }
100% { transform:translateY(0) rotate(190deg) scale(1.25); opacity:1; }
}
@keyframes alienDropUpright {
0% { transform:translateY(-150%) rotate(0deg) scale(1); opacity:0; }
60% { transform:translateY(30px) rotate(0deg) scale(1); opacity:1; }
80% { transform:translateY(-15px) rotate(0deg) scale(1); }
100% { transform:translateY(0) rotate(0deg) scale(1.25); opacity:1; }
}
.project-card { display:flex; flex-direction:column; align-items:flex-start; }
.project-card #Gamble {width:800px; height:450px;}
.hidden-text { display:none; margin-top:10px; }
.glow-on-hover { width:220px; height:50px; border:none; outline:none; color:#fff; background:#111; cursor:pointer; position:relative; z-index:0; border-radius:10px; margin-top:10px; }
.glow-on-hover:before {
content:'';
background:linear-gradient(45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000);
position:absolute;
top:-2px;
left:-2px;
background-size:400%;
z-index:-1;
filter:blur(5px);
width:calc(100% + 4px);
height:calc(100% + 4px);
animation:glowing 20s linear infinite;
opacity:0;
transition:opacity .3s ease-in-out;
border-radius:10px;
}
.glow-on-hover:hover:before { opacity:1; }
.glow-on-hover:after {
z-index:-1;
content:'';
position:absolute;
width:100%;
height:100%;
background:#111;
left:0;
top:0;
border-radius:10px;
}
.glow-on-hover:active { color:#000; }
.glow-on-hover:active:after { background:transparent; }
.cta-btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
@keyframes glowing {0% { background-position:0 0; }50% { background-position:400% 0; }100% { background-position:0 0; }}
@media (max-width:600px) {body { font-size:16px; }.page { margin:0; padding:8px; }nav ul { flex-direction:column; }nav a { padding:12px; text-align:center; }.intro { flex-direction:column; text-align:center; }.projects-layout { grid-template-columns:1fr; }.projects { flex-direction:column; align-items:center; }.project-card { width:100%; align-items:center; text-align:center; }.glow-on-hover { width:100%; max-width:260px; }.cta, .cta-btn { width:100%; max-width:260px; text-align:center; }.power-container { display:none; }.responsive-img { width:100%; height:auto; }}
table { width:100%; border-collapse:collapse; margin-top:20px; }
th, td { border:1px solid #fff; padding:10px; text-align:left; }
th { background-color:rgba(255,0,0,0.4); }