@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');

body{
  font-family:"Noto Sans", sans-serif;
  text-align:center;
  background-color:#f0f8ff;
  margin:0;
  padding:20px;
}

.container{
  background-color:#e6f7ff;
  padding:20px;
  border-radius:10px;
  border:2px solid #b3e0ff;
  max-width:900px;
  margin:auto;
  text-align:center;
}

h1{ color:#005a99; }

img{
  margin-top:3px;
  margin-bottom:3px;
  width:240px;
  max-width:80vw;
  border-radius:8px;
}

button{
  font:inherit;
  font-size:15px;
  padding:10px 20px;
  margin:10px;
  cursor:pointer;
  border-radius:5px;
  border:1px solid #007acc;
  background-color:#007acc;
  color:white;
}

button:hover{ background-color:#005a99; }

.instruction, .solution{
  background-color:white;
  padding:15px;
  border-radius:8px;
  margin-top:16px;
  box-shadow:0 2px 5px rgba(0,0,0,0.1);
  font-size:18px;
  text-align:left;
}

.answerBox{
  margin-top: 10px;
}

.answerRow{
  margin-top: 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#answerInput{
  width:min(360px, 90vw);
  padding:10px 12px;
  border-radius:8px;
  border:1px solid #b3c7d9;
  font-size:16px;
}

.unitPill{
  display:inline-block;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid #b3c7d9;
  background:#ffffff;
  font-weight:700;
  color:#005a99;
  min-width: 52px;
}

.feedback{
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  min-height: 22px;
  color:#0b3d66;
}

.solution{
  display:none;
}