:root {
  --hoverturquoise:#75D5F2;
  --turquoise: #1e86a6;
  --white: #F8F8F8;
  font-size: calc(1vw + 1vh);
}

/* media queries for font size */
@include media-breakpoint-up(sm) {
   .feature h1 {
    font-size: 1 rem;
  }
  .feature li {
    font-size: 4 rem;
  }
}

@include media-breakpoint-up(md) {
  :root {
    font-size: 1.4rem;
  }
}

@include media-breakpoint-up(lg) {
  :root {
    font-size: 1.6rem;
  }
}



html, body {
  background-color: var(--white);
}

img {
  /*max-width: 400px;*/
  padding: 20px;
}

video {
  position: relative;
  left: 10%;
  padding: 20px;
}

/* NAVIGATION!!! 
Based on Mashable Nav Bar & tutorial found here:
https://medium.freecodecamp.org/how-to-easily-build-mashables-navigation-bar-with-html-and-css-9e5007af786
*/

nav {
  width:100%;
  height: 80px;
  background-color: var(--turquoise);
  overflow: hidden;
  position: fixed;
  z-index: 1;
  /*margin-top: -30px;
  margin-right: auto;
  margin-bottom: -30px;
  margin-left: -30px;*/

}

nav a {
  display: block;
  float: right;

  font-family: sans-serif;
  font-size: 15px;
  color: white;

/*Box Method Test AKA handicap
  background-color: #17b0cf;  
  border: 1px solid #000;
  */

  /*Padding Our Box*/
    /*margin-top: 100px;*/
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 10px;
    padding-left: 10px;

/*Let's remove the link decoration*/
    text-decoration: none;

}

nav a:hover {
  background-color: var(--hoverturquoise);
}

#logo {
  /*font*/
  font-family: 'Hind', sans-serif;
  font-size: 40px;
  letter-spacing: -2px;
  text-shadow: 1px 1px 2px #c4c4c4;

  /*box*/
  padding-left: 20px;
  padding-right: 40px;
  margin-right: 10px;
  margin-top: -23px;

  float: left;
}

.naveffectdiv{
  background-color: var(--turquoise);
  height: 80px;  
}

.feature {
 /* background-color: var(--turquoise); */
   background-color: var(--white); 
  /*height:600px;*/
  min-width:100%; 
  /*margin-left: -35px;
  margin-right: -35px;*/
  padding-top: 70px;
} 

.feature h1 {
  font-family: 'Acme', sans-serif;
  font-size: 3rem;
}

.feature li {
  font-size: 1.0rem;
  font-family: 'Acme', sans-serif;
  color: black;
}

.about {
  
  /* Tried to set all images as background img. Here's incase having individual img html elements doesn't work */
  
  /*background-image: url("https://terpconnect.umd.edu/~jweber15/VisualLessons/AuthorBio/AlexLookBack.png"),
  url("https://terpconnect.umd.edu/~jweber15/VisualLessons/AuthorBio/CityView.png"),
  url("https://terpconnect.umd.edu/~jweber15/VisualLessons/AuthorBio/SunsetView.png"),
  url("https://terpconnect.umd.edu/~jweber15/VisualLessons/AuthorBio/Hematological.png"),
  url("https://terpconnect.umd.edu/~jweber15/VisualLessons/AuthorBio/KobiLounging.png"),
  url("https://terpconnect.umd.edu/~jweber15/VisualLessons/AuthorBio/MDAPresident.png"),
  url("https://terpconnect.umd.edu/~jweber15/VisualLessons/AuthorBio/DentalHygiene.png"); 
  */
  
  /*
  background-repeat: no-repeat;
  background-position: right top, right bottom, left bottom, left top, left top, left top, left top; 
  */
  background-color:var(--turquoise); 
  min-width:100%; 
  /*margin-left: -35px;
  margin-right: -35px;*/
  padding-top: 125px;
}

.about p {
  font-size: 1.2rem;
  font-family: 'Acme', sans-serif;
  color: black;
  padding-left: 70 px;
}

.thebook {
  background-color: var(--white); 
  /*height:700px; */
  min-width:100%;
  /*margin-left: -35px;
  margin-right: -35px; */
  padding-top: 30px;
}

  .thebook h1 {
  font-family: 'Acme', sans-serif;
  font-size: 2rem;
  color: black ;
}

.thebook h2 {
  color: black ;
}

.thebook p {
  font-family: 'Acme', sans-serif;
  font-size: 1rem;
  color: black ;
}

.featurelist {
  background-color: var(--turquoise); 
  height: auto;
  min-width:100%; 
  /*margin-left: -35px;
  margin-right: -35px;*/
  padding-top: 70px;
} 

.featurelist h1 {
  font-family: 'Acme', sans-serif;
  font-size: 3rem;
}

.featurelist li {
  font-family: 'Acme', sans-serif;
  font-size: 1.0rem;
}

/*.thebookbuy{
background-color: red;
height: 3em;
}

.thebook button{
  height: 3rem;
  font-family: 'Acme', sans-serif;
  font-size: 2rem;
}*/

.blog {
  background-color: var(--turquoise); 
  height:600px;
  min-width:100%; 
  /*margin-left: -35px;
  margin-right: -35px; */
}

.pdfs {
  background-color: var(--white); 
  height:600px;
  min-width:100%;
  /*margin-left: -35px;
  margin-right: -35px; */
}

.contact {
  background-color: var(--turquoise); 
  height:600px;
  min-width:100%; 
  /*margin-left: -35px;
  margin-right: -35px; */
}