Day 254

Just plugging away at it...
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

// @import url("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700");
@import "reset";

$white: #ffffff;
$darkBlue: #3a4793;
$lightBlue: #25b3ec;
$lightPurple: #9787ee;
$yellow: #ffbf3e;

*,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div {
  font-family: "Roboto";
  box-sizing: border-box;
  color: white;
}

html,
body {
  background: white;
  height: 100%;
}

#home {
  background: url("/img/forestmountain.jpg") center center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  .welcome-box {
    background: rgba(0, 0, 0, 0.3);
    padding: 40px 15px;
    text-align: center;

    h1 {
      // font-family: "Roboto";
      font-size: 28px;
      font-weight: 100;
      text-transform: uppercase;
    }
  }
}

#all-tasks {
  background: url("/img/forestmountain.jpg") center center;
  background-repeat: no-repeat;
  width: 100%;
  // height: 300px;
  background-size: cover;
  .header {
    background: rgba(58, 71, 147, 0.3);
    padding: 50px 15px;
    text-align: right;
    .logo {
      font-family: "Megrim", cursive;
      font-weight: bold;
      font-size: 24px;
      float: left;
    }
    .tasks-total {
      position: relative;
      top: -10px;
      .task {
        display: inline-block;
        margin-right: 10px;
        .number {
          color: $lightBlue;
          font-weight: bold;
          font-size: 34px;
          margin: 0 5px 0 0;
          position: relative;
          top: 5px;
        }
      }
    }
  }
  .add-circle {
    background: black;
    border-radius: 50%;
    position: absolute;
    top: 107px;
    right: 25px;
    padding: 2px 5px;
    .fa {
      color: $lightBlue;
      font-size: 48px;
    }
  }
}

.btn {
  width: 100%;
  padding: 10px 20px;
  text-align: center;
  margin: 15px 0;

  &.lightBlue {
    font-size: 25px;
    background: $lightBlue;
  }
}