/*
-här använder jag background shorthand.
-jag behöver inte bakcground-color så jag skriver inte det.
*/

body {                                                                 
    background: url(images/Covid19.jpg) no-repeat center center fixed; 
    background-size: cover;  
}

main {
    display: flex;
    flex-direction: column; /*Jag vill att all elements kommer i vertical ordning så jag byter flex-direction från row till column */
    align-items: center; /*Jag vill att all elements kommer i mitten så jag använde align-items: center */
}

/*
Alla stylings namn förklara vilken eller vilka elements som kommer att påverkas på grund av denna styleing
till exempel .search h1 betyder header som finns i search div
*/

.search {
    margin-top: 80px;
}

.search h1 {
    text-transform:capitalize;
    color: #FBB66E;
    background-color:#252F31;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.search form input {
    padding: 15px;
    border: 1px solid #FBB66E;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    background-color: #252F31;
    font-size: 1rem;
    font-weight:600;
}

.search form input:focus{
    background-color: #252F31;
    color: #FBB66E;
    font-size: 1.4rem;
}

.search form button {
    width: 120px;
    padding: 15px;
    color: #FBB66E;
    background-color: #252F31;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    font-size: 1.4rem;
    font-weight: 600;
}

.search form button:hover {
    color: #252F31;
    background-color: #FBB66E;
}

i{font-size: 1.4rem;}


.table {
    color: #FBB66E;
    width: 1100px;
    margin: 30px auto 0 auto;
}

.table th {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: capitalize;
}

.table tbody {
    font-size: 1.2rem;
    font-weight: 600;
}

.table tbody:hover {
    color: #252F31;
    background-color: #FBB66E;
}