body { 
  margin-top: 55px;
 }

 /* THIS IS THE POSITIONING OF THE ITEMS IN THE MENU BANNER*/ 
.left-aligned { 
  margin-left: auto;
} 

.bg-dark { 
  background-color: #2E641F !important; 
}

/* header image*/
.bg-hero { 
background-image:url("https://static.igem.wiki/teams/5124/final-background.jpg");
  color:#331800;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 position: relative;
 height: 100%;
 width: 100%;
 }

.center {
    text-align: center;
    margin: auto; 
  }

  
body { padding-top: 0px;
    background-color: #f3eede; /*this changes the background colour*/
    }   

    /*font appliations for different types of text */ 
p {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
h3 {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
h2 {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
h4 {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
h1 {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
nav {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
li {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
a {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
summary {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
td {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
th {font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}



/* CALLOUT */  
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #F1E8D7; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* shadow box container*/ 
.body-container {
  padding-inline: 3rem;
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-bottom: 3rem;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-top: 5rem;
  background-color: #98A56B;
  border-radius: 10px;
  box-shadow: -1px 4px 25px -4px rgba(0,0,0,0.5);
  -webkit-box-shadow: -1px 4px 25px -4px rgba(0,0,0,0.5);
  -moz-box-shadow: -1px 4px 25px -4px rgba(0,0,0,0.5);
}


/*sorting out the content sidebar, this should be for main body text*/
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* reference box*/ 
.references-container {
  padding-inline: 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 2rem; /* space above the callout box*/
  margin-bottom: 2%;
  margin-left: 1rem;
  margin-right: 1rem;
  background-color: #D0A66C;
  border-radius: 10px;
  color:#331800;
  object-fit: relative;
  box-shadow: -1px 4px 25px -4px rgba(0,0,0,0.5);
  -webkit-box-shadow: -1px 4px 25px -4px rgba(0,0,0,0.5);
  -moz-box-shadow: -1px 4px 25px -4px rgba(0,0,0,0.5);
  transition: display 0.5s
  text-align:left;
}

/*big box for team page*/
.bigbox {
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding-inline: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 1rem; /* space above the callout box*/
  margin-bottom: 2rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  background-color: #98A56B;
  border-radius: 10px;
  box-shadow: -1px 4px 25px -4px rgba(74, 74, 74, 0.5);
  -webkit-box-shadow: -1px 4px 25px -4px rgba(70, 70, 70, 0.5);
  -moz-box-shadow: -1px 4px 25px -4px rgba(74, 73, 73, 0.5);
}
/*box at top of body*/
.abstractbox {
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-top: 1rem; /* space above the callout box*/
  margin-bottom: 2rem;
  margin-left: 2rem;
  margin-right: 2rem;
  background-color: #98A56B;
  border-radius: 10px;
  box-shadow: -1px 4px 25px -4px rgba(74, 74, 74, 0.5);
  -webkit-box-shadow: -1px 4px 25px -4px rgba(70, 70, 70, 0.5);
  -moz-box-shadow: -1px 4px 25px -4px rgba(74, 73, 73, 0.5);
}

/*style for team image photos*/ 
#team-member-image {
  padding-bottom: 3%;
}

  /*sidebar*/
  
  .sidebar {
    max-width: 1000px;
    margin: 1rem auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1rem;
    position: sticky;
    top: 50px;
    width:20%;
    padding: 10px;
  
    @media (min-width: 32rem) {
      grid-template-columns: 250px minmax(10px, 1fr);
    }
  
    > * {
      padding: 1rem;
    }
  }
  
  aside {
    position: sticky;
    top: 70px;
    align-self: start;
  }
  @media only screen and (max-width: 768px) {

    .sidebar {
      display: none;
    }
  
    .sidebar-main-content {
      flex: 1; 
    }
  }
  
  @media only screen and (min-width: 769px) and (max-width: 1024px) {
    .sidebar {
      flex: 0 0 20%;
    }
  
    .sidebar-main-content {
      flex: 0 0 80%; 
    }
  }

/*animation*/
#cow-eating-animation {
  position: relative;
}

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }


  
/* smooth scroll test- Anouska */
html {
  scroll-behavior: smooth;
}

.fade_from_left { 
  position: 'relative';
  opacity: '0';
  left: '-6vw'; 
}

/*back to top button*/


.center-object {
  display: grid;
  place-items: center;
}

.center-image {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
}

/*header background*/
h1.header-background {
  background-color: rgba(197, 215, 131, 0.8);
  border-radius: 10px;
  padding: 10px;
  width: 20%;
  display: inline;
}