/* MUUTTUJAT */
#banner {
  /* text */
  --text-size-desktop: 32px;
  --text-size-desktop-lg: 36px;
  --text-size-mobie: 30px;
  --text-size-desktop-large: 36px;
  --line-height: 38px;
  --line-height-large: 40px;
  --text-area-width-desktop: 800px;
  --text-area-width-mobile: 600px;
  --text-shadow: 2px 2px rgba(0, 0, 0, 0.743);

  /* nappi */
  --cta-hover-brightness: brightness(1.1);
  --cta-pos-bottom-desktop: 10%;
  --cta-pos-bottom-desktop-lg: 20%;
  --cta-pos-bottom-tab: 0%;
  --cta-pos-bottom-mobile: 15%;
  --cta-pos-bottom-overwide: 6%;
  --cta-pos-bottom-overwide-crazy: 1%;

  /* aalto-logo, sijainti */
  --logo-pos-right: 5%;
  --logo-pos-bottom: 5%;
  --logo-size: 120px;
}

.cta-elements {
  display: flex;
  justify-content: center;
}
#cta {
  background: transparent;
  border: none;
  bottom: var(--cta-pos-bottom-desktop);
  border: none;
  box-shadow: none;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(40px);
}

#cta:hover {
  filter: var(--cta-hover-brightness);
  cursor: pointer;
}

/*napin teksti*/
.cta-text {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

body {
  margin: 0;
  left: 0;
  overflow-x: hidden;
}

.stop-scrolling {
  overflow: hidden !important;
}

#banner {
  background-color: black;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  transition: all 0.3s;
  z-index: 1;
}
#banner:after {
  content: "";
  position: absolute;
  width: 100%;
  bottom: 1px;
  z-index: -1;
  transform: scale(0.9);
  box-shadow: 0px 0px 8px 2px #000000;
}
.banner-holder {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

.banner-logo {
  position: absolute;
  transform: translate(-50%, -50%) translateZ(50px);
  top: 15%;
  left: 50%;
  pointer-events: none;
}

/* img area */
.img-elements {
  height: 100%;
}

#main-image {
  height: 100%;
  pointer-events: none;
}

#img-bg {
  object-fit: contain;
  transform-style: preserve-3d;
  transform: perspective(800px);
  transition: -webkit-transform 0.2s ease-in-out;
  height: 100%;
  margin-top: 0%;
}

#aalto-logo {
  pointer-events: none;
  position: absolute;
  right: var(--logo-pos-right);
  bottom: var(--logo-pos-bottom);
  height: var(--logo-size);
  object-fit: contain;
}

#intro-text {
  position: absolute;
  color: white;
  font-family: "Prompt", sans-serif;
  text-transform: uppercase;
  font-size: var(--text-size-desktop);
  line-height: var(--line-height);
  text-align: center;
  width: var(--text-area-width-desktop);
  top: 40%;
  left: 50%;
  -webkit-text-stroke: 1px black;
  pointer-events: none;
}

#intro-text-main {
  transform: translate(-50%, -50%) translateZ(10px);
  text-shadow: var(--text-shadow);
}

@media only screen and (min-width: 2000px) {
  #intro-text {
    font-size: var(--text-size-desktop-large);
    line-height: var(--line-height-large);
  }

  #cta {
    bottom: var(--cta-pos-bottom-desktop-lg);
  }
}

@media only screen and (min-width: 1500px) {
  #intro-text {
    font-size: var(--text-size-desktop-lg);
    line-height: var(--text-size-desktop-large);
  }
}

@media only screen and (max-width: 1000px) {
  #intro-text {
    width: var(--text-area-width-mobile);
    font-size: var(--text-size-mobie);
  }

  #intro-text-main {
    padding: 0 100px;
  }
  #cta {
    bottom: var(--cta-pos-bottom-tab);
  }
  .banner-logo {
    top: 30%;
  }
}

@media only screen and (max-width: 500px) {
  #intro-text {
    font-size: var(--text-size-mobie);
  }
  #cta {
    bottom: var(--cta-pos-bottom-mobile);
  }
}
@media (min-aspect-ratio: 17/10) {
  .banner-holder {
    width: 100%;
    height: none;
  }
  .img-elements {
    width: 100%;
    height: none;
  }
  #main-image {
    width: 100%;
    height: none;
  }

  #img-bg {
    width: 100%;
    height: auto;
    transition: transform 0.8s ease-in-out;
  }

  #cta {
    bottom: var(--cta-pos-bottom-overwide);
  }
}

@media (min-aspect-ratio: 25/10) {
  #cta {
    bottom: var(--cta-pos-bottom-overwide-crazy);
  }
}