/*Responsive Styling for Mobile Devices*/
@media all  and (max-width: 600px) {
    #CovidHeadline {  
        width: 225%;
        background-color:  #8f3900;
      color:  white;
        
    }
    #statement {
      width: 225%;
      color: black;
      font-size: 1.2em;
      }
  
      #writtenP1 {
      width: 225%;
      color: black;
      font-size: 1.2em;
      }
  
  }  
  
  /***************************************/
  
  /* POPUP/ALERT STYLING */
  .swal-modal {
      background-color: rgba(24, 23, 23, 0.89);
      font-family: 'Baloo Paaji 2', cursive;
      color: white;
      border: 3px double white;
    }
  
  
  .swal-title {
      color: white;
  }
  
  .swal-text {
      padding: 10px;
      text-align: center;
      margin: 22px;
      color: white;
      font-size: 21px;
  
  }
  
  .swal-button--mask {
      background-color: rgb(45, 45, 104);
      color: white;
      border: 1px solid white;
  }
  
  .swal-button--noMask {
      background-color: rgb(45, 45, 104);
      color: white;
  }
  
  .swal-icon--warning {
      background-color: red;
      border: none;
      
  
  }
  
  /*************************************/
  #written { 
      font-family: 'Baloo Paaji 2', cursive;
  }
  
  
  
  #CovidHeadline {
      background-color:  #8f3900;
      color:  white;
  }
  
  #footer {
      color: whitesmoke;
      font-size: 1.0em;
      box-shadow: 1px 1px 5px #031938;
      width: 99%;
      background-color: rgba(12, 66, 102, 0.438);
      padding: 5px;
      margin-top: 5px;
      font-family: 'Baloo Paaji 2', cursive;
  
  
  }
  
  #writtenP1 {
      color: black;
      font-size: 1.2em;
  }
      
      
  #sectionContainer {
      display: inline-flex;
      padding: 10px;
      font-size: 0.9em;
      
      
  }
      
  #section1 {
      box-shadow: 1px 1px 5px #031938;
      border-radius: 3%;
      width: fit-content;
      background-color: rgb(12, 66, 102);
      margin-left: 20px;
  }
  
  #maxDailyDeath {
      background-color: rgba(8, 15, 48, 0.116);
      box-shadow: 1px 1px 5px #031938;
      color: rgb(245, 245, 245);
      width: fit-content;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: 'Baloo Paaji 2', cursive;
  }
  
  #maxDailyPositiveIncrease {
      background-color: rgba(8, 15, 48, 0.116);
      box-shadow: 1px 1px 5px #031938;
      color: rgb(245, 245, 245);
      width: fit-content;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: 'Baloo Paaji 2', cursive;
  }
  
  #averageDailyPositiveIncrease {
      background-color: rgba(8, 15, 48, 0.116);
      box-shadow: 1px 1px 5px #031938;
      color: rgb(245, 245, 245);
      width: fit-content;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: 'Baloo Paaji 2', cursive;
  }

  #currentlyHospitalized {
    background-color: rgba(8, 15, 48, 0.116);
    box-shadow: 1px 1px 5px #031938;
    color: rgb(245, 245, 245);
    width: fit-content;
    padding: 10px;
    margin-left: 10px;
    margin-right: 10px;
    font-family: 'Baloo Paaji 2', cursive;
}
  
  #section2 {
      box-shadow: 1px 1px 5px #031938;
      border-radius: 3%;
      width: fit-content;
      background-color: rgb(12, 66, 102);
      margin-left: 10px;
      margin-right: 10px;
      align-content: center;
  }
  
  #maxDailyPercentPositive {
      background-color: rgba(8, 15, 48, 0.116);
      box-shadow: 1px 1px 5px #031938;
      color: rgb(245, 245, 245);
      width: fit-content;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: 'Baloo Paaji 2', cursive;
  }
  
  #maxNewTests {
      background-color: rgba(8, 15, 48, 0.116);
      box-shadow: 1px 1px 5px #031938;
      color: rgb(245, 245, 245);
      width: fit-content;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: 'Baloo Paaji 2', cursive;
  }
  
  #averageNewTests {
      background-color: rgba(8, 15, 48, 0.116);
      box-shadow: 1px 1px 5px #031938;
      color: rgb(245, 245, 245);
      width: fit-content;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: 'Baloo Paaji 2', cursive;
  }
  
  #section3 {
      box-shadow: 1px 1px 5px #031938;
      border-radius: 3%;
      width: fit-content;
      background-color: rgb(12, 66, 102);
      margin-right: 10px; 
      
  }
  
  #dailyPercentPositiveDifferenceElement {
      background-color: rgba(8, 15, 48, 0.116);
      box-shadow: 1px 1px 5px #031938;
      color: rgb(245, 245, 245);
      width: fit-content;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: 'Baloo Paaji 2', cursive;
  }
  
  
  #percentPositiveOver15Days {
      background-color: rgba(8, 15, 48, 0.116);
      box-shadow: 1px 1px 5px #031938;
      color: rgb(245, 245, 245);
      width: fit-content;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: 'Baloo Paaji 2', cursive;
  }
  
  #compareTodayTo15DayAverageElement {
      background-color: rgba(8, 15, 48, 0.116);
      box-shadow: 1px 1px 5px #031938;
      color: rgb(245, 245, 245);
      width: fit-content;
      padding: 10px;
      margin-left: 10px;
      margin-right: 10px;
      font-family: 'Baloo Paaji 2', cursive;
  }
  
  
  .table {
      width: 100%;
      border: 1px solid black;
      border-collapse: collapse;
      border-spacing: 5px;
  }
  
  th, td {
      border: 1px solid black;
      border-collapse: collapse;
      padding: 15px;
      text-align: center;
      font-family: 'Baloo Paaji 2', cursive;
    }
  
  #date {
      background-color: rgb(36, 55, 160);
      color: white;
   }
  
  #state {
     background-color: cadetblue;
     color: white;
  }
  
  #positive {
      background-color: crimson;
      color: white;
  }
  
  #negative {
      background-color: slategray;
      color: white;
  }
  
  #totalTestResults {
      background-color: rebeccapurple;
      color: white;
  }
  
  #death {
      background-color: black;
      color: white;
  }
  
  #percentPositive {
      background-color: coral;
      color: white;
  }
  
  #percentDeathOfPositive {
      background-color: green;
      color: white;
  }
  
  #newCases {
      background-color: rgb(217, 255, 0);
      color: black;
  }
  
  #newTests {
      background-color: rgb(217, 255, 0);
      color: black;
  }
  
  #dailyPercentPositive {
      background-color: rgb(217, 255, 0);
      color: black;
  }
  
  #newDeaths {
      background-color: rgb(83, 82, 82);
      color: white;
  }
  
  #dateData {
      background-color: rgb(36, 55, 160);
      color: white;
  }
  
  #stateData {
      background-color: cadetblue;
      color: white; 
  }
  
  #positiveData {
      background-color: crimson;
      color: white;
  }
  
  #negativeData {
      background-color: slategray;
      color: white;
  }
  
  #totalTestResultsData {
      background-color: rebeccapurple;
      color: white;
  }
  
  #deathData {
      background-color: black;
      color: white;
  }
  
  #percentPositiveRow {
      background-color: coral; 
      color: white;
  }
  
  #percentDeathOfPositiveData {
      background-color: green;
      color: white;
  }
  
  #newCasesData {
      background-color: rgb(217, 255, 0);
      color: black;
  }
  
  #newTestsData {
      background-color: rgb(217, 255, 0);
      color: black;
  }
  
  #dailyPercentPositiveData {
      background-color: rgb(217, 255, 0);
      color: black;
  }
  
  #newDeathsData {
      background-color: rgb(83, 82, 82);
      color: white;
  }