:root{
  --bg:#041404;
  --bg2:#071d07;

  --green:#00ff88;
  --green-soft:#6dffb5;

  --text:#b8ffcf;

  --shadow:0 0 20px rgba(0,255,120,.25);
}

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

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);

  color:var(--text);

  font-family:"Courier New", monospace;

  line-height:1.6;

  overflow-x:hidden;
}

/* CRT overlay */

body::before{
  content:"";

  position:fixed;

  inset:0;

  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0),
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,.15) 3px
    );

  pointer-events:none;

  z-index:999;
}

body::after{
  content:"";

  position:fixed;

  inset:0;

  background:rgba(0,255,80,.03);

  pointer-events:none;

  z-index:998;
}

/* layout */

.container{
  width:min(1100px,92%);

  margin:auto;
}

section{
  padding:1.5rem 0;
}

img{
  max-width:100%;

  display:block;
}

a{
  color:var(--green);

  text-decoration:none;
}

/* HERO */

.hero{
  padding:1rem 0;
}

.small-hero{
  padding-bottom:0;
}

.hero-box{
  border:1px solid rgba(0,255,120,.3);

  background:var(--bg2);

  padding:1rem;

  box-shadow:var(--shadow);

  position:relative;
}

.hero-box::before{
  content:"SYSTEM ONLINE";

  position:absolute;

  top:-12px;

  left:20px;

  background:var(--bg);

  padding:0 .5rem;

  color:var(--green);
}

/* TERMINAL HEADER */

.terminal-header{
  display:flex;

  justify-content:space-between;

  align-items:center;

  flex-wrap:wrap;

  gap:1rem;

  margin-bottom:1rem;
}

.terminal-logo{
  margin:0;

  font-size:2.2rem;

  text-shadow:0 0 12px var(--green);
}

.terminal-logo a{
  color:var(--green);
}

.terminal-menu{
  display:flex;

  gap:1rem;

  flex-wrap:wrap;
}

.terminal-menu a{
  color:var(--green-soft);

  position:relative;

  transition:.2s;
}

.terminal-menu a:hover{
  color:white;

  text-shadow:0 0 8px var(--green);
}

.terminal-menu a::after{
  content:"";

  position:absolute;

  left:0;

  bottom:-3px;

  width:0%;

  height:1px;

  background:var(--green);

  transition:.2s;
}

.terminal-menu a:hover::after{
  width:100%;
}

/* TERMINAL */

.terminal{
  margin-top:1rem;

  border:1px solid rgba(0,255,120,.3);

  background:black;

  padding:1rem;

  box-shadow:var(--shadow);
}

.compact-terminal{
  padding:.7rem 1rem;
}

.terminal pre{
  margin:0;

  line-height:1.4;
}

/* cursor */

.cursor{
  animation:blink 1s infinite;
}

@keyframes blink{
  50%{
    opacity:0;
  }
}

/* section titles */

.section-title{
  margin-bottom:1rem;
}

.section-title h2{
  color:var(--green);

  margin-bottom:.5rem;

  text-shadow:0 0 8px var(--green);
}

/* cards */

.card,
.blog-post{
  border:1px solid rgba(0,255,120,.25);

  background:rgba(0,0,0,.35);

  padding:1rem;

  box-shadow:var(--shadow);
}

.card h3,
.blog-post h3{
  color:var(--green);

  margin-bottom:1rem;
}

/* grids */

.grid{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

  gap:1rem;
}

.ham-grid{
  display:flex;

  flex-direction:column;

  gap:1rem;
}

/* blog */

.blog-post{
  margin-bottom:1rem;
}

.blog-post small{
  display:block;

  margin-bottom:.5rem;

  color:#6eff9d;
}

.readmore{
  display:inline-block;

  margin-top:1rem;
}

/* gallery */

.gallery{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

  gap:1rem;
}

.gallery div{
  overflow:hidden;

  border:1px solid rgba(0,255,120,.25);

  background:black;
}

.gallery img{
  width:100%;

  height:240px;

  object-fit:cover;

  filter:
    grayscale(100%)
    contrast(1.2)
    brightness(.8)
    sepia(.3)
    hue-rotate(50deg);

  transition:.3s;
}

.gallery div:hover img{
  transform:scale(1.05);

  filter:
    grayscale(20%)
    contrast(1.1)
    brightness(.95);
}

/* HAM CALENDAR */



.calendar-terminal{
  margin-top:1rem;

  border:1px solid rgba(0,255,120,.3);

  background:black;

  box-shadow:var(--shadow);

  height:90px;

  overflow-y:auto;

  overflow-x:hidden;

  padding:1rem;

  max-height:90px;
}

#calendar-content{
  margin:0;

  color:var(--green-soft);

  line-height:1;

  white-space:pre;

  font-family:"Courier New", monospace;
}

/* footer */

footer{
  border-top:1px solid rgba(0,255,120,.3);

  padding:1rem 0;

  text-align:center;

  color:#77ffad;
}

/* responsive */

@media(max-width:700px){

  .terminal-header{
    flex-direction:column;

    align-items:flex-start;
  }

  .terminal-logo{
    font-size:1.7rem;
  }

  .terminal-menu{
    gap:.7rem;
  }

  .gallery img{
    height:180px;
  }

}