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

/* CSS variables */
:root {
  --blue: #4e59c0;
  --dark: #221c1e;
  --light: #f9ede3;
  --green: #1e6157;
  --yellow: #f5a602;
}

body {
  background:  var(--light);
  color: var(--blue);
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Navigation */
#mainNav {
  background: var(--blue);
}

#mainNav .navbar-brand {
  background: var(--light);
  color: var(--blue);
  font-size: 1em;
  padding: 0 10px;
}

#mainNav li a {
  color: var(--light);
}

#mainNav li a:hover {
  color: var(--yellow);
}

/* Header */
header {
  padding-top: 150px;
  background: url(../images/hero.jpg) center 58px no-repeat;
  background-size: cover;
  display: flex;
  flex-direction:  row;
  justify-content: flex-end;
}

header .subtitle {
  background: var(--light);
  box-shadow: 5px 5px 8px #888;
  color: #4e59c0;
  font-size: 1.5em;
  margin-right: 20px;
  padding: 5px 10px;
}


/* Work */
#work .btn-primary {
  background-color: var(--blue);
  color: var(--light);
}

#work .btn-primary:hover {
  color: var(--yellow);
  box-shadow: 2px 2px 8px #888;
}

#work .card-body {
  color: var(--blue);
}

/* Skills */

#skills p {
  width: auto;
  min-width: 50px;
  height: 50px;
  padding-top: 60px;
  margin-bottom: 4vw;
}

#skills .icon-html {background: url(../images/icons/icons8-html5-50.png) 50% 50% no-repeat;}
#skills .icon-css {background: url(../images/icons/icons8-css3-50.png) 50% 50% no-repeat;}
#skills .icon-bootstrap {background: url(../images/icons/icons8-bootstrap-logo-50.png) 50% 50% no-repeat;}
#skills .icon-terminal {background: url(../images/icons/icons8-terminal-50.png) 50% 50% no-repeat;}
#skills .icon-git {background: url(../images/icons/icons8-git-50.png) 50% 50% no-repeat;}
#skills .icon-github {background: url(../images/icons/icons8-github-50.png) 50% 50% no-repeat;}
#skills .icon-javascript {background: url(../images/icons/icons8-javascript-50.png) 50% 50% no-repeat;}
#skills .icon-api {background: url(../images/icons/icons8-api-50.png) 50% 50% no-repeat;}
#skills .icon-node {background: url(../images/icons/icons8-node-js-48.png) 50% 50% no-repeat;}
#skills .icon-json {background: url(../images/icons/icons8-json-50.png) 50% 50% no-repeat;}
#skills .icon-react {background: url(../images/icons/icons8-react-native-50.png) 50% 50% no-repeat;}


/* Contact */
#contact img:hover {
  transform: scale(1.2);
  transition: transform 0.3s ease;
}

/* Footer */
footer {
  background: var(--blue);
  color: var(--light);
}

footer a.nav-link {
  color: var(--light);
}

footer a.nav-link:visited {
  color: var(--light);
}

footer a.nav-link:hover {
  color: var(--yellow);
}

footer p {
  margin-bottom: 0;
}