/* global */

*{
box-sizing:border-box;
}

body{
font-family:'Inter',sans-serif;
line-height:1.5;
}

/* inputs */

input,
textarea,
select{
border:1px solid #e5e7eb;
transition:all .2s;
border-radius:6px;
}

input:focus,
textarea:focus,
select:focus{
outline:none;
border-color:#000;
box-shadow:0 0 0 2px #f3f4f6;
}

/* HOT text */

.hot-fire{
font-weight:700;

background:linear-gradient(
45deg,
#ff0000,
#ff6a00,
#ffcc00
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

text-shadow:
0 0 6px rgba(255,80,0,0.6),
0 0 12px rgba(255,120,0,0.4);

animation:fireGlow 2s infinite alternate;
}

@keyframes fireGlow{

0%{
text-shadow:
0 0 4px rgba(255,80,0,0.6),
0 0 8px rgba(255,120,0,0.3);
}

100%{
text-shadow:
0 0 10px rgba(255,120,0,0.9),
0 0 20px rgba(255,200,0,0.6);
}

}

/* buttons */

.btn-main{
background:#111;
color:white;
font-weight:500;
transition:all .2s;
border-radius:6px;
}

.btn-main:hover{
background:#000;
transform:translateY(-1px);
}

.btn-soft{
background:#f3f4f6;
transition:all .2s;
border-radius:6px;
}

.btn-soft:hover{
background:#e5e7eb;
}

/* tabs */

.tabBtn{
padding:6px 12px;
border-radius:6px;
font-size:14px;
background:#e5e7eb;
cursor:pointer;
transition:all .2s;
}

.tabBtn:hover{
background:#d1d5db;
}

.tabActive{
background:#111;
color:white;
}

/* reading words */

.reading-word{
cursor:pointer;
padding:1px 3px;
border-radius:3px;
transition:all .15s;
}

.reading-word:hover{
background:#e5e7eb;
}

.reading-word:active{
transform:scale(.95);
}

/* popup */

.popup-bg{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.5);

display:flex;
justify-content:center;
align-items:center;

z-index:1000;

padding:20px;

}

.popup-box{

background:white;
padding:25px;
border-radius:10px;

max-width:420px;
width:100%;

max-height:80vh;
overflow:auto;

box-shadow:0 10px 30px rgba(0,0,0,0.2);

}

/* smooth scrolling */

html{
scroll-behavior:smooth;
}