/* COLOR PALETTE 
polynesian-blue: #064789ff;
ucla-blue: #427aa1ff;
alice-blue: #ebf2faff;
asparagus: #679436ff;
apple-green: #a5be00ff;
*/
/* GLOBAL STYLES 
-----------------------------*/

html {
    box-sizing: border-box;
    font-size: 62.5%; /*sets default font size to 10px*/
  }
  h1,h2,h3 {
    margin: 0;
  }
  h1 {
    line-height: 0.85;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }
  html, body {
    height: 100%;
  }

body {
    background: #ebf2faff;
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.5rem;
    line-height: 1.35;
}
@media screen and (max-width: 600px){
body    {font-size: 1.0rem;
}
h1 {font-size: 1.5rem;
}
h2 {font-size: 1.3rem;
}
h3 {font-size: 1.2rem;
}
}
/* Links and Buttons */

a {
    color: #a5be00ff;
}
a:hover {
    color: #064789ff;
    text-decoration: none;
}
.btn {
    background:  #679436ff;
    color: #ebf2faff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.2rem;
    display: inline
    padding: 10px;
    letter-spacing: .1em;
    line-height: 1;
    border-radius:4px;
    margin-right: 15px;
}
@media screen and (max-width: 400px){
.btn {    
    font-size: 1.0rem;
    display: flex;
    margin-right: 1px;
    margin-bottom: 10px;
    }
}
/*content-wrapper dimensions. Currently set to a max witdh for the flexbox. You can change that max width, and you can alter the padding to get elements closer or further from the border of the box. */
.content-wrapper {
    margin: 0 auto;
    max-width: 900px;
    padding: 20px
}
@media screen and (max-width: 690px){
.content-wrapper {
    padding: 10px;
}
}
/* No bullet list code */
.nobull {
    list-style-type: none;
   }
    /* HEADER 
------------------------------*/
/* responsive header including buttons */
/* Style the header with a grey background and some padding */
.header {
    overflow: hidden;
  }
/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
    font-size: 32px;
    font-weight: bold;
  }
  /* Style the header links */
.header a {
    float: left;
    color: black;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 18px;
    line-height: 25px;
    border-radius: 4px;
  }
/* Change the background color on mouse-over */
.header a:hover {
    background-color: #064789ff;
    color: white;
  }
  
  /* Style the active/current link*/
  .header a.active {
    background-color: #679436ff;
    color: #ebf2faff;
  }
  
  /* Float the link section to the right */
  .header-right {
    float: right;
  }
  /* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
  @media screen and (max-width: 550px) {
    .header a.logo {
        font-size: 20px
    }
  }
  @media screen and (max-width: 690px) {
    .header a {
      float: none;
      display: block;
      text-align: left;
      font-size: 14px;
      line-height: 1.2;
    }
    .header-right {
      float: none;
    }
  }

   /* HOME
-----------------------------*/
.home {
    background: url(../images/bg-regs.jpeg);
    background-size: cover;
}
.home .content-wrapper {
    flex-grow: 1 0 auto;
}
.home .content-wrapper img {
    float: right;
    margin-left: 20px;
}

.content-bg {
    background: rgb(255 255 255 / 0.75);
    padding: 30px;
}
@media screen and (max-width: 550px){
    .home .content-wrapper img {
        margin-left: 5px;
        max-width: 100px;
        max-height: 100px;
    }
}
@media screen and (max-width: 500px) {
.home {
    background: #ebf2faff;
}    
}

/* Writing
-----------------------------*/

.writing {
    background: url(../images/bg-regs.jpeg);
    background-size: cover;
    background-position: top;
}
.writing .content-wrapper {
    flex-grow: 1 0 auto;
}
.writing .content-wrapper img {
    float: left;
    margin-right: 20px;
}
.writing .content-bg {
    background: rgb(255 255 255 / 0.75);
    padding: 30px;
}
.writing-section {
    margin-bottom: 50px;
}
.writing-section {
    border-bottom: 3px solid #427aa1ff;
}
@media screen and (max-width: 690px){
.writing .content-wrapper img {
        margin-right: 15px;
        max-width: 100px;
        max-height: 150px;
}
@media screen and (max-width: 500px){
.writing {
    background: #ebf2faff;
}
}
/* Books */
/* .project-item {
    display: flow-root;
    margin: 30px 0;
} */
/*.project-item img {
    float: left;
    margin-right: 20px;*/
}

/*CURRENT RESEARCH
-----------------------------*/
.currentresearch {
    background: url(../images/bg-regs.jpeg);
    background-size: cover;
    background-position: top;
}
.currentresearch .content-wrapper {
    flex-grow: 1 0 auto;
}
.currentresearch .content-wrapper img {
    float: right;
    margin-left: 20px;
}
.currentresearch .content-bg {
    background: rgb(255 255 255 / 0.75);
    padding: 30px;
}
@media screen and (max-width: 550px){
.currentresearch .content-wrapper img {
    margin-left: 5px;
    max-width: 100px;
    max-height: 100px;
    }
}
@media screen and (max-width: 500px) {
.currentresearch {
    background: #ebf2faff;
    }
}


/*TEACHING
-----------------------------*/
.teaching {
    background: url(../images/bg-regs.jpeg);
    background-size: cover;
    background-position: top;
}
.teaching .content-wrapper {
    flex-grow: 1 0 auto;
}
.teaching .content-wrapper img {
    float: right;
    margin-left: 20px;
}
.teaching .content-bg {
    background: rgb(255 255 255 / 0.75);
    padding: 30px;
}
@media screen and (max-width: 550px) {
.teaching .content-wrapper img {
    margin-left: 5px;
    max-width: 100px;
    max-height: 100px;
}
}
@media screen and (max-width: 500px) {
.teaching {
    background: #ebf2faff;
    }
}

/*FOOTER
-----------------------------*/
footer {
   /* background:  rgb(255 255 255 / 0.75); */
    color:  #ebf2faff;
    display: flex;
    justify-content: left;
   /* padding: 0 20px;
    max-width: 900px; */
}
footer a {
    color: #000000;
    text-decoration: none;
}
footer a:hover {
    color: #ebf2faff;
    text-decoration: none;
}
.socials {
    list-style-type: none;
    padding: 0;
}
.socials li {
    display: inline-block;
    margin-left: 10px;
}
.socials img {
    width: 32px;
}
.socials img:hover {
    opacity: 0.5;
}
@media screen and (max-width: 500px) {
footer {
    color: #427aa1ff;
}
}
@media screen and (max-width: 600px) {
.socials li {
    margin-left: 5px;
}
.socials img {
    width: 24px;
}
}