*,*::before ,  *::after{
box-sizing:border-box;
      margin:0;
  padding : 0;
}

body{
    font-family:'Segoe UI',Tahoma ,Geneva,Verdana,sans-serif;
        background:#0a0f2e;
  overflow-x :hidden;
}

.jennie{
  position:sticky;
        top:0;
    z-index :1000;
      display:flex;
  align-items :center;
        justify-content: space-between;
    padding:20px 56px;
  background:rgba(8,13,40,0.5);
        backdrop-filter: blur(12px) ;
    -webkit-backdrop-filter:blur(12px);
  border-bottom :0.5px solid rgba(255,255,255,0.08);
        transition:background 0.3s ease;
}

.jennie.scrolled{
      background :rgba(8,13,40,0.88);
}

.jisoo{
        display: flex;
  align-items:center;
      gap :10px;
  color:white;
        text-decoration :none;
    font-size: 15px;
  font-weight:500;
        letter-spacing:0.01em;
}

.rose{
    width:30px;
        height :30px;
  border-radius:50%;
      border:1.5px solid rgba(255,255,255,0.55);
  display :flex;
        align-items: center;
    justify-content:center;
}

.rose svg{
      width :15px;
  height:15px;
}

.lisa{
        display:flex;
  align-items :center;
      gap:2px;
  background :rgba(255,255,255,0.09);
        border:0.5px solid rgba(255,255,255,0.2);
    border-radius :100px;
  padding:6px 8px;
        backdrop-filter:blur(10px);
    -webkit-backdrop-filter :blur(10px);
}

.lisa a{
  color :rgba(255,255,255,0.8);
        text-decoration:none;
    font-size:11.5px;
  font-weight :500;
      letter-spacing:0.08em;
  text-transform :uppercase;
        padding:8px 18px;
    border-radius:100px;
  transition :background 0.15s,color 0.15s;
}

.lisa a:hover{
        background:rgba(255,255,255,0.1);
  color :#fff;
}

.chiquita{
    color :rgba(255,255,255,0.8);
        text-decoration:none;
  font-size :11.5px;
        font-weight:500;
  letter-spacing :0.08em;
        text-transform:uppercase;
  padding :8px 18px;
        border-radius:100px;
  transition :background 0.15s,color 0.15s;
}

.chiquita:hover{
       background:rgba(255,255,255,0.1);
  color :#fff;
}

.heroshot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:80px 56px 60px;
  background:
    radial-gradient(ellipse at 65% 50%,rgba(60,120,220,0.35) 0%,transparent 55%),
    radial-gradient(ellipse at 30% 80%,rgba(20,50,120,0.4) 0%,transparent 50%),
    linear-gradient(135deg,#0a0f2e 0%,#0d1a4a 35%,#080d1f 70%,#050810 100%);
}

.heroshotleft{
  flex:1;
  max-width:500px;
}

.heroname{
  font-size:clamp(48px,7vw,88px);
  font-weight:300;
  color:#fff;
  line-height:1.05;
  letter-spacing:-0.025em;
  margin-bottom:20px;
  margin-top:12px;
}

.herodesc{
  font-size:15px;
  color:rgba(255,255,255,0.55);
  line-height:1.75;
  margin-bottom:32px;
}

.heroctabtn{
  display:inline-block;
  background:#3b6fd4;
  color:#fff;
  text-decoration:none;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:14px 28px;
  border-radius:100px;
  transition:background 0.2s;
}

.heroctabtn:hover{
  background:#2d5ab8;
}

.heroshotright{
  flex-shrink:0;
}

.myphoto{
  width:320px;
  height:380px;
  object-fit:cover;
  object-position:center top;
  border-radius:24px;
  border:0.5px solid rgba(255,255,255,0.1);
  filter:brightness(1.05);
}

.maindrip{
  position :relative;
        min-height:calc(100vh - 70px);
    background:
  radial-gradient(ellipse at 65% 50%,rgba(60,120,220,0.35) 0%,transparent 55%) ,
        radial-gradient(ellipse at 30% 80% ,rgba(20,50,120,0.4) 0%,transparent 50%),
    linear-gradient(135deg ,#0a0f2e 0%,#0d1a4a 35% ,#080d1f 70%,#050810 100%);
  display :flex;
        flex-direction:column;
    justify-content :space-between;
  padding-bottom:56px;
}

.typingfrfr{
        width:100%;
  max-width :700px;
      margin:0 auto;
  padding :40px 56px;
        text-align:center;
}

.gameheading{
    font-size :36px;
  font-weight:300;
        color:#fff;
  letter-spacing :-0.02em;
      margin-bottom:8px;
}

.gamesub{
  font-size:14px;
        color :rgba(255,255,255,0.5);
    margin-bottom:32px;
}

.wordbox{
      background:rgba(255,255,255,0.04);
  border :0.5px solid rgba(255,255,255,0.1);
        border-radius:16px;
    padding:28px 32px;
  font-size :22px;
      color:#fff;
  line-height :1.7;
        margin-bottom:20px;
    min-height:90px;
  display :flex;
      align-items:center;
  justify-content :center;
        flex-wrap:wrap;
    gap:8px;
  letter-spacing :0.02em;
}

.worditem.correct{color:#3b6fd4;}
.worditem.incorrect{  color :#e05c5c ;}
.worditem.active{
        color:#fff;
  text-decoration :underline;
      text-underline-offset:4px;
}

.userinput{
  width :100%;
        background:rgba(255,255,255,0.06);
    border:0.5px solid rgba(255,255,255,0.15);
  border-radius :12px;
      padding:16px 20px;
  font-size:16px ;
        color:#fff;
    font-family :inherit;
  outline:none;
        margin-bottom:28px;
    transition :border-color 0.2s;
}

.userinput:focus{
    border-color :rgba(59,111,212,0.6);
}

.userinput:disabled{
      opacity:0.4;
  cursor :not-allowed;
}

.scorestuff{
        display:flex;
  justify-content :center;
      gap:20px;
  margin-bottom :28px;
}

.ahyeon{
    background:rgba(255,255,255,0.04) ;
  border :0.5px solid rgba(255,255,255,0.1);
        border-radius:12px;
  padding :16px 28px;
      display:flex;
  flex-direction :column;
        align-items:center;
    gap:4px;
  min-width :100px;
}

.bignum{
      font-size:32px;
  font-weight :300;
        color:#fff;
    letter-spacing:-0.02em;
}

.smalltag{
  font-size :10px;
        font-weight:600;
    letter-spacing :0.1em;
  text-transform:uppercase;
        color:rgba(255,255,255,0.4);
}

.gobtn{
    background :#3b6fd4;
  color:#fff;
        border:none;
  border-radius :100px;
      padding:14px 40px;
  font-size:12px;
        font-weight :600;
    letter-spacing:0.1em;
  text-transform :uppercase;
      cursor:pointer;
  font-family :inherit;
        transition:background 0.2s;
}

.gobtn:hover{
  background :#2d5ab8;
}

.bottomstuff{
        display:flex;
  align-items :flex-end;
      justify-content:space-between;
  padding :0 56px;
}

.subtext{
        font-size:14px;
  color :rgba(255,255,255,0.65);
      line-height:1.7;
}

.viewbtn{
  display :flex;
        align-items:center;
    text-decoration :none;
  flex-shrink:0;
}

.viewbtn span{
      background:rgba(20,20,20,0.85) ;
  color :#fff;
        font-size:11px;
    font-weight :600;
  letter-spacing:0.1em;
        text-transform :uppercase;
    padding:14px 22px;
  border-radius :100px 0 0 100px;
      white-space:nowrap;
}

.arrowball{
  width:46px ;
        height:46px;
    background :#3b6fd4;
  border-radius:50%;
        display:flex;
  align-items :center;
      justify-content:center;
  transition :background 0.15s;
}

.arrowball svg{
        width:18px;
  height :18px;
}

.viewbtn:hover .arrowball{
      background:#2d5ab8;
}

.whoami{
  display :flex;
        align-items:center;
    justify-content :space-between;
  gap:60px;
        padding:120px 56px;
  background :#050810;
}

.rami{
      flex:1;
  max-width :480px;
}

.rora{
        font-size:11px;
  font-weight :600;
      letter-spacing:0.12em;
  text-transform :uppercase;
        color:#3b6fd4;
    display:block;
  margin-bottom :16px;
}

.rami h2{
    font-size :clamp(32px,4vw,52px);
  font-weight:300;
        color:#fff;
  line-height :1.1;
      letter-spacing:-0.02em;
  margin-bottom :20px;
}

.rami p{
        font-size:15px;
  color :rgba(255,255,255,0.6);
      line-height:1.75;
  margin-bottom :32px;
}

.hmu{
  display:inline-block ;
        color:#fff;
    text-decoration :none;
  font-size:13px;
        font-weight :500;
    letter-spacing:0.06em;
  border-bottom :1px solid rgba(255,255,255,0.3);
        padding-bottom:4px;
  transition :border-color 0.2s,color 0.2s;
}

.hmu:hover{
      border-color:#3b6fd4;
  color :#3b6fd4;
}

.cardgrid{
        display:grid;
  grid-template-columns :1fr 1fr;
      gap:16px;
  flex :1;
        max-width:420px;
}

.pharita{
  background :rgba(20,50,120,0.4);
        border:0.5px solid rgba(255,255,255,0.1);
    border-radius :16px;
  padding:24px;
        transition:background 0.2s,border-color 0.2s;
}

.pharita:hover{
    background:rgba(255,255,255,0.07) ;
  border-color :rgba(59,111,212,0.5);
}

.cardmoji{
        font-size:24px;
  display :block;
      margin-bottom:12px;
}

.pharita h3{
  font-size :14px;
        font-weight:500;
    color:#fff;
  margin-bottom :6px;
}

.pharita p{
      font-size:12px;
  color :rgba(255,255,255,0.5);
        line-height:1.5;
}

.hittmeup{
  padding :120px 56px;
        background:#080d1f;
    border-top:0.5px solid rgba(255,255,255,0.06) ;
  text-align :center;
}

.hittmeup h2{
        font-size:clamp(32px,4vw,52px);
  font-weight :300;
      color:#fff;
  line-height :1.1;
        letter-spacing:-0.02em;
    margin-bottom:16px;
}

.hittmeup p{
  font-size :15px;
        color:rgba(255,255,255,0.55);
    margin-bottom :40px;
}

.mailbtn{
      display:inline-block;
  background :#3b6fd4;
        color:#fff;
  text-decoration :none;
      font-size:12px;
  font-weight :600;
        letter-spacing:0.1em;
    text-transform :uppercase;
  padding:16px 36px;
        border-radius:100px;
  transition :background 0.2s;
}

.mailbtn:hover{
    background:#2d5ab8 ;
}

footer{
  padding :24px 56px;
        background:#050810;
    border-top:0.5px solid rgba(255,255,255,0.06);
  text-align :center;
        font-size:12px;
  color :rgba(255,255,255,0.25);
      letter-spacing:0.04em;
}

.keonho{
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 100px;
transition: background 0.15s,color 0.15s;
}

.keonho:hover{
  background:rgba(255,255,255,0.1) ;
  color: #fff;
}