Difference between revisions of "Team:Rotterdam HR"

Line 1: Line 1:
−
<html>
+
/* ----- color palet ----- */
−
<head>
+
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
<link rel="stylesheet" href="https://2018.igem.org/Template:Rotterdam_HR/css/main?action=raw&ctype=text/css">
+
−
<style>
+
  
−
.menu #index, .menu #index-category {
+
:root {
−
color: goldenrod;
+
--color-primary: #1B5E20;
−
}
+
--color-secondary: #C8E6C9;
−
+
−
</style>
+
−
</head>
+
−
<body>
+
  
−
<style>
+
--color-dark: rgb(50, 50, 50);
−
.header::before {
+
 
−
background: black url("https://static.igem.org/mediawiki/2018/c/c1/T--Rotterdam_HR--graffiti.jpeg") no-repeat left;
+
--color-wetlab: #1B5E20;
−
  background-size: 100%;
+
 +
--color-hardware: #3949AB;
 +
 
 +
--color-software: #424242;
 +
--color-software-secondary: #6a6a6a;
 +
}
 +
 
 +
/* ------ PAGE ------ */
 +
.page-index, .page-description {
 +
background: var(--color-secondary);
 +
}
 +
.page-software {
 +
background: var(--color-software-secondary);
 +
}
 +
 
 +
/* ----- iGEM STYLE FIXES ----- */
 +
 
 +
ul {
 +
list-style-image: none;
 +
}
 +
 
 +
#content {
 +
width: 100%;
 +
margin: 0;
 +
padding: 0;
 +
background: none;
 +
}
 +
 
 +
#bodyContent a[href ^="https://"], .link-https {
 +
    background: whitesmoke;
 +
    padding: 5px 0;
 +
}
 +
 
 +
#HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page p, #HQ_page span, #HQ_page a{
 +
font-family: candara;
 +
line-height: initial;
 +
}
 +
 
 +
#bodyContent h3, #bodyContent h4, #bodyContent h5 {
 +
margin-bottom: 0;
 +
padding: 0 5px;
 +
line-height: 1.1em;
 +
}
 +
 
 +
#top_title, #top_menu_under {
 +
display: none;
 +
}
 +
 
 +
#top_menu_14 {
 +
position: initial;
 +
}
 +
 
 +
#top_menu_inside #user_item {
 +
margin-right: 0;
 +
float: none;
 +
}
 +
#top_menu_inside {
 +
margin: 0 auto;
 +
width: 90%;
 +
}
 +
 
 +
body {
 +
font-family: candara;
 +
background: white;
 +
  font-size: 13px;
 +
}
 +
 
 +
/* ----- NAVBAR ----- */
 +
.menu {
 +
display: flex;
 +
}
 +
 
 +
.menu,
 +
.sub-menu {
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style: none;
 +
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
 +
}
 +
 
 +
.menu .main-item {
 +
  position: relative;
 +
  display: flex;
 +
  flex-direction: column;
 +
  align-items: center;
 +
  flex: 1;
 +
  height: 44px;
 +
  padding: 5px;
 +
  text-align: center;
 +
  text-decoration: none;
 +
  color: white;
 +
  background: var(--color-dark);
 +
fill: currentColor;
 +
z-index: 1;
 +
}
 +
 
 +
.menu .main-item::before {
 +
  content: "";
 +
  position: absolute;
 +
  bottom: 0;
 +
  left: 0;
 +
  right: 0;
 +
  height: 3px;
 +
  background: currentColor;
 +
  transform: scale(0, 1);
 +
  transform-origin: left;
 +
  transition: transform 200ms;
 +
}
 +
 
 +
.menu .home-button {
 +
  width: 200px;
 +
  position: relative;
 +
}
 +
 
 +
.menu .home-button a {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: -80px;
 +
  border-radius: 0 0 50% 50%;
 +
  background: var(--color-dark);
 +
}
 +
 
 +
.sub-menu {
 +
  position: absolute;
 +
  top: 54px;
 +
  left: 0;
 +
  right: 0;
 +
  transform: scale(1, 0);
 +
  transform-origin: top;
 +
  transition: transform 250ms;
 +
}
 +
 
 +
.sub-menu .sub-item {
 +
  padding: 10px 5px;
 +
  border-top: rgba(255, 255, 255, 0.25) solid 2px;
 +
  color: var(--color-dark);
 +
transition: color 200ms;
 +
min-width: 96px;
 +
max-height: fit-content;
 +
}
 +
 
 +
.menu .construction::after {
 +
  content: url('https://static.igem.org/mediawiki/2018/4/4a/T--Rotterdam_HR--wrench.svg');
 +
  position: absolute;
 +
  top: 5px;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 5px;
 +
  display: flex;
 +
  flex-direction: column;
 +
  align-items: center;
 +
  font-size: 12px;
 +
  color: orange;
 +
  background: var(--color-dark);
 +
  transform: scale(1, 0);
 +
  transform-origin: bottom;
 +
  transition: transform 250ms;
 +
}
 +
 
 +
.menu .main-item:hover::before {
 +
  transform: scale(1, 1);
 +
}
 +
 
 +
 
 +
.menu .construction:hover::after {
 +
  transform: scale(1, 1);
 +
}
 +
 
 +
.menu .main-item:hover .sub-menu {
 +
  transform: scale(1, 1);
 +
}
 +
 
 +
.menu .main-item:hover .sub-menu .sub-item {
 +
  color: white;
 +
  transition: color 200ms 100ms;
 +
}
 +
 
 +
#menuToggle a {
 +
  text-decoration: none;
 +
  color: white;
 +
  transition: color 0.3s ease;
 +
}
 +
 
 +
#menuToggle a:hover {
 +
  color: gray;
 +
}
 +
 
 +
#menuToggle {
 +
  display: none;
 +
  position: relative;
 +
  top: -35px;
 +
left: 20px;
 +
width: 50px;
 +
  z-index: 1;
 +
  -webkit-user-select: none;
 +
  user-select: none;
 +
}
 +
 
 +
#menuToggle input {
 +
  display: block;
 +
  width: 40px;
 +
  height: 32px;
 +
  position: absolute;
 +
  top: -7px;
 +
  left: -5px;
 +
 
 +
  cursor: pointer;
 +
 
 +
  opacity: 0; /* hide this */
 +
  z-index: 2; /* and place it over the hamburger */
 +
 
 +
  -webkit-touch-callout: none;
 +
}
 +
 
 +
/*
 +
* Just a quick hamburger
 +
*/
 +
#menuToggle span {
 +
  display: block;
 +
  width: 33px;
 +
  height: 4px;
 +
  margin-bottom: 5px;
 +
  position: relative;
 +
  background: white;
 +
  border-radius: 3px;
 +
 
 +
  z-index: 1;
 +
 
 +
  transform-origin: 4px 0px;
 +
 
 +
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 +
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
 +
              opacity 0.55s ease;
 +
}
 +
 
 +
#menuToggle span:first-child
 +
{
 +
  transform-origin: 0% 0%;
 +
}
 +
 
 +
#menuToggle span:nth-last-child(2)
 +
{
 +
  transform-origin: 0% 100%;
 +
}
 +
 
 +
/*
 +
* Transform all the slices of hamburger
 +
* into a crossmark.
 +
*/
 +
#menuToggle input:checked ~ span
 +
{
 +
  opacity: 1;
 +
  transform: rotate(45deg) translate(-2px, -1px);
 +
  background: white;
 +
}
 +
 
 +
/*
 +
* But let's hide the middle one.
 +
*/
 +
#menuToggle input:checked ~ span:nth-last-child(3)
 +
{
 +
  opacity: 0;
 +
  transform: rotate(0deg) scale(0.2, 0.2);
 +
}
 +
 
 +
/*
 +
* Ohyeah and the last one should go the other direction
 +
*/
 +
#menuToggle input:checked ~ span:nth-last-child(2)
 +
{
 +
  transform: rotate(-45deg) translate(0, -1px);
 +
}
 +
 
 +
/*
 +
* Make this absolute positioned
 +
* at the top left of the screen
 +
*/
 +
#mobile-menu
 +
{
 +
  position: absolute;
 +
width: 200px;
 +
  margin: -100px 0 0 -50px;
 +
  padding: 50px;
 +
  padding-top: 125px;
 +
  background: var(--color-dark);
 +
  list-style-type: none;
 +
  -webkit-font-smoothing: antialiased;
 +
/* to stop flickering of text in safari */
 +
 
 +
  transform-origin: 0% 0%;
 +
  transform: translate(-100%, 0);
 +
 
 +
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
 +
}
 +
 
 +
#mobile-menu li
 +
{
 +
  padding: 5px 0;
 +
  font-size: 16px;
 +
  height: 0.75em;
 +
  display: flex;
 +
  align-items: center;
 +
}
 +
 
 +
#mobile-menu li svg {
 +
  width: 1em;
 +
  height: 1em;
 +
  margin-right: 10px;
 +
  fill: currentColor;
 +
}
 +
 
 +
#mobile-menu li span {
 +
  width: 100%;
 +
  height: 0.75em;
 +
  background: none;
 +
}
 +
 
 +
/*
 +
* And let's slide it in from the left
 +
*/
 +
#menuToggle input:checked ~ ul
 +
{
 +
  transform: none;
 +
}
 +
 
 +
@media only screen and (max-width: 1400px) {
 +
  .main-item {
 +
    font-size: smaller;
 +
  }
 +
 
 +
}
 +
 
 +
@media only screen and (max-width: 1060px) {
 +
.home-button {
 +
display: none;
 
}
 
}
  
−
@media screen and (max-width: 720px) {
+
}
−
.header::before {
+
 
−
background: black url("https://static.igem.org/mediawiki/2018/0/0c/T--Rotterdam_HR--Graffiti-banner_small.jpeg") no-repeat left;
+
@media only screen and (max-width: 900px) {
−
background-size: 100% 100%;
+
  .menu {
−
}
+
    height: 50px;
 +
    width: 100%;
 +
    background: var(--color-dark);
 +
  }
 +
 
 +
  .menu .main-item {
 +
    display: none;
 
}
 
}
−
</style>
+
 +
#menuToggle {
 +
display: block;
 +
  }
 +
 
 +
}
 +
 
 +
/* ------ HEADER ------ */
 +
 
 +
.header {
 +
  position: relative;
 +
  height: 40vh;
 +
  width: 100%;
 +
  background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.5), rgba(255,255,255,0.3));
 +
  display: flex;
 +
  align-items: center;
 +
  text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);
 +
}
 +
 
 +
.header::before {
 +
  content: '';
 +
  position: absolute;
 +
  z-index: -1;
 +
  top: 0;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
}
 +
 
 +
.header div {
 +
  margin: auto;
 +
  display: flex;
 +
  flex-direction: column;
 +
align-items: center;
 +
}
 +
 
 +
.header div svg {
 +
  width: 160px;
 +
  height: 160px;
 +
}
 +
 
 +
.header div h1 {
 +
padding: 0;
 +
  margin-top: 0;
 +
  font-size: 50px;
 +
}
 +
 
 +
/* ------ FOOTER ------ */
 +
 
 +
.multiple-items-footer {
 +
margin: 0 auto;
 +
display: flex;
 +
justify-content: space-around;
 +
width: 250px;
 +
}
 +
 
 +
.item-footer {
 +
width: 50px;
 +
height: 50px;
 +
margin: 5px;
 +
filter: invert(50%);
 +
transition: 0.4s;
 +
}
 +
 
 +
.item-footer:hover {
 +
filter: invert(100%);
 +
transition: 0.1s;
 +
}
 +
 
 +
#footer {
 +
padding: 40px 0;
 +
background: rgb(50, 50, 50);
 +
text-align: center;
 +
color: white;
 +
font-size: 18px;
 +
}
 +
 
 +
/* ------ CONTAINERS ------ */
 +
 
 +
.nav-cards {
 +
  display: flex;
 +
  flex-wrap: wrap;
 +
  justify-content: center;
 +
  margin: 20px auto;
 +
}
 +
 
 +
.nav-card {
 +
  width: 180px;
 +
  height: 180px;
 +
  margin: 10px;
 +
  position: relative;
 +
  color: white;
 +
  text-align: center;
 +
  background: var(--color-software);
 +
  box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
 +
  transition: 200ms;
 +
  border-radius: 3px;
 +
}
 +
 
 +
.nav-card svg {
 +
  position: absolute;
 +
  fill: white;
 +
  width: 50%;
 +
  height: 50%;
 +
  top: 10%;
 +
  left: 25%;
 +
}
 +
 
 +
.nav-card h2 {
 +
  position: absolute;
 +
  bottom: 0;
 +
  left: 5px;
 +
right: 5px;
 +
color: white;
 +
}
 +
 
 +
.nav-card::before, .nav-card::after {
 +
  content: '';
 +
  position: absolute;
 +
  top: 5px;
 +
  left: 5px;
 +
  right: 5px;
 +
  bottom: 5px;
 +
  transition: transform 400ms;
 +
}
 +
 
 +
.nav-card::before {
 +
  border-top: white solid 1px;
 +
  border-bottom: white solid 1px;
 +
  transform: scale(0, 1);
 +
}
 +
 
 +
.nav-card::after {
 +
  border-left: white solid 1px;
 +
  border-right: white solid 1px;
 +
  transform: scale(1, 0);
 +
}
 +
 
 +
.nav-card:hover::before {
 +
  transform: scale(1, 1);
 +
}
 +
 
 +
.nav-card:hover::after {
 +
  transform: scale(1, 1);
 +
}
 +
 
 +
.text-container {
 +
  position: relative;
 +
  text-align: center;
 +
  margin: 60px auto;
 +
  padding: 10px;
 +
  max-width: 1000px;
 +
}
 +
 
 +
.text-container h1 {
 +
  font-size: 40px;
 +
  position: relative;
 +
  color: var(--color-primary);
 +
}
 +
 
 +
.text-container h1::after {
 +
  content: '';
 +
  position: absolute;
 +
  bottom: 0;
 +
  left: 10%;
 +
  right: 10%;
 +
  height: 4px;
 +
  border-radius: 2px;
 +
  background: currentColor;
 +
}
 +
 
 +
.text-container p {
 +
  margin-bottom: 20px;
 +
  font-size: 24px !important;
 +
  text-align: center !important;
 +
}
  
−
<div class="header">
+
.nav-button {
−
  <div>
+
position: relative;
−
<div id="icon"></div>
+
  padding: 10px 20px;
−
<script> $('#icon').load("https://2018.igem.org/Template:Rotterdam_HR/icon/index?action=raw&ctype=text/html"); </script>
+
   background: var(--color-primary);
−
    <h1 style="background: none;">Home</h1>
+
  color: white;
−
   </div>
+
  text-decoration: none;
−
</div>
+
   box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
−
<div class="page-index">
+
   font-size: 24px !important;
−
<div id="navbar" style="position: -webkit-sticky;position: sticky;top: -2px; width: 100%; z-index: 100; margin-bottom: 100px;"></div>
+
}
−
<div class="text-container">
+
−
   <h1>Team Rotterdam</h1>
+
−
  <p style="font-size: 20px; text-align: center;">
+
−
    We are team Rotterdam, the first iGEM team from the Rotterdam University of Applied Sciences. We are a team with multiple disciplinaries: five biology and medical laboratory research students; two chemistry students; two electrical engineer students and even a computer science student. Together we make an efficient and effective team.
+
−
    <br><br>
+
−
    We stand out because of our focus on the hardware due to our two electrical engineers. We also have the ability to create powerful software to bolster our efficiency.
+
−
   </p>
+
−
  <a href="https://2018.igem.org/Team:Rotterdam_HR/Team" class="nav-button" style="color: white; text-decoration: none;">To the team page</a>
+
−
</div>
+
  
−
<div class="text-container">
+
.nav-button::before {
−
<h1>Relevant pages</h1>
+
  content: '> ';
−
<div class="nav-cards">
+
}
−
<a href="https://2018.igem.org/Team:Rotterdam_HR/Description" class="nav-card">
+
−
<h2>Project Description</h2>
+
−
<svg viewBox="0 0 24 24">
+
−
<path d="M9.46,6.28L11.05,9C8.47,9.26 6.5,11.41 6.5,14A5,5 0 0,0 11.5,19C13.55,19 15.31,17.77 16.08,16H13.5V14H21.5V16H19.25C18.84,17.57 17.97,18.96 16.79,20H19.5V22H3.5V20H6.21C4.55,18.53 3.5,16.39 3.5,14C3.5,10.37 5.96,7.2 9.46,6.28M12.74,2.07L13.5,3.37L14.36,2.87L17.86,8.93L14.39,10.93L10.89,4.87L11.76,4.37L11,3.07L12.74,2.07Z"></path>
+
−
</svg>
+
−
</a>
+
−
<a href="https://2018.igem.org/Team:Rotterdam_HR/Team" class="nav-card">
+
−
<h2>Team Rotterdam</h2>
+
−
<svg viewBox="0 0 24 24">
+
−
<path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z" />
+
−
</svg>
+
−
</a>
+
−
<a href="https://2018.igem.org/Team:Rotterdam_HR/Hardware" class="nav-card">
+
−
<h2>Hardware</h2>
+
−
<svg viewBox="0 0 24 24">
+
−
<path d="M15.9,18.45C17.25,18.45 18.35,17.35 18.35,16C18.35,14.65 17.25,13.55 15.9,13.55C14.54,13.55 13.45,14.65 13.45,16C13.45,17.35 14.54,18.45 15.9,18.45M21.1,16.68L22.58,17.84C22.71,17.95 22.75,18.13 22.66,18.29L21.26,20.71C21.17,20.86 21,20.92 20.83,20.86L19.09,20.16C18.73,20.44 18.33,20.67 17.91,20.85L17.64,22.7C17.62,22.87 17.47,23 17.3,23H14.5C14.32,23 14.18,22.87 14.15,22.7L13.89,20.85C13.46,20.67 13.07,20.44 12.71,20.16L10.96,20.86C10.81,20.92 10.62,20.86 10.54,20.71L9.14,18.29C9.05,18.13 9.09,17.95 9.22,17.84L10.7,16.68L10.65,16L10.7,15.31L9.22,14.16C9.09,14.05 9.05,13.86 9.14,13.71L10.54,11.29C10.62,11.13 10.81,11.07 10.96,11.13L12.71,11.84C13.07,11.56 13.46,11.32 13.89,11.15L14.15,9.29C14.18,9.13 14.32,9 14.5,9H17.3C17.47,9 17.62,9.13 17.64,9.29L17.91,11.15C18.33,11.32 18.73,11.56 19.09,11.84L20.83,11.13C21,11.07 21.17,11.13 21.26,11.29L22.66,13.71C22.75,13.86 22.71,14.05 22.58,14.16L21.1,15.31L21.15,16L21.1,16.68M6.69,8.07C7.56,8.07 8.26,7.37 8.26,6.5C8.26,5.63 7.56,4.92 6.69,4.92A1.58,1.58 0 0,0 5.11,6.5C5.11,7.37 5.82,8.07 6.69,8.07M10.03,6.94L11,7.68C11.07,7.75 11.09,7.87 11.03,7.97L10.13,9.53C10.08,9.63 9.96,9.67 9.86,9.63L8.74,9.18L8,9.62L7.81,10.81C7.79,10.92 7.7,11 7.59,11H5.79C5.67,11 5.58,10.92 5.56,10.81L5.4,9.62L4.64,9.18L3.5,9.63C3.41,9.67 3.3,9.63 3.24,9.53L2.34,7.97C2.28,7.87 2.31,7.75 2.39,7.68L3.34,6.94L3.31,6.5L3.34,6.06L2.39,5.32C2.31,5.25 2.28,5.13 2.34,5.03L3.24,3.47C3.3,3.37 3.41,3.33 3.5,3.37L4.63,3.82L5.4,3.38L5.56,2.19C5.58,2.08 5.67,2 5.79,2H7.59C7.7,2 7.79,2.08 7.81,2.19L8,3.38L8.74,3.82L9.86,3.37C9.96,3.33 10.08,3.37 10.13,3.47L11.03,5.03C11.09,5.13 11.07,5.25 11,5.32L10.03,6.06L10.06,6.5L10.03,6.94Z"></path>
+
−
</svg>
+
−
</a>
+
−
<a href="https://2018.igem.org/Team:Rotterdam_HR/Wikistat" class="nav-card">
+
−
<h2>Wiki statistics</h2>
+
−
<svg viewBox="0 0 24 24">
+
−
        <path d="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" />
+
−
      </svg>
+
−
</a>
+
−
</div>
+
−
</div>
+
  
−
<div id="footer"></div>
+
.nav-button::after {
−
<script src="https://2018.igem.org/Template:Rotterdam_HR/js/main?action=raw&ctype=text/javascript"></script>
+
  content: '';
 +
  position: absolute;
 +
  left: 0;
 +
  right: 0;
 +
  bottom: 0;
 +
  height: 3px;
 +
  background: white;
 +
  transform: scale(0, 1);
 +
  transform-origin: left;
 +
  transition: transform 200ms;
 +
}
  
−
</div>
+
.nav-button:hover::after {
−
</body>
+
  transform: scale(1, 1);
−
</html>
+
}

Revision as of 12:34, 29 September 2018

/* ----- color palet ----- */

root {

--color-primary: #1B5E20; --color-secondary: #C8E6C9;

--color-dark: rgb(50, 50, 50);

--color-wetlab: #1B5E20;

--color-hardware: #3949AB;

--color-software: #424242; --color-software-secondary: #6a6a6a; }

/* ------ PAGE ------ */ .page-index, .page-description { background: var(--color-secondary); } .page-software { background: var(--color-software-secondary); }

/* ----- iGEM STYLE FIXES ----- */

ul { list-style-image: none; }

  1. content {

width: 100%; margin: 0; padding: 0; background: none; }

  1. bodyContent a[href ^="https://"], .link-https {
   background: whitesmoke;
   padding: 5px 0;

}

  1. HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page p, #HQ_page span, #HQ_page a{

font-family: candara; line-height: initial; }

  1. bodyContent h3, #bodyContent h4, #bodyContent h5 {

margin-bottom: 0; padding: 0 5px; line-height: 1.1em; }

  1. top_title, #top_menu_under {

display: none; }

  1. top_menu_14 {

position: initial; }

  1. top_menu_inside #user_item {

margin-right: 0; float: none; }

  1. top_menu_inside {

margin: 0 auto; width: 90%; }

body { font-family: candara; background: white; 

 font-size: 13px;

}

/* ----- NAVBAR ----- */ .menu { display: flex; }

.menu, .sub-menu { 

 margin: 0;
 padding: 0;
 list-style: none;
 box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);

}

.menu .main-item { 

 position: relative;
 display: flex;
 flex-direction: column;
 align-items: center;
 flex: 1;
 height: 44px;
 padding: 5px;
 text-align: center;
 text-decoration: none;
 color: white;
 background: var(--color-dark);

fill: currentColor; z-index: 1; }

.menu .main-item::before { 

 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: currentColor;
 transform: scale(0, 1);
 transform-origin: left;
 transition: transform 200ms;

}

.menu .home-button { 

 width: 200px;
 position: relative;

}

.menu .home-button a { 

 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: -80px;
 border-radius: 0 0 50% 50%;
 background: var(--color-dark);

}

.sub-menu { 

 position: absolute;
 top: 54px;
 left: 0;
 right: 0;
 transform: scale(1, 0);
 transform-origin: top;
 transition: transform 250ms;

}

.sub-menu .sub-item { 

 padding: 10px 5px;
 border-top: rgba(255, 255, 255, 0.25) solid 2px;
 color: var(--color-dark);

transition: color 200ms; min-width: 96px; max-height: fit-content; }

.menu .construction::after { 

 content: url('https://static.igem.org/mediawiki/2018/4/4a/T--Rotterdam_HR--wrench.svg');
 position: absolute;
 top: 5px;
 left: 0;
 right: 0;
 bottom: 5px;
 display: flex;
 flex-direction: column;
 align-items: center;
 font-size: 12px;
 color: orange;
 background: var(--color-dark);
 transform: scale(1, 0);
 transform-origin: bottom;
 transition: transform 250ms;

}

.menu .main-item:hover::before { 

 transform: scale(1, 1);

}


.menu .construction:hover::after { 

 transform: scale(1, 1);

}

.menu .main-item:hover .sub-menu { 

 transform: scale(1, 1);

}

.menu .main-item:hover .sub-menu .sub-item { 

 color: white;
 transition: color 200ms 100ms;

}

  1. menuToggle a {
 text-decoration: none;
 color: white;
 transition: color 0.3s ease;

}

  1. menuToggle a:hover {
 color: gray;

}

  1. menuToggle {
 display: none;
 position: relative;
 top: -35px;

left: 20px; width: 50px; 

 z-index: 1;
 -webkit-user-select: none;
 user-select: none;

}

  1. menuToggle input {
 display: block;
 width: 40px;
 height: 32px;
 position: absolute;
 top: -7px;
 left: -5px;
 
 cursor: pointer;
 
 opacity: 0; /* hide this */
 z-index: 2; /* and place it over the hamburger */
 
 -webkit-touch-callout: none;

}

/* 

* Just a quick hamburger
*/
  1. menuToggle span {
 display: block;
 width: 33px;
 height: 4px;
 margin-bottom: 5px;
 position: relative;
 background: white;
 border-radius: 3px;
 
 z-index: 1;
 
 transform-origin: 4px 0px;
 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
             background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
             opacity 0.55s ease;

}

  1. menuToggle span:first-child

{ 

 transform-origin: 0% 0%;

}

  1. menuToggle span:nth-last-child(2)

{ 

 transform-origin: 0% 100%;

}

/* 

* Transform all the slices of hamburger
* into a crossmark.
*/
  1. menuToggle input:checked ~ span

{ 

 opacity: 1;
 transform: rotate(45deg) translate(-2px, -1px);
 background: white;

}

/* 

* But let's hide the middle one.
*/
  1. menuToggle input:checked ~ span:nth-last-child(3)

{ 

 opacity: 0;
 transform: rotate(0deg) scale(0.2, 0.2);

}

/* 

* Ohyeah and the last one should go the other direction
*/
  1. menuToggle input:checked ~ span:nth-last-child(2)

{ 

 transform: rotate(-45deg) translate(0, -1px);

}

/* 

* Make this absolute positioned
* at the top left of the screen
*/
  1. mobile-menu

{ 

 position: absolute;

width: 200px; 

 margin: -100px 0 0 -50px;
 padding: 50px;
 padding-top: 125px;
 background: var(--color-dark);
 list-style-type: none;
 -webkit-font-smoothing: antialiased;

/* to stop flickering of text in safari */ 

 transform-origin: 0% 0%;
 transform: translate(-100%, 0);
 
 transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);

}

  1. mobile-menu li

{ 

 padding: 5px 0;
 font-size: 16px;
 height: 0.75em;
 display: flex;
 align-items: center;

}

  1. mobile-menu li svg {
 width: 1em;
 height: 1em;
 margin-right: 10px;
 fill: currentColor;

}

  1. mobile-menu li span {
 width: 100%;
 height: 0.75em;
 background: none;

}

/* 

* And let's slide it in from the left
*/
  1. menuToggle input:checked ~ ul

{ 

 transform: none;

}

@media only screen and (max-width: 1400px) { 

 .main-item {
   font-size: smaller;
 }

}

@media only screen and (max-width: 1060px) { .home-button { display: none; }

}

@media only screen and (max-width: 900px) { 

 .menu {
   height: 50px;
   width: 100%;
   background: var(--color-dark);
 }
 
 .menu .main-item {
   display: none;

}

#menuToggle { display: block; 

 }

}

/* ------ HEADER ------ */

.header { 

 position: relative;
 height: 40vh;
 width: 100%;
 background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.5), rgba(255,255,255,0.3));
 display: flex;
 align-items: center;
 text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);

}

.header::before { 

 content: ;
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

}

.header div { 

 margin: auto;
 display: flex;
 flex-direction: column;

align-items: center; }

.header div svg { 

 width: 160px;
 height: 160px;

}

.header div h1 { padding: 0; 

 margin-top: 0;
 font-size: 50px;

}

/* ------ FOOTER ------ */

.multiple-items-footer { margin: 0 auto; display: flex; justify-content: space-around; width: 250px; }

.item-footer { width: 50px; height: 50px; margin: 5px; filter: invert(50%); transition: 0.4s; }

.item-footer:hover { filter: invert(100%); transition: 0.1s; }

  1. footer {

padding: 40px 0; background: rgb(50, 50, 50); text-align: center; color: white; font-size: 18px; }

/* ------ CONTAINERS ------ */

.nav-cards { 

 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 margin: 20px auto;

}

.nav-card { 

 width: 180px;
 height: 180px;
 margin: 10px;
 position: relative;
 color: white;
 text-align: center;
 background: var(--color-software);
 box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
 transition: 200ms;
 border-radius: 3px;

}

.nav-card svg { 

 position: absolute;
 fill: white;
 width: 50%;
 height: 50%;
 top: 10%;
 left: 25%;

}

.nav-card h2 { 

 position: absolute;
 bottom: 0;
 left: 5px;

right: 5px; color: white; }

.nav-card::before, .nav-card::after { 

 content: ;
 position: absolute;
 top: 5px;
 left: 5px;
 right: 5px;
 bottom: 5px;
 transition: transform 400ms;

}

.nav-card::before { 

 border-top: white solid 1px;
 border-bottom: white solid 1px;
 transform: scale(0, 1);

}

.nav-card::after { 

 border-left: white solid 1px;
 border-right: white solid 1px;
 transform: scale(1, 0);

}

.nav-card:hover::before { 

 transform: scale(1, 1);

}

.nav-card:hover::after { 

 transform: scale(1, 1);

}

.text-container { 

 position: relative;
 text-align: center;
 margin: 60px auto;
 padding: 10px;
 max-width: 1000px;

}

.text-container h1 { 

 font-size: 40px;
 position: relative;
 color: var(--color-primary);

}

.text-container h1::after { 

 content: ;
 position: absolute;
 bottom: 0;
 left: 10%;
 right: 10%;
 height: 4px;
 border-radius: 2px;
 background: currentColor;

}

.text-container p { 

 margin-bottom: 20px;
 font-size: 24px !important;
 text-align: center !important;

}

.nav-button { position: relative; 

 padding: 10px 20px;
 background: var(--color-primary);
 color: white;
 text-decoration: none;
 box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
 font-size: 24px !important;

}

.nav-button::before { 

 content: '> ';

}

.nav-button::after { 

 content: ;
 position: absolute;
 left: 0;
 right: 0;
 bottom: 0;
 height: 3px;
 background: white;
 transform: scale(0, 1);
 transform-origin: left;
 transition: transform 200ms;

}

.nav-button:hover::after { 

 transform: scale(1, 1);

}