@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}

body {
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  scroll-behavior: smooth;
}
body {
  font-family: "Asap", sans-serif;
  position: relative;
  width: 100%;
  max-width: 100vw;
  height: auto;
  min-height: 100vh;
  text-align: center;
  overflow-x: hidden;
  color:white;
}


@font-face {
    font-family: 'elixia';
    src: url('https://files.jcink.net/uploads/summertests/fonts/ELIXIA.ttf');
  }
  
  html {
    scroll-behavior: smooth;
  }
  
  body {
    padding: 0px;
    margin: 0px;
    /* background: var(--bg3); */
    background: var(--bg1);
    background-attachment: fixed;
    background-size: cover;
    background-position: center 80%;
    
    /*FONTS*/
    --display: 'elixia';
    --display-large: 30vh/1 var(--display);
    --display-large-sp: 40px;
    --mono: 'aglet-mono';
    --mono-body: .8125rem/1.25 var(--mono);
    --mono-body-sp: 1.5px;
    
    /*COLORS*/
    --clear: rgba(255, 255, 255, 0);
    --white: 245, 244, 250;
    --black: 18, 6, 19;
    --pink: 190, 41, 105;
    --light-pink: 251, 152, 205;
    --purple: 227, 0, 253;
    --light-purple: 136, 124, 148;
    --eggplant: 36, 13, 39;
    --blue: 0, 115, 198;
    --dark-blue: 27, 61, 117;
    
    /*GRADIENTS*/
    --lr-eggplant70: linear-gradient(to bottom, 
      rgba(var(--eggplant), .7), 
      rgba(var(--eggplant), .7));
    --lr-eggplant90: linear-gradient(to bottom, 
      rgba(var(--eggplant), .9), 
      rgba(var(--eggplant), .9));
    --lr-black85: linear-gradient(to bottom, 
      rgba(var(--black), .85), 
      rgba(var(--black), .85));
      --lr-black35: linear-gradient(to bottom, 
      rgba(var(--black), .35), 
      rgba(var(--black), .35));
    --lr-pink-blue: linear-gradient(to right, 
      rgba(var(--pink), 1), 
      rgba(var(--blue), 1));
    --lr-clear-pink: linear-gradient(to right, 
      var(--clear), 
      rgba(var(--pink), 1),
      var(--clear));
    --rg-pink-clear: radial-gradient(circle, 
      rgba(var(--pink), 1),
      var(--clear) 90%);
    
    /*IMAGES*/
    --bg1: url('https://images.unsplash.com/photo-1573767291321-c0af2eaf5266');
    --bg2: url('https://images.unsplash.com/photo-1519608487953-e999c86e7455');
    --bg3: url('https://images.unsplash.com/photo-1561344640-2453889cde5b'); /* center 80% */
    --bg4: url('https://images.unsplash.com/photo-1571331154805-c2a013108395');
    --bg5: url('https://images.unsplash.com/photo-1531931477284-7e16215c9540'); /* nice */
    --bg6: url('https://cdn.leonardo.ai/users/a64be33f-3033-4c7d-a3b1-825c42025211/generations/78ecdb35-d307-4f04-be5c-87280c22f311/Leonardo_Diffusion_XL_Night_city_panorama_with_neon_glow_on_pu_1.jpg');
    --bg7: url('https://images.hdqwalls.com/wallpapers/a-space-view-of-tomorrow-j4.jpg');
    --texture: url('https://www.transparenttextures.com/patterns/concrete-wall-2.png');
    --texture1: url('https://www.nasa.gov/wp-content/uploads/2023/03/stscihp1721af5290x5290.png');
    --texture3: url('https://images.hdqwalls.com/wallpapers/walking-in-milky-way-lake-5k-1b.jpg');
    --texture2: url('https://www.transparenttextures.com/patterns/black-paper.png');
    
    /*OTHER*/
    --site-name: 'Site Name';
  }
  
  *, *::before, *::after { box-sizing: border-box; }
  
  a { text-decoration: none; }
  
  
  
  #header1 {
    width: 100vw;
    height: 90vh;
    background: var(--lr-black85), var(--texture1);
    opacity:1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
  }
  #header1 .tech {
    margin-left: 35px;
    font: var(--display-large);
    /* font-weight: 125 950;
    font-stretch: 75% 125%;
    font-style: oblique 0deg 12deg; */
    font-weight:300;
    letter-spacing: var(--display-large-sp);
    text-transform: uppercase;
    color: var(--clear);
    background: var(--lr-pink-blue);
    -webkit-background-clip: text;

    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    
    position: relative;
    z-index: 1;
  }
  
  #header2 {
    margin-top: 85vh;
    height: 15vh;
    width: 100vw;
    padding: 0 1rem;
    background: var(--lr-eggplant90), var(--bg1);
    background-attachment: fixed;
    background-size: cover;
    background-position: center 80%;
    border-top: 5px solid rgb(var(--pink));
    font: var(--mono-body);
    letter-spacing: var(--mono-body-sp);
    text-transform: uppercase;
    color: rgba(var(--white), .6);
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: calc(50% - 7vw) 14vw calc(50% - 7vw);
    grid-template-rows: 15vh;
    grid-template-areas: 
      'blurb icon links';
  }
  #header2::before {
    content: '';
    position: absolute;
    top: -5vh;
    left: 42vw;
    width: 16vw;
    height: 5vh;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    background: rgb(var(--pink));
    border-top: 5px solid rgb(var(--pink));
  }
  #header2::after {
    content: '';
    position: absolute;
    top: calc(-5vh + 5px);
    left: calc(42vw + 5px);
    width: calc(16vw - 10px);
    height: calc(5vh - 3px);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    background: var(--lr-eggplant90), var(--bg1);
    background-attachment: fixed;
    background-size: cover;
    background-position: center 80%;
  }
  
  #header2 > div {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #header2 .blurb {
    grid-area: blurb;
    max-width: 65ch;
    overflow: auto;
    margin: 0 auto;
  }
  
  #header2 .icon {
    grid-area: icon;
    position: relative;
    z-index: 5;
    margin: 0 0 4vh 0;
    font-size: 3rem;
  }
  #header2 .icon a {
    color: var(--clear);
    background: var(--lr-pink-blue);
    -webkit-background-clip: text;
    background-clip: text;   /*background-clip: text;*/
  }
  
  @keyframes tabicon {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
  
  #header2 .links {
    grid-area: links;
    flex-flow: row wrap;
  }
  #header2 .links a {
    color: rgba(var(--white), .6);
    position: relative;
    margin: 0 10px 10px 10px;
  }
  #header2 .links a::before {
    content: '';
    position: absolute;
    bottom: -6px;
    left: -3px;
    width: calc(100% + 6px);
    height: 2px;
    background: rgb(var(--blue));
    opacity: .5;
    transition: .5s linear;
  }
  #header2 .links a::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: -6px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    background: var(--rg-pink-clear);
    transition: .5s linear;
  }
  #header2 .links a:hover::after {
    left: 95%;
    transition: .5s linear;
  }
  #header2 .links a:hover::before {
    opacity: 1;
    transition: .5s linear;
  }
  
  #wrapper {
    width: 100vw;
    padding: 0;
    background: var(--lr-eggplant90), var(--bg1);
    background-attachment: fixed;
    background-size: cover;
    background-position: center 80%;
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 3rem 1fr 3rem;
    grid-template-rows: 4rem auto;
    grid-template-areas:
      'user user user'
      'nav inner jump';
  }
  
  #wrapper .tri-left {
    grid-area: inner;
    width: calc(5vh + 2px);
    height: calc(5vh + 2px);
    margin: -2px 0 0 -1px;
    position: sticky;
    top: calc(4rem - 2px);
    clip-path: polygon(100% 0, 0% 100%, 0 0);
    z-index: 1000; 
    background: var(--lr-eggplant90), var(--bg1);
    background-attachment: fixed;
    background-size: cover;
    background-position: center 80%;
  }
  #wrapper .tri-right {
    grid-area: inner;
    width: calc(5vh + 2px);
    height: calc(5vh + 2px);
    margin: -2px -1px 0 0;
    position: sticky;
    top: calc(4rem - 2px);
    margin-left: auto;
    clip-path: polygon(100% 0, 0% 0, 100% 100%);
    z-index: 1000; 
    background: var(--lr-eggplant90), var(--bg1);
    background-attachment: fixed;
    background-size: cover;
    background-position: center 80%;
  }
  
  #wrapper #user-bar {
    grid-area: user;
    width: calc(100vw - 6rem);
    height: 4rem;
    margin: 0 auto;
    position: sticky; 
    top: 0;
    z-index: 1000; 
    background: var(--lr-eggplant90), var(--bg1);
    background-attachment: fixed;
    background-size: cover;
    background-position: center 80%;
    border-bottom: 2px solid rgb(var(--pink));
    font: var(--mono-body);
    letter-spacing: var(--mono-body-sp);
    text-transform: uppercase;
    color: rgba(var(--white), .6);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: 4rem;
    grid-template-areas: 'left name right';
    grid-column-gap: 2rem;
  }
  
  #wrapper #user-bar::before {
    content: '';
    width: 7vh;
    height: 7vh;
    position: absolute;
    bottom: calc(-3.5vh - 2px);
    left: calc(-3.5vh + 2px);
    background: var(--clear);
    border-right: 2px solid rgb(var(--pink));
    transform: rotate(45deg);
  }
  #wrapper #user-bar::after {
    content: '';
    width: 7vh;
    height: 7vh;
    position: absolute;
    bottom: calc(-3.5vh - 2px);
    right: calc(-3.5vh + 2px);
    background: var(--clear);
    border-bottom: 2px solid rgb(var(--pink));
    transform: rotate(45deg);
  }
  
  #wrapper #user-bar a {
    margin: 0 10px;
    color: rgba(var(--white), .6);
    font-size: .9rem;
  }
  #wrapper #user-bar i.new {
    color: rgb(var(--pink));
  }
  #wrapper #user-bar a.name {
    grid-area: name;
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font: 1.7rem/1 var(--display);
    word-spacing: 10px;
    color: var(--clear);
    background: var(--lr-pink-blue);
    -webkit-background-clip: text;
    background-clip: text;   /*background-clip: text;*/
  }
  
  #wrapper #user-bar .left {
    grid-area: left;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #wrapper #user-bar .right {
    grid-area: right;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  
  #wrapper #navigation {
    grid-area: nav;
    font: var(--mono-body);
    letter-spacing: var(--mono-body-sp);
    text-transform: uppercase;
    color: rgba(var(--white), .6);
    writing-mode: vertical-lr;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
  #wrapper #navigation .navigation {
    height: calc(100vh - 4rem);
    padding: 1rem 0;
    position: sticky;
    top: 4rem;
    transform: rotate(180deg);
  }
  #wrapper #navigation .navigation a {
    color: rgba(var(--white), .6);
  }
  #wrapper #navigation .navigation .sep {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    background: var(--rg-pink-clear);
  }
  
  #wrapper #jump {
    grid-area: jump;
    height: calc(100vh - 4rem);
    padding: 1rem 0;
    position: sticky;
    top: 4rem;
    font: var(--mono-body);
    letter-spacing: var(--mono-body-sp);
    text-transform: uppercase;
    color: rgba(var(--white), .6);
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
  }
  
  #wrapper #jump a {
    color: rgba(var(--white), .6);
    font-size: .9rem;
  }
  #wrapper #jump .sep {
    width: 8px;
    height: 8px;
    margin: 5px 0;
    border-radius: 100%;
    -webkit-border-radius: 100%;
    background: var(--rg-pink-clear);
  }
  
  #wrapper #innerwrapper {
    grid-area: inner;
    min-height: 300px;
    background: var(--lr-black35), var(--bg7);
    background-attachment: fixed;
    background-size: cover;
    background-position: center 80%;
    border-left: 2px solid rgb(var(--pink));
    border-right: 2px solid rgb(var(--pink));
    align-items: center; /* 确保 Canvas 居中 */
    overflow: hidden; /* 防止 Canvas 溢出 */
  }
  
  
  
  
  @media (max-width: 1200px) {
    #header2 .blurb,
    #header2 .links {
      max-width: 90vw;
    }
  }
  
  @media (max-width: 650px) {
    #header1 .tech {
      font-size: 20vh;
    }
    
    #header2 {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas:
        'blurb'
        'icon'
        'links';
    }
    
  }
  
  
  @media (max-width: 650px) {
    #header1 .tech {
      font-size: 15vh;
    }
    
    #header2 .icon {
      font-size: 2rem;
    }

    #header2 .blurb {
      font-size: 0.3rem;
    }
  
    #header2 .links {
      justify-content: center;
    }
  
    #header2 .links a {
      margin: 0 3px 3px 3px;
      font-size: 1vw;
    }

    #wrapper #user-bar a.name {
      font-size: 4vw;
      margin: 0 0px 1px 1px;
    }
  }

  .styled-text {
    color: white;
    text-align: center;
    font-size: 30px;
    /* font-family: 'KaiTi', '楷体', serif; */
    font-family: 'Xingkai SC', 'STXingkai', '行楷', 'KaiTi', '楷体', serif;
  }




h1 {
  padding: 1rem 1rem 0;
}
a {
  color: rgb(38, 220, 196);
}
#wrap {
  position: relative;
  margin: 0 auto;
}
#c {
  position: absolute;
  top: 0;
  left: -50px;
  width: 100%;
  height: 100%;
  user-select: none;
}
#gallery {
  --size-w: 200px;
  --size-h: calc(var(--size-w) * 1.25);

  position: relative;
  width: min(100%, 1000px);
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  z-index: 1;
}
.card {
  position: relative;
  width: var(--size-w);
  min-height: var(--size-h);

  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 2px 2px 5px rgba(6, 240, 170, 0.5);
  border-radius: 1rem;
}

.geo {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  overflow-x: clip;
  overflow-y: clip;
  user-select: none;
}
.title {
  position: relative;
  padding: 0.2rem;
}
.info {
  padding: 1rem;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}


.img {
  display: block;
  margin: 0 auto; 
  max-width: 100%; /* 防止图片超过容器的宽度 */
  width: 80%;
  height: 80%; /* 使图片按比例缩放 */
  margin-right: 40px;
  transform: translateX(-10px); /* 向左平移10像素 */
}

.left-margin {
  margin-left: -35px;
}