/* Setting the details for the font
TODO: play with weight and style params */
.share-tech-mono-regular {
  font-family: "Share Tech Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

/* set the bgcolor of the main pain - want light grey*/
html {
  font-size: 14pt;
  font-family: 'Share Tech Mono', monospace;
  /*background: rgb(141, 181, 193);*/
}

body {
  background: #9ea0a2; /* fallback or gradient */
  margin: 0;
  padding: 0;
}

.bodystyle {
  border-radius: 1rem;
  overflow: hidden; /* ensures children respect rounded corners */
  margin: 1vh 1vh 3vh 1vw; /* top right bottom left */
  box-shadow: 0 40px 80px 0 rgba(0, 0, 0, 1), 0 60px 200px 0 rgba(1, 0, 0, 0.5);
  max-width: 96vw; /* or 100vw for full width */
  background: rgb(0, 0, 0); /* or your gradient */
  }

/* -- Header and logo styles -- */

.topstyle_gap{
  width: 100%;
  height: 2vh;
}

.topstyle {
  position: relative;
  flex-direction: column;
  align-items: center;
  
  width: 100%;
  height: 50vh;

  background-image: url("../images/background2.webp");
  background-size: cover;    /* image scales to fit, keeps aspect ratio */
  background-repeat: no-repeat;
  background-position: center;

  margin-bottom: 1vh; /* TODO: figure out the calcualtion that would allow this to set the spacing to 'text-content' */
}

.logo-header {
  display: flex;
  align-items: center;
  width: 100%;
  height: 12vh;

  overflow: hidden;
  
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.5);
}

.logo>img{
  float: left;
  height: 10vh;
  width: auto; /* maintain aspect ratio */
  padding-left: 2vw; 
  padding-right: 2vw; 
}

.typewriter-header>h1 {

  position: relative;
  font-size: clamp(2rem, 12vh, 7vw); /* min 2rem, preferred 12h, max 7vw */

  margin: 0;
  color: rgb(210, 210, 210);
  text-shadow: 3px 3px 1px black;

  /* Typing animation */
  overflow: hidden; /* Ensures the content is not revealed until the animation */ 
  border-right: 0.25em solid #288dd2; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  
  animation: typing 3s steps(30, end), blink-caret .75s step-end 2.5s;
  animation-fill-mode: forwards;  /*Ensures final state is kept */
}

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
} 

@keyframes blink-caret {
  0%, 50% { border-color: rgb(71, 118, 161); }
  100% { border-color: transparent; }
 }

h2 {
  background: rgba(210, 210, 210, 0.8);
  width: 100%;
  color: #011f33;
  text-align: center;
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 3.5vh); /* min 1.3rem, preferred 3vw, max 3.5vh */
  padding: 1% 1% 1% 1%;
}

/* -- Navigation bar styles -- */

nav {
  display: flex;
  position: relative;

  width: 100%;
  height: 5vh;
  background: rgba(0, 0, 0, 0.8);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

nav a {
  width: 20%;
  line-height: 5vh;
  height: 100%;
  font-size: clamp(0.6rem, 2vw, 1.5rem); /* min 0.6rem, preferred 2vw, max 1.5rem */
  Overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  justify-content: center;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: white;
  cursor: pointer;
}
nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all .5s ease 0s;
}

nav a:not(:first-child) {
  position: relative;
}

nav a:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 4px;
  background-color:  #288dd2; /* Adjust color as needed */
}

a:nth-child(1) {
  color: white;
  padding: 0;
  margin: 0;
  border: 0;
  width: 20%;
}
a:nth-child(2) {
  color: white;
  padding: 0;
  margin: 0;
  border: 0;
  width: 20%;
}
a:nth-child(3) {
  color: white;
  padding: 0;
  margin: 0;
  border: 0;
  width: 20%;
}
a:nth-child(4) {
  color: white;
  padding: 0;
  margin: 0;
  border: 0;
  width: 20%;
}
a:nth-child(5) {
  color: white;
  padding: 0;
  margin: 0;
  border: 0;
  width: 20%;
}
nav .start-home, a:nth-child(1):hover~.animation {
  width: 20%;
  left: 0;
  background: rgba(0, 150, 255, 0.4);
}
nav .start-about, a:nth-child(2):hover~.animation {
  width: calc(20% - 4px);
  left: calc(20% + 4px);
  background: rgba(0, 150, 255, 0.4);
}
nav .start-blog, a:nth-child(3):hover~.animation {
  width: calc(20% - 4px);
  left: calc(40% + 4px);
  background: rgba(0, 150, 255, 0.4);
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
  width:calc(20% - 4px);
  left: calc(60% + 4px);
  background: rgba(0, 150, 255, 0.4);
}
nav .start-contact, a:nth-child(5):hover~.animation {
  width: calc(20% - 4px);
  left: calc(80% + 4px);
  background: rgba(0, 150, 255, 0.4);
}

/* -- Image Slider Animation --
CSS animation adapted from tutorial at:
https://www.smashingmagazine.com/2024/04/infinite-scrolling-logos-html-css/ */
.marquee {

  /* variables to control the animation */

  --marquee-item-width: min(33vh, 66vw);
  --marquee-item-height: min(33vh, 66vw);
  --marquee-duration: 60s;

  /* This offset is used in the timing delays 
   and therefore ultimately controls the image spacing. */
  --marquee-item-offset: calc(var(--marquee-item-width) * 5.5); 

  display: flex;
  block-size: var(--marquee-item-height);
  margin-block: 2vh;
  margin-left: 5%;
  margin-right: 5%;
  position: relative;
  overflow-x: hidden;
  
  mask-image: linear-gradient(
    to right,
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marquee__item {

  opacity: 0.8;
  
  position: absolute;
  inset-inline-start: var(--marquee-item-offset);
  transform: translateX(-50%); /* center the item */
  
  animation: go linear var(--marquee-duration) var(--marquee-delay, 0s) infinite;

  width: var(--marquee-item-width);
  aspect-ratio: 1 / 1;
  
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.marquee__item:nth-of-type(1) {
  --marquee-delay: calc(var(--marquee-duration) * 0.16667 * 1 * -1);
}

.marquee__item:nth-of-type(2) {
  --marquee-delay: calc(var(--marquee-duration) * 0.16667 * 2 * -1);
}

.marquee__item:nth-of-type(3) {
  --marquee-delay: calc(var(--marquee-duration) * 0.16667 * 3 * -1);
}

.marquee__item:nth-of-type(4) {
  --marquee-delay: calc(var(--marquee-duration) * 0.16667 * 4 * -1);
}

.marquee__item:nth-of-type(5) {
  --marquee-delay: calc(var(--marquee-duration) * 0.16667 * 5 * -1);
}

.marquee__item:nth-of-type(6) {
  --marquee-delay: calc(var(--marquee-duration) * 0.16667 * 6 * -1);
}

@keyframes go {
  to {
    inset-inline-start: calc(var(--marquee-item-width) * -1);
  }
}

/* ANTIMATION END */

.text-content{
  --min-spacer: 11vh; /* minimum space to leave above text */
  --optimised-spacer: calc(min(33vh, 66vw) - 17vh); /* preferred space to leave above text */
  margin-top: max(calc(var(--min-spacer)),calc(var(--optimised-spacer))); /* or match marquee height */
}

p, li {
  margin: 0 6% 0 6%;
  color: rgb(243, 239, 239);
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 1px;
}