:root {
  --header-main-height: 6em;
  --header-button-side-padding: 3em;
}

noscript {
    font-size: 3em;
}

header {
  background: black;
  color: rgb(245,166,75);
  min-height:var(--header-main-height);
  display: flex;
  flex-direction: row;
  font-size: 1.2em;
}

#hamburger--icon {
    height:var(--header-main-height);
}

#header--right--mobile {
    width:100%;
    display:flex;
    flex-direction: row-reverse;
}

#mobile--menu {
    position: absolute;
    top: var(--header-main-height);
    min-width:40vw;
    height:calc(100vh - var(--header-main-height));
    display:flex;
    flex-direction:column;
    background: black;
    box-shadow: 0 0 8px 2px rgba(0,0,0,0.25);
    z-index:9999;
}

#mobile--menu > a {
    padding: 1em 0 1em 0;
}

#covid--info--mobile--button, #covid--information--button {
    background: rgb(181, 11, 11);
    border: 0.2em solid rgb(143, 11, 11);
}

#covid--information--button {
    position:fixed;
    z-index:9999;
    right: 0em;
    text-decoration: none;
    color: white;
    font-size: 1em;
    padding:8px;
    min-width: 5vw;
    min-height:2vh;
    padding: 30px;
    transition: font-size 0.5s ease, padding 0.5s ease
}

#covid--information--button:hover {
    color: rgb(186, 186, 186);
    background: rgb(143, 11, 11);
    border: 0.2em solid rgb(117, 11, 11);
    transition: background 0.75s, color 0.75s;
    /* height:calc(var(--header-main-height) + 1em); */
    /* padding: 30px; */
    /* font-size: 1.5em; */
}

#covid--information--button:active {
    color: rgb(102, 102, 102);
    background: rgb(102, 9, 9);
    border: 0.2em solid rgb(71, 7, 7);
}

#header--left,#header--buttons,#header--right,#covid--information--button,.header--link--a,.header--link,#header--right > *, #header--right--mobile > * {
  display:flex;
  justify-content: center;
  align-items: center; 
}

#header--left {
  padding-left:4em;
  flex: 0.2;
}

#header--buttons {
  flex: 0.6;
}

#header--right {
  flex: 0.2;
  flex-direction: row;
  /* border: 2px solid white; */
}

#header--right > * {
    height:2em;
}

#header--right > a {
    padding: 0 2em 0 2em;
}

#header--social--media--label {
    color: white;
}

.header--social--media--link > img {
    height:3em;
}

.header--social--media--link.twitter > img {
    height:1.5em;
}

.header--link--a {
  text-decoration: none;
  color: rgb(245,166,75);
  flex-direction:column;
  height:100%;
  flex:1;
}

.header--link {
  text-decoration: none;
  border:0.3em solid rgba(0,0,0,0);
  transition: border-bottom-color 0.3s ease;
  text-align: center;
  white-space: nowrap;
  /*margin: 0 0.1em 0 0.1em;*/
  flex:1;
  width:80%;
}

#header--logo {
    height: calc(var(--header-main-height) - 1em);
}

.header--link:hover {
    border-bottom-color: rgb(245,166,75);
}

.header--link.mobile {
    font-size:2em;
}

.header--link.mobile:hover {
    border-bottom-color: rgba(0,0,0,0);
}

.header--link:active {
    color: rgb(128, 96, 60);
}