/* MEDIA 460px STARTS ================== MEDIA 460px STARTS */

@media (min-width: 460px) {
}

/* DESKTOP MEDIA 768px STARTS ========= DESKTOP MEDIA 768 STARTS*/
@media (min-width: 768px) {
  .window-space {
    background-size: 520%;
  }
  .gpu {
    left: 2%;
    top: 1%;
  }

  .gpu img {
    width: 16rem;
  }

  .gpu span {
    top: 57%;
    left: 49%;
    transform: rotate(-10deg);
    letter-spacing: 0.3rem;
  }

  .ram {
    right: 5%;
    top: 2%;
  }

  .ram img {
    width: 11rem;
  }

  .ram span {
    top: 41%;
    left: 26%;
    font-size: 0.6rem;
    letter-spacing: 0.22rem;
    transform: rotate(10deg);
  }

  .nvme {
    left: 2%;
    top: 35%;
  }

  .nvme img {
    width: 13rem;
  }

  .nvme span {
    top: 37%;
    left: 28%;

    letter-spacing: 0.2rem;
  }

  .cooling {
    right: 9%;
    top: 32%;
  }

  .cooling img {
    width: 16rem;
  }

  .cooling span {
    right: 26.5%;
    top: 58%;
    width: 15ch;

    font-size: 0.4rem;
    letter-spacing: 0.2rem;
  }

  .power {
    left: 1%;
    bottom: -2%;
  }

  .power img {
    width: 14rem;
  }

  .power span {
    left: 20%;
    top: 57%;
    font-size: 0.6rem;
    transform: rotate(22.5deg) skewX(20deg);
    letter-spacing: 0.2rem;
  }

  .cpu {
    right: 2%;
    bottom: 10%;
  }

  .cpu img {
    width: 10rem;
  }

  .cpu span {
    left: 31.5%;
    top: 35%;
    font-size: 0.6rem;
    letter-spacing: 0.2rem;
    transform: rotate(9.5deg);
  }
}

/* DESKTOP MEDIA 768px ENDS========= DESKTOP MEDIA 768 ENDS*/

/* DESKTOP MEDIA 1024px STARTS ========= DESKTOP MEDIA 1024px STARTS*/

/* Om skärmen är minst 1024px bred OCH enheten stödjer hover, då ska .component-content 
förstoras och ljusas upp när man hovrar över .component. */
@media (min-width: 1024px) and (hover: hover) {
  .footer-links a:hover img {
    filter: brightness(1.25) contrast(1.15)
      drop-shadow(0 0 2px rgba(255, 255, 255, 1))
      drop-shadow(0 0 6px rgba(0, 234, 255, 0.9))
      drop-shadow(0 0 8px rgba(0, 234, 255, 0.45));
    border-radius: 6px;
    transform: translateY(-3px) scale(1.25);
  }
  .navbar button:hover {
    border-color: rgba(255, 255, 255, 0.7);

    border-top-color: rgba(255, 255, 255, 0.95);

    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    box-shadow:
      0 0 10px rgba(0, 234, 255, 0.35),
      0 0 25px rgba(0, 234, 255, 0.15);
    transform: translateY(-3px) scale(1.08);

    text-shadow:
      0 0 5px rgba(255, 255, 255, 0.5),
      0 0 10px rgba(0, 234, 255, 0.4);
  }

  .component:hover .component-content {
    transform: scale(1.1);
    filter: brightness(1.15);
  }
}

@media (min-width: 1024px) {
  .hero-page {
    width: min(80%, 1300px);
    height: 66vh;
  }

  .gpu {
    left: 2%;
    top: -1%;
  }

  .ram {
    right: 5%;
    top: 1%;
  }

  .power {
    bottom: -5%;
  }

  .cpu {
    right: 6%;
    top: 63%;
  }

  .cpu img {
    width: 9rem;
  }

  .cpu span {
    left: 31.5%;
    top: 35%;
    font-size: 0.5rem;
    letter-spacing: 0.2rem;
    transform: rotate(9.5deg);
  }
}

/* DESKTOP MEDIA 1024px ENDS ========= DESKTOP MEDIA 1024px ENDS*/

@media (min-width: 1440px) {
  .hero-page {
    width: min(90%, 1440px);
    height: 71vh;
  }

  .bg {
    object-fit: cover;
    object-position: center 70%;
  }
  .window-space {
    background-size: 300%;
  }

  .gpu img {
    width: 18rem;
  }

  .gpu span {
    top: 58%;
    left: 49%;
    transform: rotate(-10deg);
    letter-spacing: 0.3rem;
  }

  .ram {
    right: 5%;
    top: 1%;
  }

  .ram img {
    width: 13rem;
  }

  .ram span {
    top: 41%;
    left: 26%;
    font-size: 0.75rem;
    letter-spacing: 0.22rem;
    transform: rotate(10deg);
  }

  .nvme img {
    width: 15rem;
  }

  .power {
    left: 2%;
    bottom: -1%;
  }

  .power img {
    width: 16rem;
  }

  .power span {
    left: 20%;
    top: 57%;
    font-size: 0.75rem;
    transform: rotate(22.5deg) skewX(20deg);
    letter-spacing: 0.2rem;
  }

  .cpu {
    right: 6%;
    top: 63%;
  }

  .cpu img {
    width: 10rem;
  }

  .cpu span {
    left: 31.5%;
    top: 35%;
    font-size: 0.5rem;
  }
}

/* DESKTOP BIG SCREEN MEDIA 1920px STARTS ========= DESKTOP BIG SCREEN MEDIA 1920px STARTS*/
@media (min-width: 1920px) {
  .hero-page {
    width: min(90%, 1440px);
    height: 68vh;
  }

  .nav-links {
    display: flex;
    gap: 1.5rem;
  }

  .footer-links img {
    margin-top: 1rem;
    width: 1.5rem;
  }

  .gpu {
    left: 2%;
    top: 1%;
  }

  .gpu img {
    width: 16rem;
  }

  .gpu span {
    top: 57%;
    left: 49%;
    transform: rotate(-10deg);
    letter-spacing: 0.3rem;
  }

  .ram {
    right: 5%;
    top: 2%;
  }

  .ram img {
    width: 12rem;
  }

  .ram span {
    top: 41%;
    left: 26%;

    letter-spacing: 0.22rem;
  }

  .nvme {
    left: 2%;
    top: 35%;
  }

  .nvme img {
    width: 13rem;
  }

  .nvme span {
    top: 37%;
    left: 28%;

    letter-spacing: 0.2rem;
  }

  .cooling {
    right: 11%;
    top: 32%;
  }

  .cooling img {
    width: 16rem;
  }

  .cooling span {
    right: 26.5%;
    top: 58%;
    width: 15ch;

    font-size: 0.41rem;
    letter-spacing: 0.2rem;
  }

  .power {
    left: 2%;
    bottom: -4%;
  }

  .power img {
    width: 13rem;
  }

  .power span {
    left: 20%;
    top: 57%;
    font-size: 0.6rem;
    letter-spacing: 0.2rem;
  }

  .cpu {
    right: 6%;
    top: 67%;
  }

  .cpu img {
    width: 10rem;
  }

  .cpu span {
    left: 31.5%;
    top: 35%;
    font-size: 0.6rem;
    letter-spacing: 0.2rem;
    transform: rotate(9.5deg);
  }
}

@media (min-width: 2560px) {
  .hero-page {
    width: min(90%, 1440px);
    height: 72vh;
  }

  /* Flyttar fokus i bakgrundsbilden något nedåt på stora skärmar.
   object-fit: cover beskär bilden när hero-rutan blir bredare.
   60% visar mer av datorn och golvet utan att kapa bort för mycket av taket. */
  .bg {
    object-fit: cover;
    object-position: center 60%;
  }
  .window-space {
    background-size: 400%;
    background-position: top;

    animation: space 1200s linear infinite;
  }

  .navbar a {
    font-size: 0.6rem;
    padding: 0.5rem 1rem;
  }

  .nav-links {
    display: flex;
    gap: 1.5rem;
  }

  .footer-links img {
    margin-top: 1rem;
    width: 1.5rem;
  }

  .gpu {
    left: 2%;
    top: 1%;
  }

  .gpu img {
    width: 18rem;
  }

  .gpu span {
    top: 58%;
    left: 49%;
    transform: rotate(-10deg);
    letter-spacing: 0.3rem;
  }

  .ram {
    right: 5%;
    top: 2%;
  }

  .ram img {
    width: 13rem;
  }

  .ram span {
    top: 41%;
    left: 26%;
    letter-spacing: 0.22rem;
  }

  .nvme {
    left: 2%;
    top: 35%;
  }

  .nvme img {
    width: 15rem;
  }

  .nvme span {
    top: 39%;
    left: 28%;
    letter-spacing: 0.2rem;
  }

  .cooling {
    right: 11%;
    top: 32%;
  }

  .cooling img {
    width: 18rem;
  }

  .cooling span {
    right: 26.5%;
    top: 58%;
    width: 15ch;

    font-size: 0.45rem;
    letter-spacing: 0.2rem;
  }

  .power {
    left: 1%;
    bottom: 4%;
  }

  .power img {
    width: 16rem;
  }

  .power span {
    left: 20%;
    top: 57%;
    font-size: 0.7rem;
    letter-spacing: 0.2rem;
  }

  .cpu {
    right: 6%;
    top: 67%;
  }

  .cpu img {
    width: 11rem;
  }

  .cpu span {
    left: 32%;
    top: 35%;
    font-size: 0.65rem;
    letter-spacing: 0.2rem;
    transform: rotate(9.5deg);
  }
}