#top-bar{
  font-family:"Gruppo";
  height:var(--topBarHeight);
  color:#999999;
  top:0;
  position: fixed;
  width:100%;
  background-color: #30303015;
  box-shadow:0px 0px var(--fontSize15) #25000005;
  z-index:99;
  font-size:var(--fontSize15);
  transition: .5s ease;
}
#top-bar:hover{
  transition: .5s ease;
  background-color: #303030;
  box-shadow:0px 0px var(--fontSize15) #250000;
}
#dropdown-menu{
  z-index:99;
  margin-top:var(--topBarHeight);
  width:100%;
  transition: .3s ease;
  position:fixed;
  display:none;
}
#project_link{
  z-index:105;
}
#projects_link:hover #dropdown-menu{
  display:block;
}
.dropdown_miniatures{
  box-shadow:0px 0px var(--fontSize15) #111;
  width:7.49%;
  margin:0% 0.1%;
  border-radius:5px;
  background-size:100%;
  background-repeat: no-repeat;
  height:calc(var(--topBarHeight)*3);
  cursor:pointer;
  float:left;
  transition: .1s ease;
}
.dropdown_miniatures:hover{
  transition: .3s ease;
  scale:1.05;
}
#name_container{
  width:50%;
  position:relative;
}
#name{
  font-size:var(--fontSize25);
  float:left;
  padding:1% 1%;
  cursor:default;
  margin-left:1%;
  padding:0.5% 0%;
}
#nextToName{
  font-size:var(--fontSize20);
  float:left;
  padding:0.5% 0%;
  margin-left:1%;
}
#menu-links{
  font-family:"Gruppo";
  width:50%;
  float:right;
  padding:0.5% 0%;
}
#ff-bar{
  font-size:25px;
  cursor:pointer;
  float:right;
  display:none;
  width:20%;
  height:var(--topBarHeight);
}
#mobile-menu{
  display:none;
  width:100%;
  float:left;
}
.menu-link-mobile{
  width:100%;
  padding:3% 0%;
  color:#999999;
  text-align: center;
  text-decoration: none;
  float:left;
  background-color: #303030;
}
.menu-link{
  z-index:105;
  text-align: center;
  color:#999999;
  text-decoration: none;
  width:15%;
  float:right;
  cursor:pointer;
  transition: .3s ease;
}
.menu-link:hover{
  transform:scale(1.3);
  transition: .3s ease;
}

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

  #name{
    font-size:20px;
    text-align: center;
  }
  #nextToName{
    font-size:12px;
    text-align: center;
  }
  #menu_left_side{
    width:40%;
    float:left;
  }
  #menu-links{
    width:60%;
  }
  #name,#nextToName{
    width:100%;
    float:left;
  }
  .menu-link{
    width:25%;
  }
  .menu-link:hover{
    transform:none;
  }
}

@media only screen and (max-width: 600px) { 
  #top-bar{
    background-color: #252525;
  }
  #menu_left_side{
    width:45%;
  }
  #menu-links{
    width:55%;
  }
  #name{
    font-size:17px;
    text-align: center;
  }
  #nextToName{
    font-size:9px;
    text-align: center;
  }
}

@media only screen and (max-width: 500px) { 
  #menu_left_side{
    margin-left:20%;
    width:60%;
    float:left;
  }
}
@media only screen and (max-width: 350px) { 
  #name{
    font-size:14px;
    text-align: center;
  }
  #nextToName{
    font-size:8px;
    text-align: center;
  }
  #ff-bar{
    font-size:20px;
  }
}
@media only screen and (max-width: 300px) { 
  #name{
    font-size:12px;
    text-align: center;
  }
  #nextToName{
    font-size:7px;
    text-align: center;
  }
  #ff-bar{
    font-size:20px;
  }
}