/*  
    Stylesheet for lab main website
    Updated for Summer I 2013
    Updated in October 2019 by Chase Boone
*/

/****************  Standard html elements  *********************/

html, body {
    scrollbar-face-color:       #5D1725;
    scrollbar-highlight-color:  white;
    font-family: Arial;
    margin: 0;
    padding: 0;
}

hr {
   border-color:       white;
   background-color:   #5D1725;
   height:             2px;
}

h1 {
    text-align:  center;
    color:       #5D1725;
    font-size:   30;
}

h2 {
  text-align: center;
  color: #5D1725;
  padding: 0px 15px;
}

a .dropdown-menu {
  color: #007bff;
  font-weight: 500;
}

img {  
    border:      0;
    margin:      0;
}

.top_img {
   height: 195px;
   display: block;
   position: relative;
}

.top_img::after {
   content: "";
   background: url('/images/headtop.jpg');
   background-size: 100%;
   background-repeat: no-repeat;
   opacity: 0.4;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   position: absolute;
   z-index: -1;
}

.top_img img {
  position: absolute;
  width: 35%;
  margin-left: 32.5%;
  margin-top: 50px;
  
}

@media screen and (max-width: 1920px) {
  .img-fluid {
    width: 200%;
    height: auto;
  }

  a .dropdown-menu {
    font-size: xx-large;
  }
}

@media screen and (max-width: 1200px) {
  .top_img::after {
     background-size: 1200px;
  }
  
  .top_img img {
     width: 50%;
     margin-left: 25%;
     margin-top: 70px;
  }

  .img-fluid {
    width: 200%;
    height: auto;
  }

  h1 {
    font-size: 2.25rem;
  }

  h2, a .dropdown-menu {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1.125rem;
  }
  
  h5, p, li {
    font-size: 1rem;
  }

  a .dropdown-menu {
    font-size: large;
  }
}

@media screen and (max-width: 790px) {
  .top_img img {
    width: 80%;
    margin-left: 10%;
    margin-top: 70px;
  }

  .img-fluid {
    width: 100%;
  }

  h1 {
    font-size: 2.25rem;
  }

  h2, a .dropdown-menu {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1.125rem;
  }
  
  h5, p, li {
    font-size: 1rem;
  }

  .centered img {
    width: 80%;
  }
}
@media screen and (max-width: 500px) {
  table {
    max-width: 500px;
  }

  h1 {
    font-size: 2.25rem;
  }
  
  h2, a .dropdown-menu {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  h4 {
    font-size: 1.125rem;
  }
  
  h5, p, li {
    font-size: 1rem;
  }
}