@font-face {
    font-family: InterRegular;
    src: url(/build/fonts/Inter_18pt-Regular.37dcabff.ttf);
}

@font-face {
    font-family: InterMeduim;
    src: url(/build/fonts/Inter_18pt-Medium.8540f35b.ttf);
}

@font-face {
    font-family: InterBold;
    src: url(/build/fonts/Inter_18pt-Bold.7ef6f6d6.ttf);
}

@font-face {
    font-family: InterSemiBold;
    src: url(/build/fonts/Inter_18pt-SemiBold.e5532d99.ttf);
}

@font-face {
    font-family: InterLight;
    src: url(/build/fonts/Inter_18pt-Light.dfaec8b8.ttf);
}

@font-face {
    font-family: RubikBold;
    src: url(/build/fonts/Rubik-Bold.627d0e53.ttf);
}

@font-face {
    font-family: RubikMediun;
    src: url(/build/fonts/Rubik-Medium.e785acbf.ttf);
}

@font-face {
    font-family: RubikSemiBold;
    src: url(/build/fonts/Rubik-SemiBold.742cf1e6.ttf);
}

@font-face {
    font-family: RubikLight;
    src: url(/build/fonts/Rubik-Light.86699cab.ttf);
}

@font-face {
    font-family: RubikRegular;
    src: url(/build/fonts/Rubik-Regular.46df2880.ttf);
}


body{
  margin: 0px;
  padding: 0px;
  background-color: #F1F1F1;

  overflow-x: hidden;
  color: var(--c-text);
}

.background{
    height: 90%;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 背景蓝色圆形 1（位置不变，只把 absolute 改成 fixed） */
body::before{
  content:"";
  position: fixed;            /* ← 改为 fixed */
  top: 46%;
  right: 10%;
  transform: translateY(-50%);
  width: 32vw;
  height: 32vw;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(7, 48, 167, 0.7) 0%,
    rgba(58, 123, 213, 0) 80%
  );
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
}

/* 背景蓝色圆形 2（位置不变，只把 absolute 改成 fixed） */
body::after{
  content:"";
  position: fixed;            /* ← 改为 fixed */
  top: 80%;
  right: 76%;
  transform: translateY(-50%);
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(7, 48, 167, 0.7) 0%,
    rgba(58, 123, 213, 0) 80%
  );
  filter: blur(100px);
  z-index: -1;
  pointer-events: none;
}


.CentralArea{
    width: 480px;
    height: 500px;
    margin-top: 8vh;
    margin-bottom: 20vh;
    display: flex;
    flex-direction: column;
    align-items: center;

    @media (max-width: 1190px) {

    }
    @media (max-width: 750px) {
        width: 90vw;

    }
}

.Title{
  font-family: InterSemiBold, Inter, system-ui;
  font-size: 34px;
  text-align: center;
  margin-top: 8px;
      @media (max-width: 1190px) {
        width: 80vw;
        font-size: 32px;
        margin-top: 1vh;
        height: 80px;
    }
    @media (max-width: 750px) {
        width: 90vw;
        margin-top: 0vh;
        font-size: 32px;
        height: 30px;

    }
}


.Email{
    font-size: 1rem;
    margin-top: 40px;
    height: 48px;
    width: 90%;
          /*毛玻璃*/
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);   /* iOS / 旧 Chrome */
    background-color: rgba(255, 255, 255, 0.864); /* 一点乳白底，数值可调 */
    border-radius: 5px;
    filter: drop-shadow(0px 0px 4px #dbdbdb);

}

#emailInput{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    padding-left: 10px;
    font-size: 1rem;
}

#passInput{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    padding-left: 10px;
    font-size: 1rem;

}

.Password{
    margin-top: 20px;
    height: 48px;
    width: 90%;
          /*毛玻璃*/
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);   /* iOS / 旧 Chrome */
    background-color: rgb(255, 255, 255,0.864); /* 一点乳白底，数值可调 */

    border-radius: 5px;
    filter: drop-shadow(0px 0px 4px #dbdbdb);
}
.forGotPasswordBox{
    display: flex;
    align-items: start;
    width: 90%;
}
.forGotPassword{
    margin-top: 20px;
    font-family: InterRegular;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
     text-decoration: underline;
}

.SignIn{
    margin-top: 50px;

    /* 这里高度相比上面的两个输入框厚了2px，这是因为黑色视觉上更细，需要视觉补偿 */
    height: 50px;
    width: 90%;
          /*毛玻璃*/
    background-color: rgb(0, 0, 0); /* 一点乳白底，数值可调 */

    border-radius: 26px;
    filter: drop-shadow(0px 0px 4px #dbdbdb);

    display: flex;
    font-family: InterRegular;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
}

.CreateAccountBox{
    display: flex;
    justify-content: center;
    width: 90%;
}
.CreateAccount{
    margin-top: 20px;
    font-family: InterRegular;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    text-decoration: underline;
}

.largeSloganSlideIn{
    opacity: 0;
    transform: translateY(16px);
    transition: ease-out 500ms;

}

.largeSloganSlideIn.active{
    opacity: 1;
    transform: translateY(0);
    transition: ease-out 500ms;
  
}



*{
    border: none !important;
}