:root {
  --radius: 0.15rem;
  --yellow: #ffde4f;
  --link: #1e72b9;
}


body {
  margin:0;
  padding:0;
  font-family:Arial,sans-serif;
  background:#f5f5f5;
  }

.container {
  max-width:960px;
  margin:0 auto;
  padding:20px;
  }

h1 {
  color:#333;
  font-size:32px;
  margin-bottom:16px;
  }

.quote {
  margin-left: 20%;
  width: 60%;
  color: white;
  line-height:1.6;
  font-size: 150%;
  border: 0px solid red;
  }

.btn {
  display:inline-block;
  padding:10px 20px;
  background:#04AA6D;
  color:#fff;
  border:none;
  border-radius: var(--radius);
  cursor:pointer;
  }

.btn:hover {
  background:#059862;
  }

.hero {
  color: white;
  min-height: 100vh;
  background-image: url('../img/bg.jpg');
  background-position: center;
  background-size: cover;
}

.hero .hero-body {
    background-color: rgba(12, 15, 24, 0.85);
    display: flex;
    align-items: center;
    }

.event-launcher {
   background: linear-gradient(
     to right,
     rgba(255, 255, 255, 0),
     rgba(255, 255, 255, 0.2),
     rgba(255, 255, 255, 0)
   );
   padding-top: 1rem;
   padding-bottom: 1rem;
   margin-bottom: 0.5rem;
   }

a.event-target:hover {
   color: #cdcdcd;
   }

.logo {
    max-width: 29rem;
    width: 100%;
    }

.hero .links {
    margin-top: 1.5em;
    margin-bottom: 2em;
  }

.hero .link {
  text-decoration: none;
  margin: 0.5em 1em;
  }

.hero .blog-message {
  margin-top: 1em;
  font-size: 1.1em;
  }

.hero .blog-link {
  display: inline-block;
  padding: 0.11em 0.2em;
  border-radius: $radius;
  color: var(--yellow);
  background-color: rgba(255, 255, 255, 0.07);
}

.hero .blog-link:hover,.blog-link:focus,.blog-link:active {
  background-color: rgba(255, 255, 255, 0.12);
  }



.hero .social {
  margin-top: 1.6em;
  }

.hero .social .button {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: transparent;
  color: white;
}

.hero .social .button:hover,.button:focus,.button:active {
  background-color: rgba(255, 255, 255, 0.12);
  }