Day 290

Part three of four of the mixer.com clone.  Trying to figure out an issue with the background...
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

@import url("reset.css");
@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700&display=swap");

html,
body {
  background: #253141;
  // background: #253141; /* Old browsers */
  // background: -moz-linear-gradient(
  //   top,
  //   #253141 0%,
  //   #7db9e8 100%
  // ); /* FF3.6-15 */
  // background: -webkit-linear-gradient(
  //   top,
  //   #253141 0%,
  //   #7db9e8 100%
  // ); /* Chrome10-25,Safari5.1-6 */
  // background: linear-gradient(
  //   to bottom,
  //   #253141 0%,
  //   #7db9e8 100%
  // ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  font-family: "Montserrat", sans-serif;
  // background-image: linear-gradient(
  //     to bottom,
  //     rgba(37, 49, 65, 0.7) 0%,
  //     #253141 75%,
  //     #253141 100%
  //   ),
  //   url("http://feed4gamers.com/imgs/2016-10-19-21-33-33/halo-wars-2-image-1920.jpg");
  background-size: cover;
  // background-position: center;
  // background-repeat: no-repeat;
  header {
    display: flex;
    justify-content: space-between;
    padding: 30px;
    .left-menu {
      display: flex;
      .logo {
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
      }
      .menu {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 50px;
        a {
          color: rgba(255, 255, 255, 0.6);
          text-decoration: none;
          font-weight: 500;
          padding: 0 25px;
          &:hover {
            // font-weight: 600;
            color: #fff;
          }
        }
      }
    }
    .right-menu {
      display: flex;
      justify-content: center;
      align-items: center;
      .language {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        padding-right: 60px;
        font-weight: 500;
        &:hover {
          // font-weight: 600;
          color: #fff;
        }
      }
      .signin {
        background: #0375d5;
        border-radius: 5px;
        padding: 10px 20px;
        font-size: 0.8rem;
        color: #fff;
        font-weight: 700;
      }
    }
  }
  #featured {
    padding: 10px 0;
    .container {
      width: 1400px;
      margin: 0 auto;
      .title {
        font-size: 1.8rem;
        color: #fff;
        font-weight: 500;
        margin-bottom: 20px;
      }
      .videos-section {
        display: grid;
        grid-template-columns: 1fr 2fr 620px 2fr 1fr;
        grid-gap: 10px;
        .video {
          display: flex;
          justify-content: center;
          align-items: center;
          .image {
            width: 100%;
            height: 300px;
            background: url("https://i.ytimg.com/vi/yq1d_NHtwOI/maxresdefault.jpg");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
        .video:nth-child(1) .image,
        .video:nth-child(5) .image {
          position: relative;
          .arrow {
            height: 100%;
            position: absolute;
            background: rgba(0, 0, 0, 0.4);
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            .fa {
              font-size: 4rem;
              color: #00b4f0;
            }
          }
        }
        .video:nth-child(5) .image {
          .arrow {
            right: 0;
          }
        }
        .center {
          width: 100%;
          height: 349px;
          .image {
            width: 100%;
            height: 100%;
            background: url("https://i.ytimg.com/vi/GT6ushVNkGY/maxresdefault.jpg");
            transform: scale(1.02);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            border: 2px solid #00b4f0;
          }
        }
      }
      .dots {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        .circles-section {
          display: flex;
          justify-content: center;
          align-items: center;
          .circle {
            width: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .background-color {
              // margin: 0 8px;
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: #bdc2c4;
              transition: all 0.2s ease-in-out;
              &:hover {
                width: 15px;
                height: 15px;
                background: #00b4f0;
              }
              &.active {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: #00b4f0;
              }
            }
          }
        }
      }
    }
  }
}