html,
body,
header,
#intro {
    height: 100%;
}

#intro {
    background: url("../images/backStack.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#tLogo {
  color: white;
}

.svgC {
  filter: invert(1);
}

.tssC {
  color: #aa96da
}

.logo {
  font-family: 'Lobster', cursive;
}

.top-nav-collapse {
    background-color: #aa96da;
  }

  .gmap_canvas {
    overflow: hidden;
    background: none !important;
    height: 500px;
    width: 600px;
}


/* ul {
  position: relative;
  display: flex;
}
ul li {
  position: relative;
  list-style: none;
  margin: 0 20px;
  cursor: pointer;
}
ul li a {
  text-decoration: none;
}
ul li a .fa-brands {
  font-size: 6em;
  color: #222;
}
ul li a::before {
  font-family: "FontAwesome";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 6em;
  height: 0;
  overflow: hidden;
  transition: 0.5s ease-in-out;
}

ul li:nth-child(1) a::before {
  content: "\f16d";
  background-image: linear-gradient(45deg, 
    #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,
    #bc1888 100%);
  -webkit-background-clip: text;
      background-clip: text;
   -webkit-text-fill-color: transparent;
  border-bottom: 4px solid #dc2743;
}
ul li:nth-child(2) a::before {
  content: "\f09a";
  color: #3b5998;
  border-bottom: 4px solid #3b5998;
}
ul li:nth-child(3) a::before {
  content: "\f099";
  color: #00acee;
  border-bottom: 4px solid #00acee;
}
ul li:hover a::before {
  height: 100%;
} */


  @media (max-width: 768px) {
    .navbar:not(.top-nav-collapse) {
      background-color: #aa96da;
    }
  }
  @media (min-width: 800px) and (max-width: 850px) {
    .navbar:not(.top-nav-collapse) {
      background-color: #aa96da;
    }
  }

  ul.no-bullets {
    list-style-type: none; 
    padding: 0;
    margin: 0; 
  }

  .custom-color {
    background-color: #aa96da;
  }

  @media screen and (max-width: 600px) {
    #intro {
    background-color: #aa96da;
  } 
}

  @media screen and (max-width: 600px) {
    iframe {
      width: 380px;
    }
   }
   
   @media (min-width: 550px) and (max-width: 650px) {
    #intro {
      height: 400px !important;
    }
  }

  @media (min-width: 800px) and (max-width: 850px) {
    #intro {
      height: 410px !important;
    }
  }

  @media (max-width: 767px) {
    #streak {
      height: 700px !important;
    }
  }