/*FONTS*/

@font-face{
  font-family:"Roboto";
  src: url("fonts/Roboto-Light-webfont.woff") format("woff");
  font-weight:300;
  font-style:normal;
}
@font-face{
  font-family:"Roboto";
  src: url("fonts/Roboto-LightItalic-webfont.woff") format("woff");
  font-weight:300;
  font-style:italic;
}
@font-face{
  font-family:"Roboto";
  src:url("fonts/Roboto-Regular-webfont.woff") format("woff");
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:"Roboto";
  src:url("fonts/Roboto-Italic-webfont.woff") format("woff");
  font-weight:400;
  font-style:italic;
}
body{
  font-family:"Roboto";
  font-weight:300;
  font-style:normal;
}
em{
  font-family: "Roboto";
  font-weight:300;
  font-style:italic;
}
strong{
  font-family: "Roboto";
  font-weight:400;
  font-style:normal;
}
em strong{
  font-family:"Roboto";
  font-weight:400;
  font-style:italic;
}


*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/*HEADER STRUCTURE*/

/*Header and logo*/
header{
  background-color: rgba(197, 137, 137, 0.75);
  padding:10px;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:space-between;
}
.logo img{
  width:100%;
}
.logo-link{
  display:flex;
  justify-content:center;
  width:70%;
}
.logo{
  height:30%;
  display:flex;
  justify-content:center;
  align-items:center;
}

/*Navigation and menu*/
nav{
  display:flex;
}

.menu{
  padding:10px;

  display:flex;
  flex-direction:row;
  justify-content:center;
  
  width:100%;
}
.menu .first{
  padding-right:30px;
}
.menu .second{
  padding-left:30px;
}
.second li:first-child{
  padding-bottom:10px;
}
.second li:last-child{
  padding-top:10px;
}


/*HEADER DECORATIONS*/

.menu li{
  list-style:none;
}
/*LINKS*/

.menu a{
  color:beige;
  text-decoration:none;
  font-size:20px;
}
.menu a:hover{
  text-decoration:underline;
}
footer a{
  color:beige;
  text-decoration:none;
  font-size:20px;
}
footer a:hover{
  text-decoration:underline;
}
article a:link, article a:visited{
  color:rgb(48, 117, 221);
  font-size:18px;
  text-decoration:none;
}
article a:hover{
  color:rgba(48, 117, 221, 0.7);
}
article a:link:active, .content-link:visited:active{
  color:rgb(48, 117, 221);
}
/*Dropdown decoration*/
.dropdown{
  position:relative;
  z-index:2;
  cursor:pointer;
}
.dropdown:hover .features-menu{
  display:flex;
  flex-direction:column;

}
.features-menu{
  display:none;
  flex-direction:column;

  position:absolute;
  top: -10px;
  left: -10px;
  z-index:1;
  padding-top:40px;

  list-style:none;
  background-color:rgba(197, 137, 137);
  border-radius:5px;

}
.features-menu > li{
  list-style:none;
  border-bottom:1px solid #FFF;

  padding:0 10px 10px 10px;
  margin:10px;
  width:80px;
}
.features-menu li:last-of-type{
  border-bottom:none;
}
.dropdown > span {
  z-index: 2;
  position: relative;
  cursor: pointer;
}

/*CONTENT   STRUCTURE*/
article{
  display:flex;
  width:100%;
  background-color:rgba(235, 228, 228, .3);
  padding-bottom:50px;
}
.content{
  display:flex;
  flex-direction:column;
  width:100%;
}
/*CONTENT DECORATIONS*/
h1{
  color:rgba(0,0,0,.7);
  border-bottom: 1px solid rgba(197, 137, 137, 0.75);
  margin:50px;
  text-align:center;
  padding: 10px;
  padding-top:50px;
}
h3{
  text-align:center;
  color:rgba(0,0,0,.7);
  padding: 10px;
  padding-bottom:20px;
}
.cmd{
  background-color:rgba(0,0,0,.4);
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}
.mysql{
  background-color:rgba(48, 117, 221, 0.4);
}

p{
  color:rgba(0,0,0,.7);
  font-size:18px;
  margin-bottom:20px;
  padding:0 10px 0 10px;
  line-height: 1.8;
}

/*FOOTER STRUCTURE*/
footer{
  background-color:rgba(197, 137, 137, 0.75);
  display:flex;
  width:100%;
  padding:10px;
}
footer p{
  margin-bottom:0;
}
/*FOOTER DECORATION*/
address{
  font-style:normal;
}
footer p {
  color:beige;
  font-size:20px;
}

/*HOME PAGE*/
.home-ul{
  list-style:none;
}
.home-ul p{
  border-bottom:1px solid rgba(197, 137, 137, 0.75);
}
/*Desktop*/
@media only screen and (min-width:715px){
  /*HEADER*/
  header{
    justify-content:space-between;
    align-items:space-around;
    flex-direction:row;
  }
  .menu li{
    display:inline-block;
    padding-right:50px;
  }
  .menu li:last-child{
    padding-right:0;
  }
  .dropdown li{
    padding-right:0;
  }
  .logo{
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .logo-link{
    height:90px;
  }
  .second{
    display:flex;
    flex-direction:row;
    align-items:center;
  }
  .first{
    padding-right:50px;
    display:flex;
    align-items:center;
  }
  .menu{
    justify-content:space-between
  }
  .second li:first-child{
    padding-bottom:0;
  }
  .second li:last-child{
    padding-top:0;
  }
  /*CONTENT*/
  article{
    justify-content:center;
    padding-bottom:80px;
  }
  .content{
    display:flex;
    width:715px;
  }
  h1{
    padding-top:80px;
  }
  footer{
    height:100px;
    align-items:center;
  }
}