@import url("nav.css");
@import url("ball.css");
@import url("landing.css");
@import url("swiper.css");
@import url("3D_ball.css");
@import url("contact.css");

*, ::after, ::before{
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    font-weight: medium;
    
    scroll-behavior: smooth;
    user-select: none;
}


body{
    background-color: #121120;
    color: #FFFFFF;
    position: relative;
    overflow-x: hidden;
    width: 100vw;
}

body::-webkit-scrollbar {
  display: none;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.v-sep{
  width: 60%;
  height: 1px;
  background-color: rgba(209, 209, 209, 0.2);
  margin: 15px 0;
  
  margin-left: 20%;
}

#ID{
  width: 100vw;
}

.tmp-div{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width : 100vw;
  margin-bottom: 50px;
}


.title{
  font-size: 50px;
  text-align: left;
  width: 70vw;
}

#copyright{
  width: calc(100vw - 80px);
}

.intro{
  display: flex; 
  width: 80%; 
  flex-direction: column;
}

.intro p{
  padding: 10px;
  line-height: 1.5em;
  font-weight: 200;
  font-size: min(1.2em, 1.5vw);
}

.intro-content{
  display: flex;
  gap: 40px
}

.intro-content img{
  width: 16vw;
  height: auto;
  object-fit: contain;
}
.stack-title{
  font-weight: 500!important;
}


#contact-form_min{
  display: none!important;
}

@media (max-width: 1000px) and (min-height: 600px){
  #contact-form_min{
    display: flex!important;
    width: 100%!important;
  }

  .contact-left ul {
    gap: 0 10px!important;
  }

  .contact-left ul li a{
    font-size: min(20px, 4vw)!important;
  }

  #contact-form{
    display: none!important;
  }

  #pre-content{
    width: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
  }

  .intro-content{
    align-items: center;
    flex-direction: column-reverse;
  }

  .intro{
    width: 100%;
  }

  .intro p{
    font-size: 1.2em;
  }

  
 .intro-content img{
  width: 30vw;
  height: auto;
  object-fit: contain;
 }
}