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

body{
background:#121212;
color:white;
font-family:Courier New,monospace;
padding:80px 40px;
min-height:100vh;
transition:background-color .6s
}

body.academic_weapon{
background:#003300
}

body.mid{
background:#52523d
}

body.cooked{
background:#330000;
animation:shake .5s
}

.container{
max-width:900px;
margin:auto;
text-align:left
}

h1{
font-size:4rem;
font-weight:900;
letter-spacing:-3px;
margin-bottom:.5rem;
text-shadow:3px 3px 0 black
}

.subtitle{
color:#888;
font-size:1.5rem;
margin-bottom:4rem;
border-bottom:3px solid #333;
padding-bottom:20px;
max-width:600px
}

.input-group{
display:flex;
align-items:center;
gap:30px;
margin-bottom:50px
}

input{
width:200px;
padding:15px 0;
background:transparent;
border:none;
border-bottom:5px solid #555;
color:white;
font-size:3rem;
font-weight:bold;
outline:none
}

input:focus{
border-bottom:5px solid white
}

input::placeholder{
color:#444;
font-size:2rem
}

.divider{
font-size:4rem;
color:#444;
font-weight:100
}

button{
background:white;
color:black;
font-weight:900;
padding:25px 50px;
border:none;
cursor:pointer;
font-size:1.5rem;
letter-spacing:2px;
transition:.2s
}

button:hover{
background:#ffcc00;
transform:translateX(10px)
}

.result-box{
margin-top:6rem;
animation:slideUp .6s
}

#status-text{
font-size:6rem;
font-weight:900;
line-height:.9;
letter-spacing:-2px;
margin-bottom:20px
}

.roast-container{
border-left:8px solid white;
padding-left:30px
}

.roast-text{
font-size:1.8rem;
line-height:1.4;
color:#ddd;
max-width:800px
}

@keyframes shake{
10%,90%{transform:translateX(-2px)}
20%,80%{transform:translateX(4px)}
30%,50%,70%{transform:translateX(-6px)}
40%,60%{transform:translateX(6px)}
}

@keyframes slideUp{
from{opacity:0;transform:translateY(50px)}
to{opacity:1;transform:translateY(0)}
}