@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial,sans-serif;
}

body{
  height:100vh;
  overflow:hidden;
}

.background{
  position:fixed;
  inset:0;
  background:url("image/learn.jpeg") center/cover no-repeat;
  z-index:-2;
}

.screen{
  display:none;
  height:100vh;
  justify-content:center;
  align-items:center;
}

.screen.active{display:flex;}

.card{
  width:95%;
  max-width:650px;
  min-height:360px;
  padding:40px;
  border-radius:22px;
  position:relative;
}

.center-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.glass{
  background:rgba(255,255,255,0.28);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.45);
}

.glass:hover,
.glass:active{
  background:rgba(135,206,250,0.38);
}

.caveat{font-family:'Caveat',cursive;}

h1{font-size:40px;color:#0b3c5d;}
h2{font-size:34px;color:#0b3c5d;}

.text{
  font-size:20px;
  line-height:1.7;
  color:#033e6b;
}

.center-text{text-align:center;}

input{
  width:100%;
  padding:14px;
  font-size:20px;
  margin-top:14px;
  border-radius:10px;
  border:none;
}

button{
  padding:12px 28px;
  background:#5bbcff;
  color:#00324d;
  border:none;
  border-radius:14px;
  font-size:18px;
  cursor:pointer;
}

button:hover{background:#87cefa;}

.buttons{
  display:flex;
  gap:18px;
}

.word-display{
  font-size:32px;
  color:#012a40;
}

.meaning{
  font-size:20px;
  color:#012a40;
  line-height:1.7;
}

.space{height:22px;}

.speaker{
  cursor:pointer;
  margin-right:8px;
}

.back{
  position:absolute;
  right:18px;
  bottom:18px;
  font-size:14px;
  padding:8px 14px;
  border-radius:10px;
}

.dots{
  display:flex;
  gap:8px;
}

.dots span{
  width:12px;
  height:12px;
  background:#0b3c5d;
  border-radius:50%;
  animation:blink 1.4s infinite;
}

@keyframes blink{
  0%{opacity:.2;}
  20%{opacity:1;}
  100%{opacity:.2;}
}