styles.css

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');

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

:root{
   --main-web-color: #2B2D42;
   --text-main-color: #FFF;
   --container-color: #0C1524;
   --active-cases-color: #0081A7;
   --today-cases-color: #8AC926;
   --today-deaths-color: #F94144;
   --total-cases-color: #E36414;
   --total-deaths-color: #BF3131;
   --recovered-color: #2C9B2C;
   
   --btn-background-color: #ff8f00;
}

html{
   font-family: 'Quicksand', sans-serif;
   font-weight: 500;
   font-size: 16px;
}

body{
   background-color: var(--main-web-color);

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   color: var(--text-main-color);
}

.container{

   /*** Styles ***/
   background-color: var(--container-color);
   box-shadow: 0px 8px 17px -6px rgba(0,0,0,0.75);
   border-radius: 24px;

   /*** SIZE ***/
   max-width: 1280px;
   width: 90%;

   /*** Padding and Margin ***/
   padding: 30px;
   margin: 30px auto 0 auto;
}

header{
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   font-weight: 700;
}

#list-countries{
   width: 45%;
   height: 3rem;

   margin: 15px 5px;
   border-radius: 8px;
   color: #FFF;
   background-color: #2a2b38;
   border: 2px solid #fff;
}

.country__btn{

   background: var(--container-color);
   color: #FFF;

   border: 2px solid #FFF;
   border-radius: 8px;

   font-size: 1.1rem;
   cursor: pointer;
   padding: 0.5rem 2rem;
 }

.country__btn:hover{
   background-color: #FFF;
   color: var(--container-color);
}

.main-text{
   font-size: 3.5rem;
}

header h3{
   font-size: 1.5rem;
   margin-top: -10px;
}

header h2{
   margin-top: -15px;
}
header p{
   font-weight: 400;
}

.country-flag{
   width: 100px;
   height: auto;
   margin-top: 8px;
}


/********************/

main{
   margin: 15px 5px;
}

.board{
   display: grid;
   /* grid-template-columns: 1fr 1fr 1fr; */

   /*Cambiar el min a 10rem para hacerlo responsive*/
   grid-template-columns: repeat(auto-fill, minmax(20rem,1fr));
   /* gap: 1rem; */
   row-gap: 0;
   column-gap: 1rem;
}

@media (max-width: 474px){
   .board{
      /* grid-template-columns: repeat(auto-fill, minmax(10rem,1fr)); */
      grid-template-columns: 100%;
   }
}

/**** CARDS ****/

.card{
   border-radius: 8px;
   background: rgb(99, 98, 98);
   margin-bottom: 20px;
   padding: 8%;

   font-size: 1.5rem;
}

.card span{
   font-size: 2.5rem;
}

.active-cases{
   background-color: var(--active-cases-color);
}

.today-cases{
   background-color: var(--today-cases-color);
}

.today-deaths{
   background-color: var(--today-deaths-color);
}

.total-cases{
   background-color: var(--total-cases-color);
}

.total-deaths{
   background-color: var(--total-deaths-color);
}

.recovered{
   background-color: var(--recovered-color);
}