body{

    margin:0;


  font-family: "Copse", serif;
  font-weight: 400;
  font-style: normal;

    background:#f5f7fa;

}

.question-card{

    background:white;

    padding:20px;

    border-radius:10px;

    margin-top:20px;

    box-shadow:0 0 10px rgba(0,0,0,.08);

}

.container{

    width:900px;

    margin:auto;

    margin-top:40px;

  font-family: "Copse", serif;
  font-weight: 400;
  font-style: normal;

}


.button-container{
    display :flex;
    justify-content: center;   
    margin: 30px 0;
}

.download-button {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40%;
    padding: 18px;

    background: #2563eb;
    color: white;
    text-decoration: none;
    font-size: 18px;

    border-radius: 0px;
    cursor: pointer;
    transition: background 0.2s ease;

  font-family: "Copse", serif;
  font-weight: 400;
  font-style: normal;
}

.download-button:hover {
    background: #1d4ed8;
}


.submit-button{

    width:30%;
    align-items:center;
    justify-content: center;

    padding:18px;

    border:none;

    background:#2563eb;

    color:white;

    font-size:18px;

    border-radius:0px;

    cursor:pointer;

    transition: background 0.2s ease;

  font-family: "Copse", serif;
  font-weight: 400;
  font-style: normal;

}

.submit-button:hover{

    background:#1d4ed8;

}

header{

    background:#4285f0;

    color:rgb(255, 255, 255);

    padding:30px;

    border-radius:0px;

    text-align:center;

  font-family: "Copse", serif;
  font-weight: 400;
  font-style: normal;

}

form{

    margin-top:30px;

}

/*  Results */

.results-card {

    background: white;

    padding: 30px;

    margin-top: 25px;

    border-radius: 10px;

    box-shadow: 0 0 10px rgba(0,0,0,.08);

  font-family: "Copse", serif;
  font-weight: 400;
  font-style: normal;

}

.risk-score {

    font-size: 48px;

    font-weight: bold;

    color: #dc2626;

    text-align: center;

    margin: 20px 0;

}

.category-row {

    display: flex;

    justify-content: space-between;

    padding: 15px;

    border-bottom: 1px solid #e5e7eb;

}

.risk-low {
    color: #16a34a;
}

.risk-moderate {
    color: #ca8a04;
}

.risk-high {
    color: #ea580c;
}

.risk-critical {
    color: #dc2626;
}

.progress-bar {

    width: 100%;
    height: 30px;
    background: #e5e7eb;
    border-radius: 20px;
    overflow: hidden;

}

.progress-fill {

    width: 70%;
    height: 100%;
    background: #dc2626;

}