@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:700,700italic,regular,italic');

* {
   box-sizing: border-box;
}

body {
   font-family: 'Source Sans Pro', sans-serif;
   font-weight: 300;
   background-color: #f0f0f0;
   background-image: url('../img/railroad-bg.png');
   background-repeat: no-repeat;
   background-size: cover;
   color: #000000;
   min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Source Sans Pro', sans-serif;
   font-weight: bold;
}

.link {
   color: #F86C37;
   text-decoration: none;
}
.link:hover {
   color: #F86C37;
   text-decoration: underline;
}

/* ==========================================================================
Sektion: header
========================================================================== */
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
   background-color: #F86C37;
}
.nav-pills .nav-link {
   color: #000000;
}
 
 /* ==========================================================================
Sektion: quiz
========================================================================== */
.quiz {
   margin-top: 2%;
   margin-bottom: 2%;
   text-align: center;
}
.question {
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 36px;
   font-weight: 500;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   min-height: 100px;
   margin-bottom: 1rem;
}
.options .col-sm {
   margin: 0.5rem 0;
}
.options .card-body {
   cursor: pointer;
   border: 2px solid #ffffff;
   border-radius: 2px;
}
.options .card-body:hover {
   border: 2px solid #F86C37;
}
.giphy {
   width: 400px;
   max-width: 100%;
}
.btn-q {
   border: 2px solid #F86C37;
   background-color: #fff;
   color: #000;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   text-align: center;
   text-decoration: none;
   font-size: 16px;
   font-weight: bold;
   padding: 6px 15px;
   transition: transform 0.25s;
   height: 40px;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.btn-q:hover {
   border: 2px solid #F86C37;
   background-color: #fff;
   color: #000;
   cursor: pointer;
}
.game .btn-q {
   margin-top: 2rem;
}
.game .btn-q:first-child {
   margin-right: 0;
}

/* ==========================================================================
Sektion: ad cards
========================================================================== */
.ad-image-1 {
   background-image: url(../img/youtube.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}
.ad-image-2 {
   background-image: url(../img/guides.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}
.ad-image-3 {
   background-image: url(../img/blog.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
}

.ad-card__btn {
   display: inline-block;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   text-align: center;
   text-decoration: none;
   font-size: 14px;
   font-weight: bold;
   padding: 7.5px 15px;
   transition: transform 0.25s;
}
.ad-card__btn:hover {
   color: #fff;
}
.youtube {
   background-color: #f00;
   color: #fff;
}
.guides {
   background-color: #F86C37;
   color: #fff;
}
.blog {
   background-color: #cd2653;
   color: #fff;
}

/* ==========================================================================
Sektion: media queries
========================================================================== */
@media all and (max-width: 767px) {
   header {
      justify-content: center;
   }
   body {
      background-image: linear-gradient(180deg, #ffffff, rgba(255, 255, 255, 0));
   }
}