html,
body {
  width: auto !important;
  overflow-x: hidden !important;
}

#navbar {
  background-color: transparent;
}

.navbar-header .navbar {
  text-decoration: none;
  max-width: 100%;
}

.navbar .container {
  font-family: 'open sans';
}

#navbar {
  background-color: transparent;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}

.navbar-form {
  display: flex;
  justify-content: center;
  border-color: transparent !important;
}

.navbar-toggle {
  border-color: transparent !important;
}

.navbar-toggle:hover {
  background-color: transparent !important;
}

.toggle-nav {
  background-color: #ddd !important;
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
}

.navbar-right a {
  font-size: 1.8em;
}

.navbar-right a:hover {
  text-decoration: none;
}

.home {
  height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000;

  /* background-image: url('../imgs/bg1.jpg'); */
  background-size: cover;
  text-align: center;
}

.home-video {
  height: 100%;
}

.home-header {
  position: absolute;
  z-index: 1;
}

.home__title {
  color: #ddd;
  font-family: lobster;
  font-size: 4em;
}

.home__text {
  color: #fff;
  font-family: 'open sans';
  font-size: 1.7em;
}

.image-wrapper {
  position: relative;
  max-width: 100%;
  height: 50vh;
  background-size: cover;
  background-position: center;
  border-top: 1px solid slategray;
  border-bottom: 1px solid slategray;
}

.text-box-right,
.text-box-left {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  bottom: 10px;
  width: 100%;
  max-width: 450px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  color: white;
  font-size: 20px;
  text-align: center;
}

.text-box-right {
  right: 10px;
}

.text-box-left {
  left: 10px;
}

.buttons-wrapper {
  display: flex;
  justify-content: space-around;
  width: 100%;
  font-size: 15px;
  text-transform: uppercase;
}

.buttons {
  border: none;
  color: orange;
  text-decoration: none !important;
  outline: none !important;
}

.buttons:hover {
  color: #ff4500;
}

.buttons:active {
  color: blue;
}

.github-followers {
  background-image: url('https://raw.githubusercontent.com/billdevcode/github-followers/master/src/assets/github-followers-screenshot.png');
}

.hero-layout {
  background-image: url('https://github.com/billdevcode/hero-layout/raw/master/src/HeroLayout/assets/images/hero-layout-screenshot.png?raw=true');
}

.maps-locations {
  background-image: url('../imgs/maps-locations.png');
}

.javascript-data-table {
  background-image: url('../imgs/javascript-data-table.png');
}

.zip-quote {
  background-image: url('../imgs/random-quotes.png');
}

.zip-calculator {
  background-image: url('../imgs/javascript-calculator.png');
}

.zip-clock {
  background-image: url('../imgs/pomodoro-clock.png');
}

.zip-twitch {
  background-image: url('../imgs/twitchTV.png');
}

.react-fcc-leaderboard {
  background-image: url('../imgs/fcc-leaderboard.png');
}

.zip-wiki {
  background-image: url('../imgs/wikipedia-viewer.png');
}

.zip-tic-tac-toe {
  background-image: url('../imgs/tic-tac-toe.png');
}

.zip-simon {
  background-image: url('../imgs/simon-game.png');
}

#contact h3 {
  color: white;
}

#contact {
  text-align: center;
  height: 100%;
  padding: 30px;
  background-color: #222;
}

#contact a {
  margin: 10px;
  text-decoration: none;
}

#contact a:hover {
  opacity: 0.7;
}

h2 {
  font-size: 1.8em;
}