.header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  background-color: rgb(235, 235, 235);
  border-bottom: 1px solid rgb(160 160 160);

  gap: 5px;
}

.header-personal {
  padding-top: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  background-color: black;
  border-bottom: 1px solid rgb(160 160 160);

  gap: 5px;
  color: white;

  padding-bottom: 10px;
}

.header > div {
  margin-bottom: .5rem;
  margin-top: .5rem;
}

.header-right {
  padding-right: 4px;
}

.header-element {
  display: flex;
  justify-content: space-evenly;
  padding-bottom: 5px;

  /* change line height to something else to override p{} default if trying the vw thing again*/
}

#header-img img {
  width: 75px;
}

#name {
  font-family:Georgia, 'Times New Roman', Times, serif;
  font-size: 2.5rem;
  font-weight: bold;
  text-align: center;
}

#phone {
  font-size: .9rem;
}

#cv, .page-title {
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-style: italic;
  font-size: 1.2rem;
}

#orcid {
  font-weight: bold;
  font-size: .9rem;
}

#location {
  font-weight: bold;
}

#phone {
  font-style: italic;
}

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

.contact-btn, .acc-btn {
  background-color: white;
  border-color: rgb(200, 200, 200);
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
  box-shadow: 3px 2px 3px rgba(0, 0, 0, .2);
  padding-left: .3rem;
  padding-right: .3rem;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-btn .tooltip, .acc-btn .tooltip {
  position: absolute;
  background-color: rgb(50, 50, 50);
  color: white;
  padding: 8px;
  border-radius: 2px;
  font-size: .7rem;
  /*font-size: 1.1vw;*/
  bottom: -29px;
  right: 10px;
  opacity: 0;
  transition: opacity .2s;
  /*disables hovering on the tooltip itself*/
  pointer-events: none;
  white-space: nowrap;
}

.contact-btn:hover, .acc-btn:hover {
  cursor: pointer;
  box-shadow: 5px 5px 3px rgba(0, 0, 0, .3);
  transition: box-shadow .2s, padding-top .2s, padding-bottom .2s;
}

.contact-btn:active, .acc-btn:active {
  box-shadow: 2px 2px 3px rgba(0, 0, 0, .1);
  opacity: 50%;
  transition: box-shadow .2s, opacity .2s;
}

.contact-btn:hover .tooltip, .acc-btn:hover .tooltip {
  opacity: 100;
}

.icon {
  width: 15px;
}

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

#tagline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  font-style: italic;
  font-weight: bold;
  font-size: .8rem;
  padding-top: 4px;
  padding-bottom: 4px;
  text-align: center;

  gap: 10px;
  background-color: rgb(230, 230, 230);
  border-bottom: 1px solid rgb(160 160 160);
}

.availability-subheader {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  font-style: italic;
  font-size: .7rem;
  padding-top: 4px;
  padding-bottom: 4px;

  gap: 10px;
  background-color: rgb(220, 220, 220);
  border-bottom: 1px solid rgb(160 160 160);
}

#availability-title {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-weight: bold;
  font-style: normal;
}

#availability-timezone {
  font-style: italic;
}

/****************************/
#pages {
  margin: 0;
  padding: 0;

  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;

  background-color: rgb(210, 210, 210);

  box-shadow: 1px 5px 8px rgba(0, 0, 0, .3);

  margin-bottom: 10px;
  border-bottom: 1px solid rgb(140 140 140);

}

#pages a {
  font-size: .8rem;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
  border-top: none;
  border-bottom: none;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: rgb(200, 200, 200);
  margin: 0;
}

#pages a:link,
#pages a:visited,
#pages a:hover,
#pages a:active,
#pages a {
  text-decoration: none;
  color: black;
}

#pages a:hover {
  background-color: rgb(180, 180, 180);
}


/****/
/* personal page */
#return-btn {
  background-color: rgb(80, 80, 80);
  color: white;
  padding: 5px;
}

#return-btn:hover {
  background-color: rgb(50, 50, 50);
}

#return-btn:active{
  opacity: 50%;
}

/****************************/
/*Media queries for phone   */
/****************************/

@media only screen and (max-width: 650px) {
  #name {
    font-size: 1rem;
    text-align: left;
  }

  #cv, .page-title {
    font-size: .7rem;
  }

  #orcid, #phone {
    font-size: .55rem;
  }

  #header-img img {
    width: 45px;
  }

  .header-right {
    padding-right: 0px;
  }

  .header-element {
    padding: 0;
  }

  .header-element-content {
    font-size: .65rem;
  }

  #pages {
    margin-bottom: 25px;
  }

  .availability-subheader p,
  #pages a {
    font-size: .5rem;
  }

  #tagline p {
    font-size: .6rem;
  }

  .contact-btn, .acc-btn {
    width: 15px;
    height: 15px;
    box-shadow: none;
  }

  #return-btn {
    font-size: .5rem;
  }

  .contact-btn .tooltip, .acc-btn .tooltip {
    font-size: .5rem;
  }

  .icon {
    width: 10px;
  }
}