body {
  background-image: url("Assets/Images/star_sky_bg.jpg");
  background-size: cover;
  background-repeat: repeat-y;
  background-attachment:scroll;
  font-family: Asul;
  overflow-x: clip;
  width: 100%;
  height: 100%;
  max-width:100%;
  margin:0;
  display:block;
  word-wrap:normal;
  text-wrap: pretty;
  cursor: url("Assets/cursor_default_28x28.png"), default;
}
html{
  cursor: url("Assets/cursor_default_28x28.png"), default;
  overflow-x:clip;
  width: 100%;
  height: 100%;
  overflow-x: clip;
  display: block;
  word-wrap:normal;
  text-wrap: pretty;
}
.header {
  font-family: Nervous;
  font-size: min(110px, 8vw);
  letter-spacing: 20px;
  margin-top: 60px;
  background: linear-gradient(#C5162E, #C12B9C);
  -webkit-background-clip: text;
  background-clip: text;
  position: sticky;
  text-align: center;
  -webkit-text-fill-color: transparent;
  z-index: 2;
}
.project-box-wrapper {
  position: absolute;
  left:50%;
}

.box-innerimage {
  width: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.96;
}

.box-content {
  position: absolute;
  top: 50%;
  left: 51%;
  transform: translate(-50%, -50%);
  width: 65%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  color: #d966d6;
}

.project-title {
  font-family: DellaRespira;
  letter-spacing: 0.17em;
  font-size: 3rem;
  margin: 0;
  color: #ED4ADA;
}

/*also responsible for box text*/
.box-body {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  color: #E3A5BF;
  font-size: 1.6rem;
  line-height: 1.6;
}

.project-image-thumb {
  width: 45%;
  flex-shrink: 0;
  transform:scale(1.4);
  margin-top:-25px;
}

.box-links {
  display: flex;
  justify-content: space-around;
  padding-top: 0.5rem;
  font-size:1.5vw;
}

.box-links a {
  color: #b06ab0;
  text-decoration: underline;
}

@media (max-width: 1400px) {
  .project-image-thumb{
    transform: scale(1.4);
  }
  .box-body{
    font-size:1.7vw;
    transform:scale(1.2);
  }
  .project-box-wrapper{
    transform: scale(1.4);
  }
  .project-title{
    font-size: 3vw;
  }
  .box-links{
    font-size:2.5vw;
  }
  .box-innerimage{
    transform:scale(1.2);
  }
}

.footer{
  position:absolute;
  display: block;
  height:100%;
  width: 100%;
  min-height:560px;
  overflow-y:clip;
}

.footerText{
  position:absolute;
  width:100px;
  padding-bottom:10px;
  color:white;
  padding-left: 20px;
  font-family:'DellaRespira';
  font-size:32px;
  top:510px;
  height:100%;
}

.navigation {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 32px;
  color: #9C4AED;
  list-style: none;
  text-decoration: underline;
  display:flex;
  justify-content:center;
  gap: 4vw;
  padding: 0;
  margin-top: -50px;
  text-align:center;
  position: sticky;
  letter-spacing:0.32em;
  overflow-x:hidden;
  z-index:2;
}

.navigation a {
  color: #9c4aed;
}
.navigation a:hover {
  color:#ED4ADA;
}

.img-layer {
  position: absolute;
  display:block;
  z-index:1;
  top: 0;
  width: 100%;
  overflow-x:clip;
}

.def-image {
  position: absolute;
  pointer-events: none;
  transform-origin:center center;
  display: block;
}

.box-image {
  position: absolute;
  pointer-events: none;
  transform-origin:center center;
  display: block;
  transform: scale(1);
}

.contact-listitem {
  position: absolute;
  z-index: 3;
  color: #d946b8;
  font-family :DellaRespira;
  letter-spacing: 0.1em;
  font-size: 1.85rem;
}

.about-me-text {
  color:#9C4AED;
  font-size:2.1rem;
  font-family: 'DellaRespira';
  left:50%; 
  transform:translate(-50%);
  z-index: 4;
  position:absolute;
  width:90%;
  text-align: center;
}

.wide-text-large-display{
  font-size:inherit;
}

@media (min-width: 769px){
  .wide-text-large-display{
    font-size:2rem;
  }
}

.contacts-grid {
  display: contents;
}

#scroll-dot-container {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.scroll-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  display: block;
  filter: drop-shadow(0px 0px 5px #ffffff);
}

.scroll-dot.active {
  background: #9C4AED;
  border-color: #9C4AED;
  transform: scale(1.4);
  filter: drop-shadow(0px 5px 13px #ED4ADA);
}

.scroll-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

@font-face {
  font-family: Asul; 
  src: url("Assets/Fonts/Asul-Regular.ttf");
}

@font-face {
  font-family: Nervous; 
  src: url("Assets/Fonts/Nervous.ttf");
  font-display: swap;
  font-weight: 100 800; /*etin tätä pikku rivii pitkin nettiä monia tunteja. kyseisin nervous-fontin geometriaa ei ole suunniteltu nettikäyttöön, niin fontti paskoo housuun ilman tätä riviä :DD*/
}

@font-face {
  font-family: Moonscape; 
  src: url("Assets/Fonts/Moonscape.otf");
}

@font-face {
  font-family: DellaRespira; 
  src: url("Assets/Fonts/DellaRespira-Regular.ttf");
}