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

body{

background:
radial-gradient(
circle,
#182848,
#0f172a
);

font-family:
Arial;

color:white;

padding:22px;

}

.container{

max-width:760px;

margin:auto;

padding:30px;

background:
rgba(255,255,255,.04);

border-radius:30px;

}

h1{

font-family:
Algerian,
serif;

font-size:4rem;

text-align:center;

color:#dff7ff;

}

.subtitle{

text-align:center;

margin:15px;

opacity:.8;

}

input,
textarea{

width:100%;

padding:18px;

margin-top:14px;

border:none;

border-radius:18px;

background:
rgba(255,255,255,.05);

color:white;

}

textarea{

height:220px;

}

button{

width:100%;

padding:18px;

margin-top:18px;

border:none;

border-radius:18px;

font-weight:700;

background:

linear-gradient(
90deg,
#4de3ff,
#5dff9d
);

}

.hidden{
display:none;
}

.progress{

height:24px;

background:#222;

border-radius:999px;

overflow:hidden;

margin-top:20px;

}

#bar{

height:100%;

width:0;

display:flex;

align-items:center;

justify-content:center;

transition:1s;

}

.safe{
background:#00d26a;
}

.warning{
background:orange;
}

.danger{
background:red;
}

#badge{

margin-top:15px;

padding:12px;

border-radius:15px;

text-align:center;

}

#reason{

margin-top:20px;

line-height:2;

}

li{

margin-bottom:12px;

}

.card{

margin-top:25px;

padding:18px;

background:
rgba(255,255,255,.04);

border-radius:18px;

}