/*
Made with love for all by @pawan_mall
Basic css for decorating page for demo
*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');

body{
  padding:0px;
  background-color: #d2d2d2;
}
h3{
  text-align: center;
  color: #4c4746;
}

/* 
Menubar style code start from here
Defined display property as flex
*/
.menu {
  font-family: 'Open Sans Condensed', sans-serif;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* 
Defined menu layout for mobile display
*/
@media(max-width:668px){
  .menu {
    display:flex;
    flex-direction: column;
    margin: 10px;
  } 
}
/* 
Defined menu layout for desktop display
*/
.menu > a{
  text-align: center;
  font-weight:bold;
  font-size:20px;
  color: #5a5a5a;
  cursor: pointer;
  padding: 10px; 
  background-color: #F1F0F7;
  box-shadow: inset 0 0px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all .2s ease-in; 
  border-top-style: solid;
  border-top-width: 5px;
}
.menu > a:hover{
  font-size: 25px;
  border-top-style: solid;
  border-top-width: 10px;
}

/* 
Defined and setup order of menu items and the color scheme
*/
a.blue{
  flex: 1;
  order: 1;
  border-top-color:#4285F4;
}
a.blue:hover{
  color: #FFFFFF;
  background-color: #4285F4;
  border-top-color:#4285F4;
}

a.red{
  flex: 1;
  order: 2;
  border-top-color:#EA4335;
}
a.red:hover{
  color: #FFFFFF;
  background-color: #EA4335;
  border-top-color:#EA4335;
}

a.orange{
  flex: 1;
  order: 3;
  border-top-color:#FBBC05;
}
a.orange:hover{
  color: #ffffff;
  background-color: #FBBC05;
  border-top-color:#FBBC05;
}

a.green{
  flex: 1;
  order: 4;
  border-top-color:#34A853;
}
a.green:hover{
  color: #ffffff;
  background-color: #34A853;
  border-top-color:#34A853;
}

a.bloodred{
  flex: 1;
  order: 5;
  border-top-color:#EA4335;
}
a.bloodred:hover{
  color: #ffffff;
  background-color: #EA4335;
  border-top-color:#EA4335;
}