* {
  margin: 0;
  padding: 0;
}

/*#region logo */
#name {
  float: left;
  font-family: 'Abril Fatface', cursive;
  color: white;
  z-index: 200;
  font-size: 40px;
  position: relative;
  display: flex;
  text-align: center;
  text-decoration: none;
}
/*#endregion */
/*#region Navbar when greater than 818px*/
.navbar {
  padding: 14px 16px;
  overflow: hidden;
  background-color: #172D3B;
  
}

.menuItem {
  list-style-type: none;
}

li {
  float: right;
  margin-right: 5%;

}

li a {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-weight: 600;
  color: white;
  font-size: calc(50% + 10px);
  position: relative;
  display: flex;
  text-align: center;
  padding: 25px 13px;
  text-decoration: none;
}

.hamburger {
  display: none;
}
/*#endregion */

/*#region Navbar when less than 818px*/
@media only screen and (max-width: 818px) {

  body{
    min-width: 600px;
  }

  .hamburger {
    display: block;
    position: fixed;
    z-index: 150;
    top: 0.2rem;
    right: 1rem;
    padding: 4px;
    cursor: pointer;
   
  }
  .menuItem{
    float: left;
    clear: left;
  }
  
  .menu {
    overflow: hidden;
    position: absolute;
    display: none;
    transform: translateY(-100%);
    transition: transform 0.8s;
    height: 100%;
    width: 20%;
    min-width: 20%;
    left: 0;
    top: 0;
    z-index: 300;
    font: calc(50% + 8px);
    background: transparent;
    color: white;
    list-style: none;
    text-align: center;
  }



  .showMenu {
    transform: translateY(13%);
    display: block;
  }

  Iframe body {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100vh;
    margin: 0;
  }

  .hamburger {
    background-color: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    padding: 0;
  }

  .line {
    fill: none;
    stroke: rgb(255, 254, 254);
    stroke-width: 6;
    transition: stroke-dasharray 300ms cubic-bezier(0.4, 0, 0.2, 1),
      stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .line1 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }

  .line2 {
    stroke-dasharray: 60 60;
    stroke-width: 6;
  }

  .line3 {
    stroke-dasharray: 60 207;
    stroke-width: 6;
  }

  .opened .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }

  .opened .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
    stroke-width: 6;
  }

  .opened .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
    stroke-width: 6;
  }
}


/*#endregion */