Team:UPF CRG Barcelona/style

/*iGEM Barcelona UPF CRG Stylesheet */

/*Color variables*/

root {
   --main-color: #f2f3f4;
   --var1-color: #99CFB2;
   --var2-color: #495F7F;
   --hovered-color: #589EFF;
   --menu-clicked-color: #AFAFB0;

}

/*Defaults*/

  • {
   font-family: "roboto_monoregular";

}

/*Body Style*/

body { 

   margin: 1em;
   background-color: var(--main-color);

}

/*Page Template*/

.grid-container { 

   display: grid;
   grid-template-areas: 'header' 'main' 'footer';
   grid-gap: 1em;

}

/*Main Areas*/

.header { 

   grid-area: header;

}

.main { 

   grid-area: main;

}

.footer { 

   grid-area: footer;
   grid-template-areas: 'contact_media copyright sponsors';
   display: inline;

}

/*navigation list*/

  1. navlist {
   padding: 7px 7px 10px 100px;
   margin: 0px 0px 20px 0px;
   text-align: center;
   letter-spacing: 2px;
   color: #3b444b;
   background: #AFAFB0;

}

  1. navlist li {
   list-style: none;
   margin: auto;
   display: inline;

}

  1. navlist li a {
   padding: 5px 0.75em;
   margin: auto;
   padding: 4px 4px 4px 4px;
   color: #fff;
   background: #AFAFB0;
   text-decoration: none;

}

  1. navlist li a:link {
   color: #fff;
   padding: 4px 4px 4px 4px;
   background: #AFAFB0;

}

  1. navlist li a:visited {
   color: #fff;
   padding: 4px 4px 4px 4px;
   background: #589eff;

}

  1. navlist li a:hover {
   color: #000;
   padding: 4px 4px 4px 4px;
   background: #e6bdbd;

}

  1. navlist li a#current {
   color: #000;
   padding: 4px 4px 4px 4px;
   margin: 0 0 20 0;
   background: #bba2c7

}

ul { 

   list-style-type: none;
   margin: auto;
   overflow: hidden;
   background-color: #333;
   text-align: center;

}

li a, .dropbtn { 

   display: inline-block;
   color: white;
   text-align: left;
   padding: 50px 16px;
   text-decoration: none;

}

li a: hover, .dropdown:hover .dropbtn { 

   position: absolute;

}

li.dropdown { 

   display: inline-block;

}

.dropdown-content { 

   display: none;
   position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);

}

.dropdown-content a { 

   color: black;
   padding: 10px 16px;
   text-decoration: none;
   display: block;

}

.dropdown-content a:hove { 

   background-color: #f1f1f1

}


/*Social Media*/

.twitter { 

   grid-area: twitter;

}

.instagram { 

   grid-area: instagram;

}

/*General Styling*/

.header>img, .header>div { 

   display: inline-block;
   vertical-align: middle;

}

.footer>img { 

   vertical-align: middle;

}