/* ========== COLOR DEFINITION (TokyoNight Storm) ========== */
:root {
    /* ----- Backgrounds ----- */
    --bg: #1A1B26; /* Default background */
    --hf-bg: #24283B; /* Header/ Footer Background */
    --box: #1F2335; /* Box background */
    --card: rgba(36, 40, 59, 0.9); /* Card background */
    
    /* ----- Text ----- */
    --text: #C0CAF5; /* Standard text */
    --text-muted: #A0A8D0; /* Usage: box_info */
    --caption: #7AA2F7; /* Main caption */
    --sub-caption: #A9B1D6; /* Secondary captions */
    --box-caption: #7AA2F7; /* Caption inside boxes, may be equal to --caption */

    /* ----- Linking etc. ----- */
    --link: #4FD6E0; /* Link color */
    --link-hover: #7AE3F7; /* Hovering above normal links */
    --nav-hover: #4FD6E0; /* Hovering above nav links */
    --link-hover-box: rgba(79, 214, 224, 0.15);/*rgba(51, 70, 124, 0.2);*/ /* Hovering above box links */

    /* ----- Highlighting ----- */
    --accent-primary: #9D7FEA;  /* Primary accent */
    --accent-secondary: #D45BB0;/* Secondary accent */

    /* ----- Other ----- */
    --box-shadow: rgba(0, 0, 0, 0.5); /* Shadow for boxes/cards, may be not visible */
}


/* ========== GENERAL ========== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nimbus Mono', sans-serif;    
}

p {
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    color: var(--text);
}

a {
    color: var(--link);
    text-decoration-line: none;
}

a:not(.box_link:hover):not(nav a:hover):hover {
    color: var(--link-hover);
    font-weight: bold;
}

html, body {
    height: 100%;
    background-color: var(--bg); /* page background */
    color: var(--text);
    margin: 0;
    padding: 0;
}


header {
    background-color: var(--hf-bg);
    color: var(--text);
    padding: 1rem 2rem;
    border-bottom: 3px solid var(--accent-secondary);
}

#main-header {
    font-size:xx-large;
    text-align: center;
}

main {
    padding: 2rem;
    background-color: var(--bg);
    padding-left: clamp(1rem, 5vw, 100px);
    padding-right: clamp(1rem, 5vw, 100px);
}

footer {
    background-color: var(--hf-bg);
    color: var(--text);
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    border-top: 3px solid var(--accent-secondary);
}

nav ul {
    justify-content: center;
    align-items: center;
    list-style: none;
    display: flex;
    gap: 1.5rem;
}

nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: bold;
}

nav a:hover {
    color: var(--nav-hover);
}


/* ========== BOX (In- card box) ========== */

.box {
    background-color: var(--box); /* soft red tint */
    color: var(--text);
    margin: 1rem 0; /* vertical spacing */
    padding: 1rem;
    border: 1px solid;
    border-radius: 6px;
}

.box--unlinked{
    border: 1px solid var(--accent-primary);
}

.box--linked{
    border: 1px solid var(--link);
}

.box_heading {
    font-weight: bold; 
    font-size: medium;
    color: var(--box-caption);
}

.box_info {
    color: var(--text-muted);
    text-indent: 1rem;
}

.box_image {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    margin: 1rem auto;
    border-radius: 8px;
}

.box_link {
    text-decoration: none;
    color: inherit; /* Keeps the text color same as normal */
    display: block; /* Ensures the link covers the whole div */
}

/* Optional: add hover effect for the whole div */
.box_link:hover .box {
    background-color: var(--link-hover-box); /* Example hover effect */
    cursor: pointer;
}

.box ul {
    margin-left: 1.5rem;   /* controls indentation */
    padding-left: 1rem;    /* keep bullets inside box */
    padding-top: 0.5rem;
    list-style-type: circle;
}

.box li {
    margin-bottom: 0.3rem; /* optional spacing between bullets */
}


/* ========== CARD (Outermost cells) ========== */

.card {
    background-color: var(--card); /* light, clean white */
    border: 2px solid var(--accent-primary);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 2rem; /* spacing between cards */
    box-shadow: 0 4px 8px var(--box-shadow);
}

.card ul {
    margin-left: 1.5rem;   /* controls indentation */
    padding-left: 1rem;    /* keep bullets inside box */
    padding-top: 0.5rem;
    list-style-type: circle;
}

.card li {
    margin-bottom: 0.3rem; /* optional spacing between bullets */
}


.caption {
    font-weight: bold;
    font-size: 1.2rem;
    padding-bottom: 1rem;
    padding-top: 2rem;
    color: var(--caption);
}

.subcaption {
    font-weight: bold;
    font-size: 1rem;
    padding-bottom: 0.5rem;
    padding-top: 1rem;
    color: var(--sub-caption);
    padding-left: 0.5rem;
}


/* ========== GALLERY (Pictures) ========== */

.gallery {
  display: flex;
  flex-wrap: wrap; /* allow wrapping to next line */
  gap: 1rem; /* spacing between cards */
  justify-content: center; /* center the row */
}

.gallery_card {
  display: inline-flex; /* makes card size wrap content */
  flex-direction: column; /* stack image + caption vertically */
  align-items: center;
}

.gallery_card img {
  border: 2px solid var(--accent-primary);
  border-radius: 12px;
  box-shadow: 0 4px 6px var(--box-shadow);
  max-width: 300px; /* keep images from getting too big */
  height: auto;
  display: block;
}

.gallery_caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--accent-secondary);
  text-align: center;
}


/* ========== ICONS (Icons for career) ========== */

.icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
    vertical-align: middle;
}


/* ========== ICONS (Icons for career) ========== */
/* ============ INVISIBLE TECH GRID ============= */
.tech {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: auto;
}

.tech-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,120px);
  justify-content:center;
  gap:40px;
}

.tech-box{
  width:90px;
  height:90px;
  background:#1f2937;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tech-box i{
  font-size:55px;   /* bigger icon */
  color:#6b7280;
  transition:0.3s;
}

.tech-name{
  color:white;
  font-size:18px;
  opacity:0;
  transition:0.3s;
}

.tech:hover .tech-name{
  opacity:1;
}

.tech:hover i{
  color:#3776ab;
}