.bgimg-1 {
  background-image: url("../img/matt.png");
  height: 50%;
}

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.75;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  background-color: DeepSkyBlue;
  -webkit-transition: opacity 2s ease-in;
  -moz-transition: opacity 2s ease-in;
  -o-transition: opacity 2s ease-in;
  -ms-transition: opacity 2s ease-in;
  transition: opacity 2s ease-in;
  margin-bottom: 10px;
}

.intro {
  height: 250px;
  overflow: scroll;
  border: 1px solid #dee2e6;
}

.tab { text-indent:30px }

.caption span.border {
  background-color: #111;
  color: #fff;
  padding: 18px;
  font-size: 25px;
  letter-spacing: 10px;
}

.caption {
  position: absolute;
  left: 0;
  top: 75%;
  width: 100%;
  text-align: center;
  color: #000;
}

@media screen and (min-width: 768px) {
  .caption {
    position: absolute;
    left: 15%;
    top: 50%;
    width: 100%;
    text-align: left;
    color: #000;
  }

  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-position: right;
    opacity: 1;
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
  }

  .intro {
    height: 100%;
    overflow: auto;
    border: 0px;
  }
}

html, body {
  height: 100%;
}

.menu-bar {
  height: 25px;
}

footer {
  bottom: 0;
  position: absolute;
  width: 100%;
  z-index: 1500;
}

.bg-purple {
  background-color: #9932CC;
}

.bg-gray {
  background: rgb(74, 74, 74);
}

.bg-blue {
  background: rgb(50, 101, 196);
}

.bg-red {
  background: rgb(196, 50, 53);
}

.app-title {
  margin-left: 25px;
  font-weight: bold;
  color: #ffffff;
  font-size: 20px;
  white-space: nowrap;
}

.social {
  width: 250px;
  height: 56px;
  overflow: hidden;
  transition-property: all;
  transition-timing-function: ease;
  transition-duration: 400ms;
}

.navbar {
  justify-content: start;
}

.gradient {
  display: none;
}

.gradient-start {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
}

.gradient-end {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}

.fade-me {
  background-color: rgba(0, 0, 0, 0.3);
}

.cell {
  padding: 15px;
  background-color: yellow;
  width: 50px;
  margin: 1px;
  border-radius: 5px;
  text-align: center;
}

.game {
  margin-top: 50px;
}