style.scss

$primary: pink;
$secondary: gray;
$smallFontSize: 25px;
$titleColor: #3d3d3d;


form.haha{
          text-align: center;
          padding: 40%;
          padding-top: 10px;
          .btn-primary{
            background-color: $primary;
            border-color: $primary;
          }
}
#icon{
  text-align:center;
  padding-top: 20px;
}


// PAGE 3
%padding {
  padding-top: 20px;
  padding-left: 10%;
  padding-right: 10%;
}
.red{
  @extend %padding;
  .card-header{
    background-color: lightpink;
  }
}
.green{
  @extend %padding;
  .card-header{
    background-color: lightgreen;
  }
}
.blue{
  @extend %padding;
  .card-header{
    background-color: lightblue;
  }
}




// PAGE 2

#page2{
  padding: 10px;
}

// PAGE 1

div.container{
  margin-top: 20px;
}
.row{
  padding: 20px;
  border: 2px solid $secondary;
}




// INDEX PAGE

.badge-primary{
  background-color: $primary;
}

ul.list-group{
  margin-left: 25%;
  margin-right: 25%;
  @media (max-width: 800px) {
    margin-left: 10%;
    margin-right: 10%;
  }
}
.list-group-item{
  border-top-color: $primary;
  border-right-color: $primary;
  border-left-color: $primary;
  border-bottom-color: $primary;
}



.pageIntro {
            h1 {
              text-align: center;
              padding: 10px;
              font-weight: bolder;
              color: $titleColor;
              }
            p {
              color: $titleColor;
              text-decoration: none;
              font-size: $smallFontSize;
              }
            ul{
              list-style-type: none;
              margin: 0;
              padding: 0;
              font-size: $smallFontSize * 0.8;
              color: $secondary;
              }
            }




// NAV BAR

#customNav{
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;

    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: $primary;

    }

  li {
    float: right;
  }


  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    font-weight: bold;
  }

  li a:hover {
      background-color: $secondary;
      color: $primary;
  }

  #Home {
      float: left;
  }

  @media (max-width: 800px) {
      li a{
        padding: 20px;
      }
      ul {
        padding: 10px;
      }
    }
}