@font-face {
  font-family: "Arial - modified";
  size-adjust: 92%;
  
  src: local(Arial);
}

@font-face {
  font-family: "Georgia - modified";
  size-adjust: 92%;
  src: local(Georgia);
}

@font-face { /*see https://www.youtube.com/watch?v=zK-yy6C2Nck&t=108s*/
font-family: "mukta";
src: url('https://static.igem.wiki/teams/5427/fonts/mukta-regular-webfont.woff2') format('woff2'),
url('https://static.igem.wiki/teams/5427/fonts/mukta-regular-webfont.woff') format('woff');
}










  
:root{
  --primary-colour: #fffefd;
  --background-color: #fffefd, #fffefd;
  --text-colour: #1c1c1c;

  --header-gradient:#0f446d ,#0f446de2 ,#0f446dc4 ,#0f446db3 ,#0f446d97 ,#0f446d81 ,#0f446d6c ,#0f446d5f, #0f446d4f, #0f446d45, #0f446d46;

  --paragraph-subsection-color:#1e8bc3;

  --headermenu-border:rgba(2,48,71,0.2);
  --submenu-border: rgba(2,48,71,0.2);
  --menu-colour: var(--primary-colour);
  --submenu-colour: var(--primary-colour);
  --submenu-title-colour:rgba(204, 204, 198, 0.65);
  --menu-onhover-backgroundColor:rgba(204, 204, 198, 0.2);
  --menu-image-fill: #efd585;
  --menu-onhover-icon: #eeeadd, #eee8d6, #eee7cf, #eee5c9, #eee3c2, #efe1b8, #f0dfad, #f1dda3, #f3da93, #f5d782, #f6d471, #f8d15f;
  --menu-image-border: rgba(187, 188, 173, 0.2);
  --menu-image-background: #ebd69530;
  --menu-icon-onhover:#454343;


  
  --mobile-menu-popout-color: #454343;
  --mobile-menu-icon-background:rgba(187, 188, 173, 0.2);

  --attributions-background:rgba(187, 188, 173, 0.2);

  --table-rowColor:#ffe6a769;

  --team_popup_body_color:rgba(204, 204, 198, 0.1);

  --grey_lightDark_transition:rgba(187, 188, 173, 0.2);
  --vanilla_black_transition:#ffe6a7;


  --tooltip_color:#fffefd;
  --scrollbar_color:#269ad3;

  --image-background-colour: rgba(187, 188, 173, 0.2);
  --footer-colour: #ffe6a7;
  --footer-text-colour: #1c1c1c;

  --accordion-colour: rgba(204, 204, 198, 0.2);
  --accordion-hover-colour: #ffe6a7;
  --accordion-stationary-colour: rgba(187, 188, 173, 0.2);
  --accordion-text-colour: #1c1c1c;
  --linkedin-background-colour: #ffe6a7;
  --progress-bar: #ebd595;

  --references-numberColor:#1c1c1c;

  --timeline_colour:rgba(187, 188, 173, 0.2);
  --box_shadow_dot: transparent;

  --carousel_background_colour:rgba(204, 204, 198, 0.2);

  --sponsors_image_backgroundColor:rgba(187, 188, 173, 0.2);

  --blue: #1e8bc3;
  --dark_blue_for_text:#033f63;
  --vanilla:#ffe6a7;
  
  --lineSVG-colour: #1c1c1c;
  --members-header-colour: #033f63;

  --textbox-colour: #ffe6a7;

  --logo-margin: 22%;

  --learn-more-boxes: white;
  
  }
  .dark-theme{
    --primary-colour: #052b3a;
    --background-color: #06222e, #072633, #072a38, #082e3e, #083243, #083243, #083243, #083243, #082e3e, #072a38, #072633, #06222e;
    --text-colour: #f4f4f4;

    --header-gradient:#083243 ,#083243e2 ,#083243c4 ,#083243b3 ,#08324397 ,#08324381 ,#0832436c ,#0832435f, #0832434f, #08324345, #08324346;

    --paragraph-subsection-color:#ffe6a7;

    --headermenu-border:rgba(255, 246, 246, 0.10);
    --submenu-border: rgba(255, 246, 246, 0.10);
    --menu-colour: var(--primary-colour);
    --submenu-colour: rgba(6, 34, 46, 1);
    --submenu-title-colour:rgba(255, 246, 246, 0.20);
    --menu-onhover-backgroundColor:rgba(187, 188, 173, 0.073);
    --menu-image-fill: var(--blue);
    --menu-onhover-icon: #1e8bc3, #187bab, #146b94, #125c7e, #114d68, #0f455c, #0e3c50, #0d3444, #0b2f3e, #092b39, #072633, #06222e;
    --menu-image-background:#1e4d6145;
    --menu-image-border: rgba(255, 246, 246, 0.10);
    --menu-icon-onhover:#f4f4f4;


    --mobile-menu-popout-color: #022d48;
    --mobile-menu-icon-background:rgba(6, 34, 46, 0.6);

    --attributions-background:#ffe6a7;


    --table-rowColor:rgba(6, 34, 46, 0.6);

    --team_popup_body_color:rgba(6, 34, 46, 0.6);

    --tooltip_color:rgba(31, 31, 31, 1);
    --scrollbar_color:#ffe6a7;

    --grey_lightDark_transition:rgba(6, 34, 46, 0.6);
    --vanilla_black_transition:#1c1c1c;


    --progressTracker-colour: rgba(6, 34, 46, 0.6);
    --image-background-colour: #ffe6a7;
    --footer-colour: #ffe6a7;
    --footer-text-colour: #1c1c1c;

    --accordion-colour: rgba(6, 34, 46, 0.6);
    --accordion-hover-colour: #ffe6a7;
    --accordion-stationary-colour: rgba(255, 255, 255, 0.06);
    --accordion-text-colour: #ffe6a7;
    --accordion-hover-text-colour: #1c1c1c;
    --linkedin-background-colour: #131f33;
    --progress-bar: #ffe6a7;

    

    --references-numberColor:#ffe6a7;

    --timeline_colour:rgba(6, 34, 46, 0.6);
    --box_shadow_dot: 0px 0px 23px 4px rgba(235,214,149,0.25);

    --carousel_background_colour:rgba(6, 34, 46, 0.6);

    --sponsors_image_backgroundColor:#ffe6a7;

    --dark_blue_for_text:#fffefd;

    --lineSVG-colour: #ffe6a7;
    --members-header-colour: #ffe6a7;

    --textbox-colour: #033f63;

    --learn-more-boxes: var(--accordion-colour);
    

  }
  /*  --footer-colour: #ffe6a7; looks good*/
  
  /* for scrollbar*/
  ::-webkit-scrollbar {
    width: 9px;
    
  }
  
  ::-webkit-scrollbar-thumb {
    background-color: #695f5b96;
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar_color);
    cursor: pointer;
  }
  
  ::-webkit-scrollbar-track {
    background-color: #60606038;
  }
  /* for scrollbar*/
  ::-moz-selection { /* Code for Firefox */
    color: #1c1c1c;
    background: var(--vanilla);
  }
  
  ::selection {
    color: #1c1c1c;
    background: var(--vanilla);
  }  
  
  
  
  
  ol {
    list-style-type: none;
  }

  li::marker{
    color: var(--vanilla);
  }
  
  * {
      box-sizing: border-box;

    }
  
  p {
    margin:0;
    padding:0;
  
  }

  h1, h2, h3{
    margin:0;
    padding:0;
  }

  h1{
    font-size: 29px;
  }


  h2{
    font-size: 24px;
  }

  h3{
    font-size: 22px;
  }
  
  sup, sub{
    font-size: 11px;
  }
  .paragraph_sup_number{
    color: var(--references-numberColor);
  }


  body {
    margin: 0;
    height: 100vh;
    overflow: auto;
    display: flex;
    font-family: "mukta", "Arial - modified", "Georgia - modified";
    background-color: #1c1c1c;
    color: var(--text-colour);
    font-size: 18px;
    line-height: 1.5;
  }
  
  a{
    text-decoration: none;/*set text decoration to 'none' so you dont have any underlines*/
    color: var(--text-colour);/*font color*/
    display:inline-block;
  }
  
  aside,
  article {
  
      transition: all 390ms; /*time it takes for the transition of the menu to show up to occur*/
      scroll-behavior: smooth;/*that smooth scroll effect when clicking a link on the side menu*/
  }
  
  aside {
      position: absolute;
      width: 100%;/*How wide the menu should be!*/
      height: 100vh;
      display: flex;
      flex-direction: column;
      background-color: var(--primary-colour);
      transform: translateX(-100%);
  
  }
  

  
  article {
    position: relative;
    transform-origin: 10% 50%;
    width: 100%;
    background-image: linear-gradient(to right top, var(--background-color));
  }

  article .wrapper {
    margin: auto;
    padding-top: 3em;
    padding-bottom: 3em;
    padding-right:4em; /*gives whitespace to the right*/
    display:flex;
    padding-left:2em;
    justify-self: center;
    max-width: 2600px;/*stops the thing from going crazy when suuuper zoomed out. optional.*/  
  
  }

  
  /*The following is for the menu and 'X' icon*/
  #check {
    display: none;
  }
  #check + label {
      position: absolute;
      top: 0.4em;
      left: 0.2em;
      z-index: 1;
      display: flex;
      align-items: center;
      cursor: pointer;
      display:none;/*TO MAKE MENU BUTTON DISSAPPEAR FOR DESKTOP VIEW*/
      
  
  }
  
  
  #check + label svg {
      margin-right: 0.5em;
      stroke:var(--text-colour);
      opacity: 0.4;
      background-color: var(--mobile-menu-icon-background);
      border-radius: 4px;

  }
  #check + label svg path {
      transform-origin: 35% 50%;
      transition: 200ms cubic-bezier(0.06, 0.63, 0.91, 0.66);
  }
  #check:checked + label ~ aside {
      transform: none;
  }
  #check:checked + label::before {
      left: calc(25vw - 1em);
      transform: scale(1);
      visibility: visible;
      opacity: 1;
  }
  
  
  #check:checked + label svg #one {
      transform: rotate(45deg);

    }
  #check:checked + label svg #two {
      transform: rotate(-45deg);

    }
  #check:checked + label ~ article {
      z-index: -1;
      transform: translateX(25vw) scale(0.7);
      border-radius: 0.25em;
      -webkit-user-select: none;
      user-select: none;
      pointer-events: none;
      opacity:0.7; /*will slightly dark screen when mobile menu is upen*/
  }
  /*The above is for the menu and 'X' icon*/
  


  .project-image-mobile{
    border-radius: 5px;
    padding: 3px;
    margin-right:10px;

    border-color: transparent;
    border-width:0;
    fill:var(--menu-icon-onhover);
    background: linear-gradient(var(--menu-onhover-icon));
  }

  .mobile-link{
    display:flex;
    flex-direction:row;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left:6px;
    border-radius: 5px;
    width: 95%;
    height:100%;
    background-color: var(--menu-onhover-backgroundColor);
  }

  .mobile-menu-main-section{
    font-weight: bold;
    border-style:solid;
    border-color:#ffe6a7;
    border-width:0 0 2px 0;
  }

  .mobile-menu-section{
    padding-block:10px;
    padding-inline:9px;
    padding-left:20px;
  }

  .mobile-menu-padding-bullet-dissappear{
    list-style-type: none;
    padding: 0;
    margin: 0;
  }



  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /*THE FOLLOWING BELOW IS EXCLUSIVELY FOR THE TRADITIONAL HEADER STYLE MENU*/
  

  
  #traditionalheader{
    transition: 500ms linear;
  }
  
  
  .mega-menu,
  .mega-menu *{/* the star means anything thats inside that container. Very useful!!!*/
      box-sizing: border-box;
  }


  


  
  .mega-menu{


      margin:0 auto;
      right:0;



      background-color: transparent;
      /*background-color: var(--menu-colour);*/

      width:100%;
      height:52px;
      position:fixed;
  
      color: var(--text-colour);/*font color*/
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      
  
      border-style: solid;
      border-color: transparent;
      /*border-color: var(--headermenu-border);*/

      border-width: 0 0 1px 0;/*only have a bottom border color*/
      z-index: 1000;    

      
      
      
  }
  


  .mega-menu > ul {
    display:flex;
    margin:0 auto;
    justify-content: right; /*Horizontal alignment*/
    align-items: center; /*verticle alignment*/
    list-style-type: none;

}
  
  

  

  
  .mega-menu .menu-title{
    cursor: pointer;
    padding: 10px 18px;
    position: relative;
    font-size:15px;
    font-weight: bold;
    transition: all 150ms linear;
    color:#fffefd;

  }

  .mega-menu .menu-header-transition{/*for menuTransition.js*/
    color:var(--text-colour);
  }
  

  .mega-menu .has-submenu:hover .menu-title{
    color: var(--vanilla);
  }

  .menu-title:hover{/*more for 'home' part of menu*/
    color: var(--vanilla);
    
  }
  
  

  
  
  .mega-menu .submenu-container{
      opacity:0;
      position:absolute;
      pointer-events: none;/*prevents us on clicking the submenus outside of the hover effect*/
      top:26px;/*distance between popup and header*/
      z-index: 2000;

      


      left:18vw;
      right:18vw;
      
      
      
      min-height:310px;
      margin-top:15px;

      transform:translateY(10px);/*animation of hover menu*/
      transition: all 220ms ease-in;/*animation of hover menu*/

      background-color: var(--submenu-colour);

      outline-color:var(--submenu-border);
      outline-style: solid;
      outline-width:1px;
      border-radius: 10px;


      box-shadow:
      0.2px 1.9px 5.1px rgba(0, 0, 0, 0.1),
      0.6px 4.9px 12.9px rgba(0, 0, 0, 0.069),
      1.2px 9.9px 26.4px rgba(0, 0, 0, 0.056),
      2.6px 20.4px 54.4px rgba(0, 0, 0, 0.044),
      7px 56px 149px rgba(0, 0, 0, 0.031)
    ;


    }
  
  .mega-menu .has-submenu:hover .submenu-container {
      
      opacity:1;
      pointer-events: auto;
      transform: translateY(0);/*animation of hover menu*/

    
  }
  
  
  .submenu {
      background-color: transparent;
      display:flex;
      flex-direction:row;
  }



  .submenu-text-Section{
    width:57%;
  }

  #menu-renewool-logo{
    padding-top:9px;
    padding-left:20px;
    padding-right:10px;
    padding-bottom: 0;
    background-color:rgba(187, 188, 173, 0.073);
    border-radius:0 0 20px 0;
    transition: background-color 200ms linear;
  }



  .submenu-title{
    font-weight:bold;
    font-size:40px;
    transition: opacity 300ms ease-out;
    position: absolute;
    top:10px;
    left:25px;
    color: var(--submenu-title-colour);


  }



  .project-menu-header_container, .wetLab-menu-header_container, .dryLab-menu-header_container, .humanPractices-menu-header_container, .team-menu-header_container {
    position: relative;
    opacity:0;
    max-height: 310px;
    height:100%;
    width:100%;


  }
  
  .project-menu-header_overlay, .wetLab-menu-header_overlay, .dryLab-menu-header_overlay, .humanPractices-menu-header_overlay, .team-menu-header_overlay {
   position: absolute;
   left:0;
   top:0;


  }
  .project-menu-header_gradience, .wetLab-menu-header_gradience, .dryLab-menu-header_gradience, .humanPractices-menu-header_gradience, .team-menu-header_gradience{
    background:linear-gradient(to right, var(--header-gradient));
    width: 100%;
    height: 100%;
    position: absolute;
    right:0;
    border-radius: 8px;/*1px less than radius of -menu-header_container_img to avoid corner whites*/
    top:0;

    -webkit-mask-image: linear-gradient( to right,
    rgb(0, 0, 0, 1) 59%,
    rgb(0, 0, 0, 0) 100%
    );

    mask-image: linear-gradient( to right,
    rgb(0, 0, 0, 1) 59%,
    rgb(0, 0, 0, 0) 100%
    );
  }
  
  .project-menu-main-title, .wetLab-menu-main-title, .dryLab-menu-main-title, .humanPractices-menu-main-title, .team-menu-main-title{
    color:var(--vanilla);
    font-weight:bold;
    font-size:28px;
    margin-left:2vw;
    margin-top:3.3vw;
  }
  
  .project-menu-sub-title, .wetLab-menu-sub-title, .dryLab-menu-sub-title, .humanPractices-menu-sub-title, .team-menu-sub-title{
    max-width:850px;
    padding-right: 100px;
    color:#fffefd;
    font-size:15px;
    margin-left:2vw;
  }

  .project-menu-header_container_img, .wetLab-menu-header_container_img, .dryLab-menu-header_container_img, .humanPractices-menu-header_container_img, .team-menu-header_container_img{
    width: 100%;
    height:100%;
    display:block;
    border-radius: 9px;
    -webkit-mask-image: linear-gradient( to right,
    rgb(0, 0, 0, 1) 59%,
    rgb(0, 0, 0, 0) 100%
    );

    mask-image: linear-gradient( to right,
      rgb(0, 0, 0, 1) 59%,
      rgb(0, 0, 0, 0) 100%
      );
  }









  .submenu-options{
    width:43%;
    min-height:310px;

    padding-top:16px;
    padding-right:24px;
    
    padding-left:7px;


    display:flex;
    flex-direction:column;
    
  }


  .option-div{
    border-radius: 10px;

    margin-left: 10px;

    background-color:transparent;
    
    width:100%;
    max-width: 510px;
    min-height:50px;

    transition: all 170ms linear;
  }




  .submenu-link{
    display:flex;
    flex-direction:row;
    padding-top: 10px;
    padding-bottom: 8px;
    padding-left:13px;

    height:100%;
  }



  .option-div:hover{
    background-color: var(--menu-onhover-backgroundColor);
  }


  .project-image{
    fill:var(--menu-image-fill);
    transition: fill 170ms linear;
    border-radius: 5px;
    padding: 3px;
    border-color:var(--menu-image-border);
    border-style: solid;
    border-width:1px;
    margin-right:10px;
    background: var(--menu-image-background);

  }

  .mega-menu .option-div:hover .project-image{
    border-color: transparent;
    border-width:0;
    fill:var(--menu-icon-onhover);
    background: linear-gradient(var(--menu-onhover-icon));
  }
    

  /*for the searchbox vv*/

  .search-box{
    width:14vw;
    z-index:1001;
    position: relative;
    margin-right:20px;
    margin-left:15px;
  }
  
  .searchBox{
    width:14vw;
    background-color:var(--menu-onhover-backgroundColor);
    color:#fffefd;
    border-radius: 10px;
    padding-left: 5px;
    border-style: solid;
    border-width: 2px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-color: transparent;
    outline:none;
  }

  .searchBox:focus{
    border-color:var(--vanilla);

  }


  .search-icon{
    position:absolute;
    left:3px;
    margin-top:5px;
    background-color:transparent;
    fill:var(--text-colour);
  }

  .search-icon-headerTransition{
    fill:#fffefd;

  }

  .search-box:hover .search-icon{
    fill: #ebd595;
  }


  .result-box{
    max-height: 340px;
    overflow-y: scroll;
    width:27.9vw;
    top: 40px;
    right:-40px;
    border-radius: 10px 0px 0px 10px;
    justify-content: center; /*Horizontal alignment*/
    position: absolute;
    list-style-type: none;
    z-index:10;
    overflow-x: hidden;



    
    box-shadow:
    0.2px 1.9px 5.1px rgba(0, 0, 0, 0.1),
    0.6px 4.9px 12.9px rgba(0, 0, 0, 0.069),
    1.2px 9.9px 26.4px rgba(0, 0, 0, 0.056),
    2.6px 20.4px 54.4px rgba(0, 0, 0, 0.044),
    7px 56px 149px rgba(0, 0, 0, 0.031)
  ;




  }

  .result-box ul{
    width:27.3vw;
    background-color:var(--submenu-colour);
    cursor:pointer;
    font-size: 15px;
    list-style-type: none;
    padding:0;
    margin:0;


  }

  .result-box ul li{
    padding-bottom: 9px;



    padding-left:8px;
    transition: all 170ms linear;


  }

  .result-box ul li:hover{
    background-color: var(--menu-onhover-backgroundColor);
  }
  
  .result-box ul li:hover .project-image{
    border-color: transparent;
    border-width:0;
    fill:var(--menu-icon-onhover);
    background: linear-gradient(var(--menu-onhover-icon)); 

    
  }

  .result-box ul li .project-image{
    margin-right:3px;
    transform: translateY(6px);
  }

  /*for the searchbox ^^*/






  
  
  
  
  
  
  





  
  /*progress bar*/
  #progress-bar{
    --scrollProgress: 0%;
    height: 3px;
    width: var(--scrollProgress);
    background-color:var(--progress-bar);
    position: fixed;
    z-index: 1001;
  }
  
  
  .toggle-mode{
    cursor: pointer;
    margin-right:12px;
    transition: all 120ms linear;
  }

  .toggle-mode-headerTransition{
    fill:#fffefd;
  }
  
  .toggle-mode:hover{
    transform: scale(1.09);
    fill: var(--vanilla);
  }
    
  #fullscreen-button{
    cursor: pointer;
    transition: all 120ms linear;
    margin-right: 11px;

  }


  .fullscreen-button-headerTransition{
    fill:#fffefd;
  }

  #fullscreen-button:hover{
  transform: scale(1.09);
  fill: var(--vanilla);

}














@media (max-width: 1050px) {
  .submenu-text-Section{
    width:40%;
  }

  .submenu-options{
    width:60%;
  }


  .mega-menu .submenu-container{
    left:4vw;
    right:4vw;


  }


  
}


@media (max-width: 955px) {
  .search-box{
    width:90px;
  }

  .searchBox{
    width:90px;
  }


}



@media (max-width: 870px) {/*So when the width of screen is 870px or less: change the following classes. USEFUL FOR MOBILE-VIEW*/





  #check + label {
        position: absolute;
        top: 0.4em;
        left: 0.2em;
        z-index: 15;
        display: flex;
        align-items: center;
        cursor: pointer;
        display:block;
  }
  

  .mega-menu{
      display:none;
  }

  body{
    height: 100vh;
  }

  p {
    font-size: 15px;
  }
  sup, sub{
    font-size: 8px;
  }  

  .mobile-menu-main-section{
    font-size: 18px;
  }
  

  #progress-bar{/*to make progress bar dissappear*/
    display: none;
  }



  article .wrapper {
    padding-right: 12px;
  }

}