/* ===========================================================
GLOBAL RESET & IMPORTS
=========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Megrim&family=Ranga&family=Biryani:wght@400;700&display=swap');

html, body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
  background: var(--nav-bg);
  font-family: var(--font-primary);
}

*, *::before, *::after { box-sizing: border-box; }

/* ===========================================================
DESIGN TOKENS
=========================================================== */
:root {
  --font-primary: 'Biryani', sans-serif;
  --font-heading: 'Megrim', cursive;
  --font-subhead: 'Ranga', cursive;

  --color-primary: #699953;
  --color-primary-trans: rgba(70,101,55,0.5);
  --color-text: #466537;
  --color-transparent: rgba(255,0,0,0.02);
  --nav-bg: #e3ecdf;
  --nav-link: #e0f0ff;
  --nav-hover-bg: #699953;
  --nav-hover-link: #466537;
  --foot-bg-color: #111111;
}

/* ==============================================================
PAGE‑SPECIFIC THEME – ContentCreation
============================================================== */
.ContentCreation {
  --color-primary:   #836d58;
  --color-primary-trans: rgba(131, 109, 88, 0.5);
  --color-text:      #4f4235;
  --nav-bg:          #f3efeb;
  --nav-link:        #e0f0ff;
  --nav-hover-bg:    #836d58;
  --nav-hover-link:  #4f4235;
}

/* ==============================================================
PAGE‑SPECIFIC THEME – Programming
============================================================== */
.Programming {
  --color-primary:   #693f7f;
  --color-primary-trans: rgb(105, 63, 127, 0.5);
  --color-text:      #3e254c;
  --nav-bg:          #f3efeb;
  --nav-link:        #e0f0ff;
  --nav-hover-bg:    #693f7f;
  --nav-hover-link:  #3e254c;
}

/* ===========================================================
HEADINGS & TYPOGRAPHY
=========================================================== */
h1, .hero h1, .nav li { 
  font-family: var(--font-heading); 
}
h2, h3 { 
  font-family: var(--font-subhead);
  margin-top: 1rem;
  margin-bottom: 0rem;
}
h4,h5,h6 { 
  font-family: var(--font-primary);
  margin-top: 1rem;
  margin-bottom: 0rem;

}

p {
    margin-top: 0rem;
    margin-bottom: 0rem;
}


span{
    margin-top: 1rem;
    margin-bottom: 0rem;
}

svg {
    margin-top: 0.7rem;
    margin-bottom: 0rem;
}

a { 
  color: var(--color-primary); 
  text-decoration: underline; 
}
a:hover { 
  text-decoration: none; 
}


/* ===========================================================
HERO
=========================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  padding: 2rem;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--nav-link);
}

.hero-content {
  display: inline-block;
  padding: 1.2rem 1.6rem;
  border-radius: 0.8rem;
  background: var(--color-primary-trans);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.hero h1 {
  font-size: clamp(2.5rem, 10vw, 5rem);
  margin-bottom: .5rem;
  text-shadow: 1px 1px 2px #000, 0 0 25px #fff, 0 0 5px #fff7e3;
}
.hero h3 {
  font-size: clamp(1.7rem, 5vw, 2rem);
  margin-bottom: 2rem;
  text-shadow: 0 0 3px #000;
}

/* Hero backgrounds */
.index .hero            { 
  background-image: url('../Assets/wallpaper.png'); 
}
.ContentCreation .hero { 
  background-image: url('../Assets/SocialMedia.png'); 
}
.UX .hero { 
  background-image: url('../Assets/SocialMedia.png'); 
}
.Programming .hero {
  background-image: url('../Assets/Programmering.png');
}

/* ===========================================================
NAVIGATION
=========================================================== */
.nav-wrapper { 
  position: relative; 
}

.nav-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  color: var(--nav-link);
  cursor: pointer;
  padding: 0.5rem;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  z-index: 10001;
}

ul.nav {
  margin: 0;
  padding: 0 5vw;
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-heading);
  font-size: 1.2rem;
  background-color: var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 10000;
  flex-wrap: wrap;
}

ul.nav li { 
  margin: 0; 
}

ul.nav li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--nav-link);
  padding: 1vw 1.5vw;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .18s ease, transform .18s ease-out, box-shadow .35s ease;
}

ul.nav li a:hover {
  color: var(--nav-hover-link);
  transform: scale(1.2);
  transition: opacity .35s ease, transform .18s ease-in;
}

.nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 10000;
  background-color: var(--color-primary); /* viktigt så den syns alltid */
}

/* Desktop */
ul.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
}



/* ===========================================================
FADE
=========================================================== */
.Fadedown {
  height: 3vw;
  background-color: var(--color-primary);
  mask-image: linear-gradient(to bottom, var(--color-primary), var(--color-transparent));
}

.Fadeup {
  height: 3vw;
  background-color: var(--color-primary);
  mask-image: linear-gradient(to top, var(--color-primary), var(--color-transparent));
}

.FootFade {
  height: 3vw;
  background-color: var(--foot-bg-color);
  mask-image: linear-gradient(to top, var(--foot-bg-color), var(--color-transparent));
}
/* ===========================================================
ABOUT SECTION
=========================================================== */
.About {
  background: var(--color-primary);
  padding: 2vw 3vw;
  color: var(--nav-link);
}

.About .container {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-items: flex-start; /* Correct version of "top" */
}

/* ===========================================================
CONTAINER
=========================================================== */
.container { 
  max-width: 1200px; 
  margin: 
  0 auto; 
}

.container2 {
  display: flex;
  flex-direction: column;
  align-items: top;
  padding: 2vw 3vw;
}

.content3 { 
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding-left:1rem;
    padding-right:1rem;
    box-sizing:border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;     
}

/* Portfolio blocks */
.portfolio-block {
  padding: 1rem 0;
  color: var(--color-text);
}

.portfolio-block .container {
  padding: 0 10px 0 10px;
  display: flex;
  gap:2rem;
  flex-direction: row;
  align-items: top;
}

.portfolio-block.reverse .container {
  flex-direction: row-reverse;
}

.content {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

/* style for the image */
.content img {
  width: 100%;
  height: auto;
  margin-top: 1rem;
  border-radius: 8px;
}

/* Columns */
.content, .content2 {
  flex: 1 1 55%;
  min-width: 260px;
}

.visual {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 1 40%;
  min-width: 200px;
  max-width: 400px;
  padding: 5px;
}

.dubblepic {
    display: flex;          
    flex-direction: column;
    justify-content: flex-start; 
    margin: 0;
    padding: 0;
}


/* Images */
.visual img { 
  width: 80%;
  max-height: 340px;
  object-fit: contain;
  border-radius: 8px;
  filter: brightness(0.6);
  transition: filter .35s ease, transform .18s ease-out, box-shadow .35s ease;
}

.visual a { 
  display: block; 
  position: relative; 
}

.visual a img {
  width: 100%;
  filter: brightness(0.6);
  transition: filter .35s ease, transform .18s ease-out, box-shadow .35s ease;
}

.visual a:hover img {
  transform: scale(1.04);
  filter: brightness(1);
  box-shadow: 0 0 8px 8px rgba(0,0,0,0.2), 0 10px 10px 0 rgba(0,0,0,0.19);
}


.overlay-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 50px;
  text-shadow: 1px 1px 2px #fff, 0 0 25px #fff, 0 0 5px #fff1ce;
  font-family: var(--font-heading);
  font-weight: bold;
  opacity: 0;
  pointer-events: none;
}
.visual a:hover .overlay-text { 
  opacity: 1; 
}

.visual a:hover .overlay-text {
  opacity: 1;
}

.link-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit; 
    transition: color 0.3s ease;
}

.link-item svg {
    transition: transform 0.3s ease, filter 0.3s ease;
}

.link-item:hover {
    color: var(--color-primary); 
    transform: scale(1.15);
    filter: brightness(1.3);
}

.link-item:hover svg {
    transform: scale(1.15);
    filter: brightness(1.3);
}

/* ======================
   BINARY CAROUSEL
   Self-contained + safe
====================== */
.binary-carousel {
  position: relative;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  margin: 0 auto;
}

.binary-carousel:hover .bc-btn {
  opacity: 1;
}

/* Track */
.bc-track {
  display: flex;
  transition: transform .35s ease;
}

.bc-track img {
  width: 100%;
  flex-shrink: 0;
  user-select: none;
  pointer-events: none;
  border-radius: 8px;
}

/* Buttons */
.bc-btn {
  position: absolute;
  top: 10%;
  bottom: 0;
  width: 20%;              /* size of the invisible click zone */
  background: rgba(0,0,0,0); /* fully transparent */
  border: none;
  cursor: pointer;
  opacity: 0;              /* buttons appear on hover */
  transition: opacity .3s ease;
  color: white;
  font-size: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover effect: button becomes visible */
.fade-carousel:hover .bc-btn {
  opacity: 1;
  background: rgba(0,0,0,0.25); /* subtle dark overlay on hover */
}

.bc-prev { left: 0; }
.bc-next { right: 0; }


/* ==============================================================
PAGE‑SPECIFIC – Programming
============================================================== */

  .hello-world {
    font-family: 'Megrim', cursive;
    font-size: 7rem;
    font-weight: 900;
    background: linear-gradient(90deg, #693f7f, #699953, #ffffff);
    background-size: 300% 300%;       /* allow gradient to move */
    -webkit-background-clip: text;    /* Chrome/Safari */
    background-clip: text;
    color: transparent;               /* hide original color */
    animation:
      gradientShift 6s ease infinite,
      pulseScale    2s ease-in-out infinite alternate;
    text-align: center;
  }

  /* Gradient slides left‑right continuously */
  @keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Gentle scaling “breathing” effect */
  @keyframes pulseScale {
    from { transform: scale(0.95); }
    to   { transform: scale(1.05); }
  }

  /* The 8-ball container */
  .wrapper{
    text-align:center;
  }

  /* --------------------------------------------------------------
     Question input
  -------------------------------------------------------------- */
.question-input{
  /* Existing styles – keep them */
  width:260px;                     /* you can keep the fixed width */
  max-width:90vw;                  /* never exceed the viewport width */
  font-size: var(--font-primary);
  font-family: var(--font-primary);
  border:none;
  border-radius:.4rem;
  outline:none;
  background:var(--nav-bg);
  color:var(--color-primary);

  /* NEW centering helpers */
  display:block;                   /* allows margin:auto to work */
  margin:0 auto;                   /* horizontal centering */
}

/* OPTIONAL: make the input shrink a bit on very small screens */
@media (max-width: 340px) {
  .question-input{
    width:60%;                     /* use a percentage instead of the fixed 260 px */
  }
}

  /* --------------------------------------------------------------
     The ball itself
  -------------------------------------------------------------- */
  .ball{
    width: 400px;height:400px;
    background:#000;
    border-radius:50%;
    position:relative;
    box-shadow:
      inset -8px -8px 15px rgba(255,255,255,.1),
      inset 8px 8px 15px rgba(0,0,0,.6),
      0 0 20px rgba(0,0,0,.5);
    cursor:pointer;
    transform-style:preserve-3d;
    transition:transform .4s ease;
  }

  .ball::after{
    font-family: var(--font-heading);
    content:"8";
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    font-size:120px;
    color:#fff;
    text-shadow:0 0 8px rgba(255,255,255,.8);
    transition:opacity .3s ease;
    z-index:2;
  }
  .ball.hide-eight::after{
    opacity:0;               
  }

  .answer-window{
    width:140px;height:140px;
    background:var(--color-primary);
    font-family: var(--font-primary);
    border-radius:50%;
    position:absolute;
    top:calc(50% - 70px);
    left:calc(50% - 70px);
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    font-size:1rem;
    text-align:center;
    line-height:1.2;
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
    z-index:1;
  }
  .ball.active .answer-window{
    opacity:1; 
  }

  /* Shake animation 
  @keyframes shake{
    0%   { transform:rotate(0deg); }
    20%  { transform:rotate(-15deg); }
    40%  { transform:rotate(15deg); }
    60%  { transform:rotate(-10deg); }
    80%  { transform:rotate(10deg); }
    100% { transform:rotate(0deg); }
  }

/* ===========================================================
BUTTONS
=========================================================== */
.btn-primary {
  display: inline-block;
  margin-top: .8rem;
  padding: .6rem 1.2rem;
  background: var(--color-primary);
  color: var(--nav-link);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: filter .18s ease, transform .18s ease-out, box-shadow .35s ease;
}
.btn-primary:hover {
  background: var(--nav-hover-link);
  transform: scale(1.04);
  box-shadow: 0 0 8px 8px rgba(0,0,0,0.2), 0 10px 10px 0 rgba(0,0,0,0.19);
}

 
 
/* ===========================================================
FOOTER
=========================================================== */
.site-footer {
  background: #111;
  color: #eee;
  padding: 3rem 1rem 2rem;
  font-family: var(--font-primary);
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  flex-direction: row;
}

.footer-brand {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;   /* ← content stays vertical */
  gap: 1rem;
}

.footer-brand h2 {  
  font-family: var(--font-heading); 
  font-size: 1.8rem; color:   
  var(--color-primary); margin: 0;  
}
.footer-nav ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
  display: flex; 
  flex-wrap: wrap; 
  gap: .8rem; 
  justify-content: center; 
  flex-direction: column;
}
.footer-nav li { 
  margin: 0; 
}

.footer-nav a { 
  color: #fff; 
  text-decoration: none; 
  font-size: .95rem; 
  transition: color .2s ease; 
}

.footer-nav a:hover { 
  color: var(--nav-hover-link); 
}
.footer-social { 
  display: flex; 
  flex-wrap: wrap; 
  gap: .9rem; 
  align-items: center; 
  justify-content: center; 
  flex-direction: column;
}

.social-item { 
  display: flex; 
  align-items: center; 
  gap: .6rem; 
  padding: .45rem .7rem; 
  border-radius: .5rem; 
  background: #ffffff14; 
  text-decoration: none; 
  transition: background .3s ease, transform .2s ease; 
}

.social-item:hover { 
  background: var(--nav-hover-link); 
  transform: translateY(-2px); 
}

.social-item svg { 
  width: 1.5rem; 
  height: 1.5rem; 
  fill: var(--color-primary); 
}

.social-item:hover svg {
   fill: #272727; 
  }

.social-label { 
  font-size: .96rem; 
  color: var(--color-primary); 
  font-family: var(--font-primary); 
}

.social-item:hover .social-label { 
  color: #272727; 
}

.footer-bottom { 
  border-top: 1px solid rgba(255,255,255,.15); 
  margin-top: 2rem; 
  padding-top: 1rem; 
  text-align: center; 
  font-size: .85rem; 
  color: var(--color-primary); 
}

/* ===========================================================
RESPONSIVE ADJUSTMENTS
=========================================================== */

/* Mobile (max 768px) */
@media (max-width: 768px) {

  /* -------- Portfolio & About Sections -------- */

  .portfolio-block .container,
  .portfolio-block.reverse .container,
  .About .container {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
  }

  .visual,
  .content,
  .content2 {
    width: 100%;
    max-width: 500px;
    text-align: left;
    margin: 0.5rem 0;
    padding: 0;
  }

  .content2 {
    max-width: 600px; /* special case preserved */
  }

  .content3{
    padding-left:2rem;
    padding-right:2rem;
  }

  .visual a {
    margin-bottom: 1rem;
  }

  .dubblepic {
    width: 100%;
    max-width: 400px;
    align-items: center;
  }

  .hidden-space {
    display: none;
    margin: 0;
    padding: 0;
  }

  /* -------- Navigation -------- */

  .nav-toggle {
    display: block;
    color: var(--nav-hover-link);
  }

  ul.nav {
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  ul.nav.show {
    max-height: 1000px;
  }

  ul.nav li a {
    padding: 1rem;
  }

  /* -------- Footer -------- */

  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-nav ul,
  .footer-social {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-brand {
    align-items: center;
  }

  /* -------- Global Mobile Spacing -------- */

  .About,
  .portfolio-block {
    padding: 1rem 1rem;
  }

  h1,
  h2 {
    margin: 0.5rem 0;
  }

  p {
    margin: 0.4rem 0;
  }

  img {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}