Template:ETH Zurich/header css

header {

   background-color: var(--header-background-color);
   box-shadow: 0 4px 4px -4px var(--dark-background-color);
   color: var(--dark-text-color);
   display: flex;
   flex-flow: row wrap;
   font-family: var(--cate-sf-font);
   margin-top: 16px;
   position: static;
   top: 16px;
   z-index: 1;

}

nav a, nav a:visited {

   color: inherit;

}

.dry {

   color: blue;

}

.wet {

   color: red;

}

.logo {

   display: block;
   flex: 0 1 auto;
   padding: 0px;

}

.logo > img {

   display: block;
   padding: 10px 5px;
   width: 80px;

}

.main-menu {

   align-items: normal;
   display: flex;
   flex-flow: column wrap;
   justify-content: normal;
   letter-spacing: 0.5px;
   line-height: 0.75em;
   list-style-type: none;
   margin: 0;
   padding: 0;

}

.main-menu > li {

   display: block;
   flex: 1 1 auto;
   margin: 0;
   position: relative;
   white-space: nowrap;

}

.main-menu li:last-child > .submenu {

   left: auto;
   right: 0;

}

.main-menu > li > .menu-entry, .submenu li > a {

   display: block;
   font-weight: normal;
   padding: 10px;
   text-decoration: none;
   text-transform: uppercase;

}

.main-menu > li:hover::before {

   background: linear-gradient(
       90deg,
       var(--light-background-color),
       var(--medium-background-color) 50%,
       var(--light-background-color) 100%
   );
   content: "";
   height: 2px;
   left: 0;
   width: 100%;
   position: absolute;
   top: 0;

}

.main-menu > li:hover > .submenu {

   display: flex;

}

.submenu {

   background-color: var(--light-background-color);
   box-shadow:-5px 5px 5px -5px var(--dark-backrgound-color);
   display: none;
   flex-flow: column nowrap;
   justify-content: center;
   left: 10px;
   line-height: 0.75em;
   list-style-type: none;
   margin: 0;
   min-width: 100%;
   opacity: 1;
   padding: 0;   
   position: relative;
   z-index: 2;

}

div.submenu {

   align-items: flex-start;
   flex-flow: row nowrap;

}

.submenu li {

   color:  var(--dark-text-color);
   display: block;
   flex: 1 1 auto;
   margin: 0;
   position: relative;
   white-space: nowrap;

}

.submenu li > a {

   text-transform: none;

}

.submenu li:hover > a {

   /* border-left-color: var(--light-gray); */
   background-color: var(--dark-background-color);
   color: var(--light-text-color);

}

.subsubmenu {

   display: flex;
   flex-flow: column nowrap;
   justify-content: center;
   line-height: 0.75em;
   list-style-type: none;
   margin: 0;
   padding: 0;

}

.subsubmenu span {

   display: block;
   padding: 10px;
   font-weight: bold;

}

@media (min-height: 500px) {

   header {
       align-items: center;
       justify-content: space-between;
       position: -webkit-sticky; /* Unpleasant safari hack */
       position: sticky;
   }

}

@media (min-width: 500px) {

   .col-to-row {
       flex-direction: row;
   }

   .logo {
       padding: 5px;
   } 

   .enlarge-line-height {
       line-height: 1.5em;
   }

   .submenu {
       box-shadow: 0 5px 5px var(--dark-background-color);
       left: 0px;
       position: absolute;
   }

   .submenu, .subsubmenu {
       line-height: 1em;
   }

}