/* Navigation bar */

nav li {
  margin-bottom: 8px;
  font-size: 1.1em;
  
}

.nav-link {
  color: black;
  text-decoration: none;
}

.nav-link:after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #000;
  transition: width .3s;
}

.nav-link:hover:after {
 width: 100%;
}

.nav-link.active:after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  transition: width .3s;
}

/* header */
.header-container {
  min-height: 40%;
}

/* this is the header banner */
.jumbotron { 
  background-color: black;
  background-image: url("https://www.transparenttextures.com/patterns/axiom-pattern.png");
  color: white;
}

.jumbotron img {
    display:block;
    margin-left:auto;
    margin-right:auto;
}

/* icons from the first page */
i {
  font-size: 10em;
  color: grey;
}

/*
.tech.html5:hover {
  color: red;
}
*/

.tech.html5:hover i.fa-html5 {
  color:#e34f26;
  transition: transform .1s;
  transform: scale(1.2);
  
}

.tech.css:hover i.fa-css3 {
  color:#1680C0;
  transition: transform .1s;
  transform: scale(1.2);
}

/* SASS logo not in use
i.fa-sass {
  display: flex;
  font-size: 2em;
  color: deeppink;
  justify-content: flex-end;
  align-items: flex-end;
} 
*/

/* .wet-icon {
  background: url(./img/wxt-favicon-mobile.png);
  background-color: #000;
  height: 1.2rem;
  width: 1.2rem;
  display: block;
  transition: transform .1s;
  transform: scale(1.2);
} */

.tech.javascript:hover i.fa-js-square {
  color:#FFC732;
  transition: transform .1s;
  transform: scale(1.2);
}

.tech.python:hover i.fa-python {
  color:#45AF4B;
  transition: transform .1s;
  transform: scale(1.2);
}

svg:hover { /* C# logo */
  fill: #67217A;
  transition: transform .1s;
  transform: scale(1.4);
}

.tech.php:hover i.fa-php {
  color:#8993BE;
  transition: transform .1s;
  transform: scale(1.1);
}

.tech.sql:hover i.fa-database {
  color:#037FF4;
  transition: transform .1s;
  transform: scale(1.2);
}

.tech.aws:hover i.fa-aws {
  color:#F8981D;
  transition: transform .1s;
  transform: scale(1.1);
}

.tech.git:hover i.fa-git-alt {
  color:#F05033;
  transition: transform .1s;
  transform: scale(1.2);
}

.containerLibraries {
  font-size: 7em;
  align-content: center;
}

/* To remove the border / frame of cards */
.card{
  border: none;
}

.card:hover {
  transition: transform .1s;
  transform: scale(1.02);
}

/* buttons from the cards */
.btn {
  background-color: #037FF4;
  border: none;
} 

footer {
  background-color: black;
  color: white;
  margin-top: 3em;
  height: 200px;
}

/* media social from footer */
.containerSocial {
  font-size: 3em;
  align-content: center;
}

.nickname {
  font-size: 1.5em;
  align-content: center;
}

.copyright {
  margin-top: 1em;
  font-size: 0.9em;
}