*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #00BCD4;
    
}
ul{
    list-style: none;
    
}
li{
    display: inline;
}
.nav-bar{
    background-color: #0097A7;
    padding-top: 1%;
    position: relative;
    -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.76); 
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.76);
   
}
.menu{
    display: flex;
    margin-left: 50%;
    /* position: relative; */
    
}
/* .menu-item{
    margin-left: auto;
    flex: 1;
    color :white;
    font-weight: bold;
} */
.menu-item{
    margin-left: auto;
    flex: 1;
    color :white;
    font-weight: bold;
    text-align: center;
    background-color: #0097A7;
    width: 16%;
    overflow: hidden;
    /* font-size: 2vw; */
    font-size: 1.5em;
    padding-bottom: 0.7rem;
    /* position: absolute; */
    /* text-decoration: underline; */
}
.menu-item a{
    Text-decoration: none;
    color: inherit;
}
.underbar{
    width: 16%;
    height: 5px;
    background: red;
    bottom: 0px;
    position: absolute;
    -webkit-transition: 0.5s ease;
    background: rgba(150,250,250,0.5);
    box-shadow: 0 0 10px rgba(70,250,250,1);
}
li.menu-item:nth-of-type(2):hover ~ .underbar{
    margin-left: 16%;
}
li.menu-item:nth-of-type(3):hover ~ .underbar{
    margin-left: 32%;
}

.main{
    
    /* height: 100%; */
}
.main .title{
    font-weight: bold;
    font-size: 3em;
    color: white;
    text-align: center;
    padding: 2rem;
}
.menu-address{
    font-size: 2.5rem;
    margin: auto;
    width: 50%;
    text-align: center;
    padding: 2rem;
}
.menu-address-item a{
    color: inherit;
  
}
.user-info{
    font-style: italic;
    font-size: 1.5em;
    color: white;
    text-align: center;

}
.hr{
    border: 1px solid white;
    width: 25%;
    margin: auto;
    margin-top: 2rem;
}
.projects{
display: flex;
/* flex-direction: row; */
align-items: stretch;
flex-wrap: wrap;
justify-content: center;
/* flex-flow: row wrap; */
width: 100%;
transition: 0.5s;
}
.projects-item{
/* flex: 1; */
/* border: 1px solid white; */
text-align: center;
margin: 2%;
width: 20%;
min-height: 25%;
/* height: 25%; */
background-color: white;
-webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.76); 
box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.76);
/* border-radius: 20px; */
position: relative;
transition: 0.5s;
}
.projects-item .p-title{
    /* color:white; */
    font-weight: bold;
    padding: 0.5em;
    font-size: 1.5em;
    word-wrap: break-word;
}
.projects-item .p-desc{
    /* color:white; */
    font-style: italic;
    word-wrap: break-word;
    padding: 0.5rem;
    /* min-height: 25%; */
}
.projects-item .p-tags{
text-align: left;
/* margin: 0.3em; */
width: 80px;
text-align: center;
word-wrap: break-word;
position : absolute;
top : -20px;
right: 0;
background : #f44336;
color: white;
border-radius: 10px;
padding:0.5em;
}
.projects-item .p-url{
position: absolute;
/* width: 80%; */
border-radius: 10px;
/* left:0; */
bottom :0 ;
right:0;
transition: 0.5s;
padding:12px;
margin: 10px;
background-color: #00BCD4;
color: white;
}

.projects-item .p-url a{
    text-decoration: none;
    color: inherit;
}
.projects-item .p-url:hover{
    -webkit-box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.76); 
    box-shadow: 5px 5px 15px 0px rgba(0,0,0,0.76);
}