/* Makes Height to 100% */
html, body {
  height: 100%;
  /* background: #252728; */
  /* background: #3F0071; */
  background: #211f32;
}

/* Sets Navigation bar background and gives it some padding */
#navbar {
  background-color: black;
  padding: 30px;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

/* Spaces out the navigation links*/
.navbar-nav > li {
  padding-left:10px;
  padding-right:10px;
}

/* Navbar links */
.links {
  font-size: 19px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

/* Navigation link Color */
.navigation a {
  color: red;
}

/* Navigation link colors and transition */
.navigation .navbar-nav .nav-link {
  color: red;
  -webkit-transition: color 0.5s; /* Safari */
  transition: color 0.5s;
}

/* Color changes to red when you hover over the links */
.navigation .navbar-nav .nav-link:hover {
  color: white;
}

/* Color of the hamburger border*/
.navbar-toggler {
  border-color: red;
  -webkit-transition: border-color 0.3s;
  transition: border-color 0.3s; */
}

/* Color of the hamburger menu lines*/
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  -webkit-transition: 0.3s;
   transition: 0.3s;
}

/* Changes the color of the hamburger border to red when hovered */
.navbar-toggler:hover {
  border-color: white;
}

/* Changes the color of the hamburger menu lines to red when hovered */
.navbar-toggler:hover .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 5, 5, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/* Removes the blue border when clicking the hamburger menu */
.navbar-toggler:focus,.navbar-toggler:active {
   outline: none !important;
   box-shadow: none;
}

.header {
  color: red;
  font-size: 30px;
}

.events {
  padding-top: 150px;
  min-height: 100%;
}

.eventinfo {
  color: #ecf5f5;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid white;
}

/* Mobile View CSS */
@media screen and (max-width: 600px) {
  #logo {
    padding-left: 3px;
  }
  .navbar button {
    margin-right: 3px;
  }
  .title {
    margin: 10px;
  }
  .header {
    font-size:20px;
  }
  .article {
    margin: 10px;
  }
  .text {
    padding-top: 30px;
    text-align:center;
  }
  .purchase {
     font-size:120%;
     line-height: 2;
     width: 100%;
   }
}

/* Changes the background for the footer */
.footer {
  background-color: black;
  /* background-image: url(https://wallpapercave.com/wp/wp2668807.png); */
}

/* Changes the color of the Social Media logo and sets transitions */
.fa-facebook-f, .fa-twitter, .fa-instagram, .fa-soundcloud, .fa-youtube, .fa-spotify {
  color: white;
  font-size: 25px;
  -webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

/* Changes the color of the Social Media logos to red when hovered over */
.fa-facebook-f:hover, .fa-twitter:hover, .fa-instagram:hover, .fa-soundcloud:hover, .fa-youtube:hover, .fa-spotify:hover {
    color: red;
}

/* Pushes down the footer links by 40px */

.footerLinks {
  padding-top: 30px;
}

.list-group-item-footer {
  background: none;
  color: red;
}