@import url('https://fonts.googleapis.com/css2?family=Neuton&display=swap');

*{
    margin: 0;
    padding:0;
    line-height: 10px;
    font-family: 'Neuton', serif;
    box-sizing: border-box;
}

/* heading */
div h1 span {
    color: rgb(43, 132, 233);
}

#dataContainer {
    position: relative;
    top: 30px;
    left: 3%;
    text-align: center;
}

/* dropdown menu */
select {
    position: relative;
    top: 10px;
    box-shadow: -2px 0 rgb(235, 235, 235), 0 2px rgb(235, 235, 235), 2px 0 rgb(235, 235, 235), 0 -2px rgb(235, 235, 235);
}

/* cards */
.datacard {
    display: inline;
    border-radius: 2px;
    position: relative;
    top: 20px;
    height: 200px;
    padding: 10px 0;
    margin: 1.5px;
    width: 24%;
}

#cases {
    color: red;
}
#cases:hover {
    background: rgb(255, 232, 232);
}

#active {
    color: blue;
    background: rgb(234, 234, 255);
}
#active:hover {
    background: rgb(226, 226, 255);
}

#recovered {
    color: rgb(12, 172, 12);
}
#recovered:hover {
    background: rgb(228, 255, 228);
}

#deaths {
    color: grey;
}
#deaths:hover {
    background: rgb(233, 232, 232);
}

/* cards text */
.datacard p {
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 1.05px;
} 

#newCases, 
#newRecovered, 
#newDeaths {
    position: relative;
    top: 10px;
    font-size: 13px;
    font-weight: 600;
}

#newCases::before, 
#newRecovered::before, 
#newDeaths::before {
    font-weight: 700;
    content: '+';
}

#totalCases,
#recoveredCases,
#activeCases,
#totalDeaths {
    text-align: center;
    position: relative;
    top: 20px;
    font-weight: 500;
    font-size: 30px;
}

#activeCases{
    top: 45px;
}