/* Base */
body {
  background: #000;
  color: #fff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 2px;
  font-weight: 100;
  font-size: 1.1rem;
}

section { padding-left: 50px; padding-right: 50px;  }

a { text-decoration: none; color: green; }

.tourney { font-family: "Tourney", sans-serif; font-optical-sizing: auto; font-style: normal; font-variation-settings: "wdth" 100; }
.ramaraja-regular { font-family: "Ramaraja", serif; font-weight: 100; font-style: normal; }
.anta-regular { font-family: "Anta", sans-serif; font-weight: 400; font-style: normal; }

/* Header */
header {
  position: fixed;
  width: 95%;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 3rem;
  background: #000;
  box-shadow: 0 0 8px green;
  border-radius: 10px;
  z-index: 10;
}

.navigationmenu {
  font-family: "Tourney", "ramaraja", 'Courier New', Courier, monospace;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 2px;
  padding-inline: 10px;
}

.navigationmenu li a { color: #dadada; transition: color 0.3s; }
.navigationmenu li a:hover { color: green; }

/* SECTION 1 */
.section1 {
  display: flex;
  height: 100vh;
}

.left1 {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  color: #dadada;
}

.heading1 {
  width: 90%;
  font-family: "Tourney", "Anta", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 5rem;
  font-weight: 200;
  background: linear-gradient(to left, rgb(217, 0, 255)20%, rgb(0, 228, 80)80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* .right1 {
  display: flex;
  width: 30%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.content1 { 
  text-align: center;
}

.lorem {
  display: none;
  font-size: 1.1rem;
  line-height: 1.6;
  font-weight: 100;
  font-family: "Anta", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(to right, rgb(217, 0, 255)20%, rgb(0, 228, 80)80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content1 { width: 90%; } */

/* ========== SECTION 2 (tidigare section3 → About me) ========== */
.section2 {
  display: flex;
  height: 100vh;
}

.left2 {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 1.7;
}

.content2 { width: 90%; }

.huge {
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(135deg, rgb(251, 255, 0)10%, rgb(32, 185, 255)70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.huge2 {
  font-size:1.7rem;
  font-weight: 900;
  background: linear-gradient(135deg, rgb(251, 255, 0)10%, rgb(32, 185, 255)70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.right2 {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.img-content { 
  width: 90%; 
  display: inline-block;
  padding: 3px; /* tjocklek på ramen */
  border-radius: 50%; /* 50% är alltid helt cirkulärt */
  background: linear-gradient(
  to bottom,
  rgb(32, 185, 255) 0%,   /* lila högst upp */
  transparent 40%,             /* svart börjar vid 40% */
  transparent 60%,             /* svart slutar vid 60% */
  rgb(251, 255, 0) 100%   /* grön ner till botten */
  );
  overflow: hidden;
}

.img-content img {
  display: block; /* tar bort "extra pixlar" från inline-beteende */
  width: 100%;    /* gör att den fyller behållaren helt */
  height: auto;
  border-radius: 50%; /* matchar wrappern */
}

/* ========== SECTION 3 (tidigare section2 → projekt 1) ========== */
.section3 {
  display: flex;
  height: 100vh;
  flex-direction: row-reverse;
}

.left3 {
  flex: 0 0 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-description {
  max-width: 90%;
  font-size: 1.1rem;
  line-height: 1.6;
}

.right3 {
  flex: 0 0 55%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

.project-image-web {
  flex: 1 1 45%;
  max-width: 45%;
  border-radius: 7px;
  padding: 0.5rem;
  box-shadow: 0 0 4px #1676f5, 0 0 4px #1676f5, 0 0 4px #1676f5;
  text-align: center;
}

.project-image-phone {
  flex: 1 1 45%;
  max-width: 30%;
  border-radius: 7px;
  padding: 0.5rem;
  box-shadow: 0 0 4px #1676f5, 0 0 4px #1676f5, 0 0 4px #1676f5;
  text-align: center;
}

.project-image-web img,
.project-image-phone img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ========== SECTION 3-2 (tidigare section2-2 → WordPress real estate) ========== */
.section3-2 {
  display: flex;
  height: 100vh;
}

.left3-2 {
  flex: 0 0 45%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-description-2 {
  max-width: 90%;
  font-size: 1.1rem;
  line-height: 1.6;
}

.right3-2 {
  flex: 0 0 55%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

.project-image-web-2 {
  flex: 1 1 45%;
  max-width: 50%;
  border-radius: 7px;
  padding: 0.5rem;
  box-shadow: 0 0 4px green, 0 0 4px green, 0 0 4px green;
  text-align: center;
}

.project-image-phone-2 {
  flex: 1 1 45%;
  max-width: 30%;
  border-radius: 7px;
  padding: 0.5rem;
  box-shadow: 0 0 4px green, 0 0 4px green, 0 0 4px green;
  text-align: center;
}

.project-image-web-2 img,
.project-image-phone-2 img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* SECTION 4 */
.section4 {
  display: flex;
  height: 100vh;
}

.left4 {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.contact-information { font-size: 1.1rem; width: 90%; text-align: center; }

.contact-information h3 {
  display: inline-block;
  font-family: 'Anta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(0deg, rgb(217, 0, 255)15%, rgb(0, 228, 80)35%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 0;
}

.contact-information p strong { 
  font-size: 1.4rem;
  font-family: 'anta', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    background: linear-gradient(0deg, rgb(217, 0, 255)20%, rgb(0, 228, 80)35%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-information a { color: #fff;}
.contact-information a:hover { 
    color: green;
  }

.right4 {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.section4-text {
  width: 90%;
  font-family: "Anta", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 3rem;
  background: linear-gradient(to left, rgb(217, 0, 255), rgb(0, 228, 80));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.section4-text p { margin: 0; }

.down-arrow {
  display: inline-block;
  font-family: "Anta", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 4rem;
  cursor: pointer;
  width: fit-content;
  transition: 0.3s;
  margin-top: 0;
}

/*.down-arrow:hover { color: green; }*/

/* SECTION 5 */
.section5 {
  display: flex;
  height: 100vh;
}

.left5 {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

.thanks {
  width: 80%;
  display: flex;
  justify-content: center;
}

.thanks h5 {
  font-family: "Anta", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2rem;
  font-weight: 900;
  background: linear-gradient(to right, rgb(217, 0, 255), rgb(0, 228, 80));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-align: center;
}

.right5 {
  display: flex;
  width: 50%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

* { box-sizing: border-box; }

/* ===== FORMULÄR ===== */
.form {
  max-width: 400px;
  margin: 0 auto;
  padding: 0.5rem 1.5rem 1.5rem;
  border: 1px solid green;
  border-radius: 10px;
  box-shadow: 0 0 8px green;
  background: #000;
  color: #dadada;
  font-family: "Anta", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.form label {
  display: block;
  margin: 1rem auto 0.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
}

.form input,
.form textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid green;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  transition: 0.3s;
}

.form input:focus,
.form textarea:focus {
  outline: none;
  border-color: #00ff88;
  box-shadow: 0 0 6px #00ff88;
}

.form textarea {
  min-height: 4rem;
  resize: vertical;
}

.form button {
  margin-top: 1.5rem;
  width: 100%;
  padding: 1rem;
  background: green;
  border: none;
  border-radius: 6px;
  color: #000;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.form button:hover {
  background: #00ff88;
  box-shadow: 0 0 10px #00ff88;
}

.spacer { height: 50px; }
.spacer2 { height: 100px; }

/* Footer */
footer {
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.footer-text { text-align: center; margin: 0 auto; }
.footer-signature { margin-left: 6px; color: #ffdb0f; }

/* Hamburgerknapp */
.burger-btn {
  display: none;
  font-size: 2rem;
  color: green;
  background: none;
  border: none;
  border-radius: 15px;
  cursor: pointer;
  z-index: 20;
}

/* Mobilmeny */
.mobile-menu {
  display: none;
  flex-direction: column;
  background: #000;
  position: absolute;
  top: 4rem;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  gap: 1rem;
  box-shadow: 0 0 8px green;
  border-radius: 10px;
  list-style: none;
}

.mobile-menu li { text-align: center; }

.mobile-menu li a {
  color: #dadada;
  font-size: 1.5rem;
  text-decoration: none;
}

.mobile-menu li a:hover { color: green; }

/* Toggle-klass */
.mobile-menu.show { display: flex; }

/* Media queries */
@media screen and (max-width: 1200px) {
  .empty { display: none; }
}

@media screen and (max-width: 1010px) {
  .navigationmenu { font-size: 1.2rem; gap: 1rem; justify-content: space-between; }
  .spacer2 { display: none; }
  header { height: 2rem; }

  .heading1 {
    margin-top: 14rem;
    font-size: 3rem;
  }
  
  .left1 {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /* .right1 { margin-top: 6rem;} */

  .lorem {
    display: none;
  }

  .section1 {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    gap: 3rem;
  }

  .section2,
  .section3,
  .section3-2,
  .section4,
  .section5 {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    gap: 1rem;
  }

  .section4,
  .section5 { gap: 5rem; }

  .section5 { flex-direction: column-reverse;}

  .section4-text { font-size: 2.5rem; }

  .section3,
  .section3-2 {
    flex-direction: column-reverse;
    gap: 2rem;
    height: auto;
  }

  .left1, .right1,
  .left2, .right2,
  .left3, .right3,
  .left3-2, .right3-2,
  .left4, .right4,
  .left5, .right5 {
    flex: 0 0 100%;
    width: 100%;
  }

  .spacer { height: 150px; }
}

@media screen and (max-width: 780px) {

  section {
    padding: 0;
  }

  head {
    margin: 0;
    padding: 0;
  }

  .heading1 {
    font-weight: 300;
  }

  .huge2 {
    font-size:1.3rem;
  }

  .burger-btn {
    position: fixed;
    top: -0.3rem;
    right: 2px; /* perfekt för desktop & Android */
    font-size: 2.5rem;
    display: block;
    border: none;
    color: #00ff88;
    cursor: pointer;
    text-shadow: 
      0 0 5px #00ff88,
      0 0 10px #00ff88,
      0 0 20px #00ff88,
      0 0 40px #00ff88;
    transition: 0.3s ease-in-out;
  }

  /* Bara för iPhone / iOS Safari */
  @supports (-webkit-touch-callout: none) {
    .burger-btn {
      right: -25px !important; 
    }
  }

  .burger-btn:hover {
    color: #fff;
    text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88, 0 0 30px #00ff88, 0 0 60px #00ff88;
  }

  .mobile-menu {
    font-family: "Anta", "Tourney", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 600;
  }

  .navigationmenu { display: none; }

  header {
    width: 100%;
    top: 0;
    right: 0;
    background: none;
    box-shadow: none;
    justify-content: flex-end;
    align-items: flex-end;
  }
}

@media screen and (max-width: 500px) {
  .section2,
  .section3,
  .section3-2 { gap: 1rem; }

  .spacer { height: 150px; }

  .heading1 { font-size: 2.5rem; }

  .form { width: 85%; }

  .section4-text { font-size: 2.4rem; }

.contact-information h3 { font-size: 2.5rem; }

  .contact-information strong { display: block; margin-bottom: 4px; margin-top: 15px; font-size: 1.4rem; }
}

@media screen and (max-width: 360px) {
  .heading1 { font-size: 2rem; }
}