/* =========================================================
   COLOR SYSTEM
   These variables let you change the theme in one place
   ========================================================= */
:root {
  --black:   #000000;
  --orange:  #fe3e0f;
  --purple:  #bf00ff;
  --pink:    #ff1493;
  --white:   #ffffff;

  --text-color:            var(--black);
  --banner-text-color:     var(--black);

  --link-color:          var(--pink);
  --link-hover-color:    var(--orange);

  --tag-color:           var(--white);
  --highlight:           var(--white);

  --subtle:              var(--pink);

  --td-odd-color:        var(--orange);
  --td-even-color:       var(--pink);
}

/* =========================================================
   BASE PAGE STYLES
   These affect the whole document
   ========================================================= */
html {
  --s: 48px; /* control the size*/
  --c1: #000000;
  --c2:  #ffffff;
  
  --g:conic-gradient(at 90% 40%,#0000 75%,var(--c1) 0);
  background: var(--g),var(--g) var(--s) var(--s) var(--c2);
  background-size: calc(2*var(--s)) calc(2*var(--s));
}


body {
  margin: 0;
  
  background-attachment: fixed;
  background-position: center;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 18px;
}







/* =========================================================
   BORDER‑COLOR ANIMATION
   ========================================================= */
@keyframes border-cycle {
  0%   { border-color: var(--purple); }
  33%  { border-color: var(--pink); } 
  66%  { border-color: var(--orange); }
  100% { border-color: var(--purple);}
}

/* utility class – attach to any element with a border */
.animated-border {
  animation: border-cycle 4.5s linear infinite; animation-direction: normal;
}



/* text‑color animation (used for nav separators) */
@keyframes myAnimation {
  0%   { color: var(--purple); text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 2px 2px 2px #BF00FF, 0 0 25px #BF00FF, 0 0 5px #BF00FF; }
  33%  { color: var(--pink);  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white,2px 2px 2px var(--pink), 0 0 25px var(--pink), 0 0 5px var(--pink); }
  66%  { color: var(--orange); text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 2px 2px 2px var(--orange), 0 0 25px var(--orange), 0 0 5px var(--orange);}
  100% { color: var(--purple); text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 2px 2px 2px #BF00FF, 0 0 25px #BF00FF, 0 0 5px #BF00FF;}
}



/* =========================================================
   MAIN CONTENT AREA
   ========================================================= */
main {
  width: 896px;
  margin: 0 auto;               /* centre horizontally */
  margin-top: 0;
  border: 8px solid;
 border-left-width: 16px;
   border-bottom-width: 16px;
    border-right-width: 16px;

  background: rgba(255,255,255,1);
  
}

/* list spacing */
li { margin-bottom: 0; }

/* tiny square icon (unchanged) */
.icon {
  display: inline-block;
  width: 2px;
  height: 2px;
  margin-right: 0;
  border-radius: 0.2em;
  vertical-align: text-bottom;
}

/* main heading */
.character-name {
   border: 8px solid; 
   
   background: black;
   border-bottom-width: 16px;
     border-right-width: 16px;
       border-left-width: 16px;
  font-size: 65px;
  text-align: center;
  padding: 8px;
  margin-top: 0;
  line-height: 75%;
  margin-bottom: 0;   
 

}





/* make images responsive */
main img,
.bio img {
  display: block;
  max-width: 100%;
  margin: auto;
}























main { position:relative; }

#hcg-slider-1{
  position:absolute;          /* keep it out of the normal flow */
  top:200px;                  /* vertical placement you already use */
  left:40px;                  /* <-- the required offset */
  width:500px;                /* fixed width (or max‑width:100%) */
  height:500px;
  z-index:10;
}

/* 2️⃣ Track – no manual left offset */
#hcg-slider-1 .hcg-slider-track{
  display:flex;
  height:100%;
  transition:transform .4s ease;
}

/* slide & image – unchanged */
#hcg-slider-1 .hcg-slide{
  flex:0 0 100%;
  height:100%;
  display: flex;
  align-items:center;
  justify-content:center;
}
#hcg-slider-1 .hcg-slide img{
  max-height:100%;
  max-width:100%;
  object-fit:contain;
}

/* arrows – keep them at the edges of the slider */
#hcg-slider-1 #hcg-slide-prev,
#hcg-slider-1 #hcg-slide-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:1rem;
  color:#bf00ff;
  width:2rem; height:2rem; line-height:2rem;
  text-align:center;
  border-radius:.25rem;

  user-select:none;
}

/* left arrow –  .5rem inside the container + extra negative offset so it hangs out */
#hcg-slider-1 #hcg-slide-prev{
  left:-1.5rem;    /* 0.5rem (inner padding) – 2 rem (arrow width) → sticks out */
}

/* right arrow – mirror the left side */
#hcg-slider-1 #hcg-slide-next{
  right:-1.5rem;   /* same magnitude, opposite side */
}




/* =========================================================
   SIDEBAR / BIO BOX
   This is the project summary card
   ========================================================= */
.bio {
    border: 8px solid;
     border-top-width:0px;
   border-bottom-width: 16px;
  float: right;
  max-width: 280px;
 
    margin-top: 0; 
   border-left-width: 16px;
   border-bottom-width: 16px;
    border-right-width: 0px;

}

/* table inside the bio */
.bio table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
}

/* table cell styling */
.bio th,
.bio td {
  padding: 0.4em;
  vertical-align: top;
}
.bio th {
  background: var(--purple);
}
.bio td {
  overflow: hidden;
  font-size: small;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bio td:first-of-type {
  width: 20%;
  font-weight: bold;
}

/* alternating row colours */
.bio tr:nth-child(odd)  { background: var(--td-odd-color); }
.bio tr:nth-child(even) { background: var(--td-even-color); }









/* =========================================================
   NAVIGATION
   ========================================================= */
nav ul {
  margin-top: 0;    
  display: flex;
 background:black;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 18px;
  padding: 4px;
  border: 0px solid var(--purple);
     border-bottom-width: 16px;
     border-right-width: 8px;
       border-left-width: 8px;
}
nav a {
  color: white;
}
nav a:active { color: var(--purple); }
nav a:hover  { color: var(--pink); }
nav li {
  padding: 2px;
  text-align: center;
}


















/* LINK & ANIMATION */
nav li::after {
  animation: myAnimation 4.5s linear infinite normal;
  content: " & ";
}

/* ANIMATED BORDERS*/

.character-name, .bio, nav ul, main, :after {
animation: border-cycle 4.5s linear infinite normal;
}















/* =========================================================
   RESPONSIVE RULES
   Makes the layout fit smaller screens
   ========================================================= */
@media only screen and (max-width: 800px) {
  h1 { font-size: 24px; }

  main {
    margin-top: 0;
    margin-bottom: 0;
    border-right: none;
    border-left:  none;
    border-radius: 0;
  }

  .bio {
    float: none;
    width: 280px;
    max-width: 100%;
    margin: 0 auto 16px;
  }
}