:root{
  --border: .25rem solid black;
  --padding: .25rem;
}

html {
  width: 100vw;
}

body {
  box-sizing: border-box;
  font-family: Nunito, Helvetica, sans-serif;
  background-color: mintcream;
  margin: auto;
  width:auto;
}

#header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
   'header-date header-prov header-region';
  height: 3rem;
  background-color:black;
  color: white;
  width: auto;
  align-items: center;
  justify-items: center;
  position: sticky;
  top: 0;
  padding: 8px;
}

#header-date {
  grid-area: header-date;
}

#header-prov {
  grid-area: header-prov;
}

#header-region {
  grid-area: header-region;
}

#main-container {
  max-width: 1200px;
  height: auto;
  margin: auto;
  padding: 1rem;
}

#title {
  text-align: center;
  font-weight: 700;
  font-size: 3rem;
  background-color: red;
  padding: 1rem;
  margin-top: 0;
  border: var(--border);
}

#date {
  width: auto;
  height: 1.4rem;
  padding-bottom: .5rem;
  display: flex;
  align-items: center;
}

.search-output.dropdown {  
  font-size: 1.2rem;
  max-width: 98vw;
  padding: 5px .5rem;
  margin: 0 0 1rem 0;
  display: block;
  background-color: beige;
  white-space: nowrap;
}

.search-output:focus, .search-output:hover {
  outline: none;
}

#search-container, #deaths-container {
  display: flex;
  justify-content: space-between;
}

.death-label {
  font-size: 1.5rem;
}

#new-deaths {
  width: 15vw;
}

#total-deaths {
  width: 40vw;
}

#new-deaths, #total-deaths {
  margin-bottom: 1rem;
  padding: 1rem;
  font-size: 3rem;
  text-align: center;
  color: red;
  background-color: black;
}

#supp-container {
  padding: var(--padding);
  grid-template-areas: 
    'case-group'
    'hospital-group'
    'test-group';
  background-color: black;
}

.supp-group {
  background-color:beige
  ;
}

#case-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
   'new-cases-container total-cases-container';
  grid-area: case-group;
}

#new-cases-container {
  grid-area: new-cases-container;
}

#active-cases-container {
  grid-area: active-cases-container;
}

#total-cases-container {
  grid-area: total-cases-container;
}

#hospital-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
  'new-hospital-container total-hospital-container' 'new-icu-container total-icu-container';
  grid-area: hospital-group;
}

#new-hospital-container {
  grid-area: new-hospital-container;
}

#total-hospital-container {
  grid-area: total-hospital-container;
}

#new-icu-container {
  grid-area: new-icu-container;
}

#total-icu-container {
  grid-area: total-icu-container;
}

#test-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
  'new-test-container total-test-container';
  grid-area: test-group;
}

#new-test-container {
  grid-area: new-test-container;
}

#total-test-container {
  grid-area: total-test-container;
}

.data-label-container {
  display: block;
  text-align: center;
  padding: 1rem;
  grid-area: data-label-container;
}

.supp-output {
  font-size: 1.5rem;
  color: red;
}

#acknowledge p {
  font-size: .7rem;
  text-align: center;
}

footer a {
  text-decoration: none;
}

footer h6{
  font-size: .7rem;
  position: static;
  bottom: 0;
  margin-left: 0;
  left: 0;
  height: 1rem;
  width: auto;
  background-color: black;
  margin-top: 0;
  margin-bottom: 0;
  text-align: center;
  padding: .5rem 2rem;
}

mark.red {
  color:red;
  background: none;
}

mark.white {
  color:#fff;
  background: none;
}

mark.green {
  color: green;
  background: none;
}

#version {
  float: right;
}

@media screen and (max-width: 900px) {

  #new-deaths, #total-deaths {
    width: auto;
  }

  #search-container, #deaths-container {
    display: block;
  }

  .search-output {
    width: 100%;
  }
}

@media screen and (max-width: 600px) {

  #supp-container {
    grid-template-columns: 1fr;
    grid-template-rows: max-content;
  }

  .supp-group, #case-group, #hospital-group, #test-group {
    display: block;
    grid-template-columns: 1fr;
    grid-template-rows: max-content;
    grid-template-areas: 
      'data-label-container'
      'data-label-container';
  }

  .data-label-container {
    max-width: 100%;
  }

  #footer {
    width: auto;
  }

}

@media screen and (max-width: 500px) {

  #main-container {
    padding: 3px;
  }

  #supp-container {
    padding: var(--padding);
  }

  #header {
    position: sticky;
    height: auto;
    width: auto;
    padding: var(--padding);
  }

  #footer {
    height: auto;
    font-size: .8rem;
    padding: auto;

  }

  #version {
    display: none;
  }
}