@font-face {
    font-family: 'chippyfontregular';
    src: url('chippyfont-regular-webfont.woff2') format('woff2'),
         url('chippyfont-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
.link:hover {
    color: #FFF;
    border: #000 6px solid;
}
.portfolio_section {
    display: flex;
    align-items: center;
    justify-content: left;
}
.portfolio_section.aaa {
    display: block;
    align-items: center;
    justify-content: center;
}
.portfolio_img {
    width: 50dvw;
    height: auto;
    margin-right: 20px;
}
.portfolio_img_badge {
    width: 20dvw;
    height: auto;
}
.portfolio_des_text {
    font-size: 2.5em;
    font-family: chippyfontregular;
    margin-top: 0px;
    line-height: 100%;
  }
.kofi_logo {
    width: 20%;
    height: auto;
    position: static;
}
.portfolio_callout {
    font-size: 2.5em;
    text-align: left;
    font-family: chippyfontregular;
    margin-top: 0px;
    line-height: 100%;
}
.des_text {
    font-size: 2.5em;
    text-align: left;
    font-family: chippyfontregular;
    margin-top: 0px;
    line-height: 100%;
    margin-bottom: 0px;
}
nav {
    background-color: #2200cc; /* Dark background */
    position: fixed; /* Fixed position at the top */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100; /* Ensure it stays on top of other content */
    }
h2 {
    color: #000000;
    font-size: 50px;
    text-align: center;
    font-family: chippyfontregular;
    margin-top: 0px;
    margin-bottom: -4px;
}
nav ul {
    list-style-type: none; 
    margin: 0;
    padding: 0;
 /* Clear floats */
}

nav li {
    float: left; 
}

nav a {
    display: block; /* Make the entire link clickable */
    font-size: 5dvh;
    color: white; /* White text */
    text-align: center; 
    padding: 1dvw 3vw;
    text-decoration: none; 
}
nav a:hover {
    background-color: #000;
}
h1 {
    color: #000000;
    font-size: 75px;
    text-align: center;
    font-family: chippyfontregular;
    margin-top: 1px;
    margin-bottom: -4px;
}
.thingie {
    position: relative;
    bottom: -10px;
}
.thingie:hover {
  filter: invert(1);
}
a.socials {
    color: #000000;
    font-size: 50px;
}
a.socials:hover {
    color: #ffffff;
}
hr.funny-face {
  border: none;
  height: 30px; /* You can adjust this height */
  background-image: url('./cat.svg');
  background-repeat: repeat-x;
  background-size: 20px 20px;
  background-position: center;
  position: relative;
  margin-left: 0px;
  margin-right: 0px;
  width: 100%;
  overflow: visible;
}
/*.text-hr-content {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  color: #000;
  font-size: 25px;
  text-align: center;
  background: #aa00ff;
  letter-spacing: 5px;
  font-family: chippyfontregular, monospace;
  line-height: 20px;
}*/
footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #2200cc;
  color: white;
  text-align: center;
  height: 10dvh;
  font-size: 2dvh;
  font-family: chippyfontregular;
  padding-top: 0%;
}


body {
    margin-top: 10dvh; /* Add margin to the body to prevent content from being hidden behind the navbar */
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom:10dvh;
}
html
{
    background-color: #aa00ff;
    color: #000000;
    font-family: 'chippyfontregular';
}

/* Age-gate modal styles (used by AD.html via main.js) */
#varlabs-age-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.varlabs-age-modal {
    background: #fff;
    color: #000;
    padding: 2.5rem;
    border-radius: 8px;
    max-width: 520px;
    width: calc(100% - 4rem);
    text-align: center;
    font-family: chippyfontregular, sans-serif;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
.varlabs-age-modal h2 { margin-top: 0; font-size: 2rem; }
.varlabs-age-actions { margin-top: 1.25rem; display: flex; gap: 1rem; justify-content: center; }
.varlabs-age-actions button { font-size: 1.1rem; padding: 0.5rem 1rem; border-radius: 6px; border: none; cursor: pointer; }
.varlabs-age-actions #varlabs-enter { background: #2200cc; color: #fff; }
.varlabs-age-actions #varlabs-leave { background: #eee; color: #000; }
.varlabs-age-note { display: block; margin-top: 0.75rem; font-size: 0.8rem; color: #333; }

/* small styles for password input in Local-services gate */
#varlabs-pass { width: 100%; padding: 0.6rem 0.5rem; margin-top: 0.75rem; border-radius: 6px; border: 1px solid #ccc; font-size: 1rem; }
#varlabs-pass:focus { outline: none; box-shadow: 0 0 0 3px rgba(34,0,204,0.15); border-color: #2200cc; }

/* reset local choices button */
.reset-local { background:#2200cc; color:#fff; border:none; padding:0.5rem 0.75rem; border-radius:6px; cursor:pointer; }
.reset-local:hover { background:#000; }

/* CSS lightbox using :target */
.varlabs-lightbox {
    /* start hidden and transparent; immediate show/hide (no animation) */
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.0);
    z-index: 20000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    /* no transition to avoid animation-related issues on some servers/browsers */
    pointer-events: none; /* prevent clicks when hidden */
}
.varlabs-lightbox:target {
    display: flex;
    opacity: 1;
    background: rgba(0,0,0,0.9);
    pointer-events: auto;
}
.varlabs-lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.6);
    z-index: 2;
    /* no transform or transition to keep the lightbox immediate */
    opacity: 0.98;
}

.varlabs-lightbox .dismiss { position: absolute; inset: 0; z-index: 1; display: block; cursor: pointer; }
.varlabs-lightbox .close { position: absolute; top: 1rem; right: 1rem; color: #fff; text-decoration: none; font-size: 2rem; z-index: 3; }
.varlabs-lightbox .close::after { content: "×"; }