* {
  box-sizing: border-box;
}

html {
  font-size: 10px;
}

a:link {
  text-decoration: none;
}

div {
  padding: 2rem 3rem 2rem;
  margin: 0 auto
}

#logo {
  margin-left: 3rem;
  object-fit: contain;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  width: 40px;
}

/*navigation*/
.navbar {
  background-color: white;
  font-family: "Roboto";
  font-size: 1.4rem;
  margin: auto;
  width: 100%;
  z-index: 10;
  font-weight: 600;
  box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.11);
}

.main-nav {
  background-color: #ebe2f4;
  list-style-type: none;
  display: none;
  padding: 2rem;
  z-index: 3;
}

.main-nav a {
  color: black;
  text-decoration: none;
}

.main-nav .current {
  color: #9B51E0;
}

.navbar a {
  cursor: pointer;
  display: block;
  font-size: 1.8rem;
  text-decoration: none;
}

.nav-links:hover, .fab:hover {
  color: #9B51E0;
}

.main-nav li {
  margin-left: auto;
  margin-right: auto;
  padding-top: .5rem;
  text-align: center;
  line-height: 4.3rem;
  display: block;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar-toggle {
  cursor: pointer;
  font-size: 2.5rem;
  position: absolute;
  margin: 1.6rem 2rem 0rem 2rem;
  right: 20px;
}

.active {
  display: block;
}

/* INDEX.HTML */
.blocjamcontainer h1, .busybuscontainer h1, .hero h1 {
  text-align: center;
  font-family: "lora";
  font-size: 36px;
  font-weight: bold;
  margin-top: 10rem;
  color: #000000;
}

.hero p {
  font-family: "Lora";
  text-align: center;
  line-height: 2.7rem;
  margin-top: 4rem;
  width: 89%;
  margin: 0 auto
}

.down-arrow {
  margin-top: 80px;
  margin-left: 46%;
  width: 8%;
}

.hero h2 {
  color: #9B51E0;
  text-align: center;
  font-family: "lora";
  font-size: 30px;
  font-weight: bold;
  margin-top: 5rem;
  margin-bottom: 3rem;
  font-style: italic;
}

.hero h1 {
  line-height: 140%;
  margin-left: 0.7%;
}

.form-container h2 {
  margin-top: 7rem;
  margin-bottom: 7rem;
  color: #9B51E0;
  font-weight: 500;
}

.project1 h3, .project2 h3, .project3 h3, .project4 h3 {
  text-align: left;
  font-family: "Lora";
  font-size: 40px;
  margin-top: 40px;
  font-weight: bold;
  color: #000000;
}

.project1 p, .project2 p, .project3 p, .project4 p {
  font-family: "Lora";
  margin-bottom: 4rem;
  font-size: 1.8rem;
  line-height: 2.7rem;
}

.project1 {
  background-color: #D8C2ED;
  width: auto;
}

.project2 {
  background-color: #A96E97;
  width: auto;
}

.project3 {
  background-color: #F2F2F2;
  width: auto;
}

.project4 {
  background-color: #F39A9A;
  width: auto;
}

.button-cta, .button-hero-cta {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
  display: block;
  background-color: #9B51E0;
  font-family: "Roboto";
  text-align: center;
  border-radius: 10px;
  width: 300px;
  height: 60px;
  padding: 2rem 4rem 2rem;
}

.button-hero-cta {
  margin: 0 auto;
}

.button-cta:hover, .button-hero-cta:hover {
  background-color: #A876D7;
}

.blocjams, .cirrus, .busybus, .dog-mockup {
  height: auto;
  width: 100%;
  margin-bottom: 1rem;
}

.busybus {
  width: 50%;
  margin: 0 auto;
  display: block;
}

h4 {
  font-size: 18px;
  font-weight: 500;
  margin-top: 20px;
  font-family: "lora";
}

p.footer-copy {
  font-family: "lora";
  text-align: center;
  margin-top: 2rem;
  font-size: 1.5rem
}

.Background a {
  padding: 1.5rem;
}

.Background {
  text-align: center;
  width: auto;
  margin-top: 10rem;
  background-color: #DAC5ED
}

.fab {
  width: 30px;
  height: 30px;
  margin-bottom: 5rem
}

#footer-btn {
  letter-spacing: .15rem;
}

.light-wire {
  border: 3px solid #9B51E0;
  color: #000000;
  display: block;
}

.btn {
  border-radius: 2px;
  font-style: normal;
  text-align: center;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 167.23%;
}

.content-box-narrow {
  margin: 0 auto;
  width: 60%;
}

#footer-btn-container {
  margin: 1.2rem 0 6.4rem 0;
}

.copyright p {
  font-size: 16px;
  text-align: center;
}

/* About.html */
.picture {
  margin-top: 4rem;
  width: 100%;
}

.aboutme p {
  line-height: 2.6rem;
  text-align: left;
  font-family: "Lora";
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.aboutme h5 {
  font-size: 20px;
  margin-bottom: 5.5rem;
  color: #000000;
}

.aboutme h4 {
  margin-top: 1.5rem;
  font-family: "Roboto";
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 3rem;
}

/* Contact.html */
/*form*/
label {
  font-family: "lora";
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 2.2rem;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

input[type=text], seclect {
  font-family: "lora";
  font-size: 1.4rem;
  height: 40px;
  margin: 1.3rem 0rem 2rem;
  outline: none;
  padding: 1.2rem 2rem;
  width: 100%;
}

textarea#styled {
  border: 1px solid #c9c4c4;
  font-family: "lora";
  font-size: 1.5rem;
  height: 12rem;
  margin: 1.5rem 0;
  outline: none;
  padding: 2rem;
  resize: none;
  width: 100%;
}

#message {
  height: 20rem;
}

.form-container {
  padding: 3rem 5rem 5rem;
}

#button {
  background-color: #9B51E0;
  border-radius: .5rem;
  color: white;
  display: inline-block;
  font-family: "lora";
  font-weight: 500;
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  padding: 1rem 2.5rem;
  text-decoration: none;
}

/* Busybus.html */
.busy-bus {
  width: 50%;
  margin: 0 auto;
  display: block;
}

.busybuscontainer p {
  text-align: center;
  margin-bottom: 4rem;
}

.complogos1 img {
  width: 60%;
  margin: 0 auto;
  display: block;
}

.complogos2 img {
  width: 60%;
  margin: 0 auto;
  display: block;
  margin-top: 6rem;
}

.buses img, .bus-sketch img {
  width: 100%;
  margin-top: 2rem;
}

/* Blocjam.html */
.bloc-jams {
  height: auto;
  margin-bottom: 2rem;
  margin-top: 4rem;
  width: 100%;
}

/* Cirrus.html */
.cir-rus {
  width: 100%;
}

.cirrus-background {
  background-color: #D8C2ED;
}

.cirrus p {
  font-weight: 500;
  text-align: center;
}

.cloud {
  margin-top: 2rem;
  display: block;
  margin: 0 auto
}

.comp-logos {
  display: block;
}

.projectgroup {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 1%;
  margin-right: 1%;
  margin-bottom: 3rem;
}

.projectgroup img {
  margin-bottom: 3rem;
}

h1 {
  color: #9B51E0;
  text-align: center;
  font-family: "lora";
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 3rem;
  line-height: 30px;
}

p {
  font-family: "Lora";
  line-height: 2.6rem;
  font-size: 16px;
  margin-bottom: 2rem;
}

.case-buttons {
  margin-bottom: 4rem;
}

.underline {
  background: linear-gradient(0deg, rgba(215, 185, 243, 1) 0%, #9B51E0 16%, rgba(215, 185, 243, 1) 16%, rgba(215, 185, 243, 1) 41%, rgba(215, 185, 243, 0) 41%);
}

#role, #deliverables, #tools {
  padding: 30px;
}

li {
  font-family: "Lora";
  font-size: 16px;
  line-height: 2.6rem;
  text-align: center;
}

.user-persona-container h3 {
  text-align: center;
  font-family: "Roboto";
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 1rem;
  color: #000000;
}

.problem img, .solution img {
  margin: 0 auto;
  display: block;
}

h2 {
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  font-family: "Roboto";
}

b {
  font-weight: bold;
}

.survey-graphic {
  display: block;
  margin: 0rem auto;
  width: 30%;
}

.survey-text {
  margin: 0 auto;
  max-width: 35rem;
  text-align: center;
}

.complogos {
  display: block;
}

.biz {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 1%;
  margin-right: 1%;
}

.complogos img {
  width: 30%;
  padding: 2%;
  align-items: center;
  margin-bottom: 1rem;
}

strong {
  font-size: 1.9rem;
  font-family: "Roboto";
  font-weight: 500;
  text-decoration: none;
  color: #9B51E0;
}

.user-persona-container {
  padding: 0rem 2rem 0rem;
}

.personasone, .personastwo {
  border-radius: .4rem;
  background-color: #FFF;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.persona1, .persona2 {
  display: block;
  width: 50%;
  margin: 0 auto;
}

.personasone {
  margin-bottom: 6rem;
}

.personastwo {
  margin-bottom: 4rem;
}

.complogos li {
  text-decoration: none;
  text-align: center;
}

.biz ul {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  padding-bottom: 7%;
}

li {
  list-style-type: none;
}

h3 {
  text-align: center;
  font-family: "Roboto";
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
  margin-top: 20px;
  color: #9B51E0;
}

h5 {
  text-align: center;
  font-family: "lora";
  font-weight: 500;
  margin-top: 2rem;
  margin-bottom: 3rem;
  font-size: 1.5rem;
  line-height: 2rem;
  color: #9B51E0;
}

h6 {
  text-align: center;
  font-family: "lora";
  font-size: 2.5rem;
  font-weight: 400;
  margin-top: 2rem;
}

.userstories-container {
  padding: 0rem 2rem 0rem;
  text-align: center;
}

.high-priority, .medium-priority, .low-priority {
  padding: 4.8rem;
  border-top: .4rem solid;
  border-radius: .4rem;
  background-color: #FFF;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.high-priority {
  border-color: #9B51E0;
}

.medium-priority {
  border-color: #56CCF2;
  margin: 4.8rem 0rem;
}

.low-priority {
  border-color: #EB5757;
}

p.paragraph-medium-bold {
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: 0;
  color: #9B51E0;
}

.flow1 img, .flow2 img, .flow3 img, .flow4 img {
  width: 90%;
  margin: 0 auto;
  display: block;
}

.flow1 h3 {
  margin-top: 10x;
}

.flow2 img {
  width: 60%;
}

.sketch1 img, .wireframe1 img, .Usability-Testing img, .mockups1 img {
  width: 100%;
}

.sketch-wireframe p {
  margin-bottom: 1px;
}

.Usability-Testing img {
  margin-top: 1rem;
  margin-bottom: 3rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.sketch, .wireframe {
  background-color: #F2F2F2;
  margin-bottom: 4rem;
}

.mockups, .highpriority, .wireframe {
  background-color: #F2F2F2;
  width: auto;
  margin-bottom: 4rem;
}

.branding img {
  margin-top: 15px;
  width: 100%;
}

.Usability-Testing h4 {
  margin-top: 0px;
  margin-bottom: 2rem;
  text-align: center;
}

.color-pallette img {
  margin-bottom: 4rem;
  margin-top: 15px;
  width: 100%;
}

.brandlogo {
  margin-top: 15px;
  width: 100%;
}

.typography img {
  width: 100%;
  margin-top: 15px;
}

.cirrus-logo img, .branding img {
  margin-bottom: 2rem;
  width: 100%;
}

.final-product h3 {
  margin-top: 15rem;
}

.final-product p {
  text-align: center;
  font-family: "lora";
  font-style: italic;
  font-size: 22px;
  font-weight: bold;
  color: #56CCF2;
  margin-top: 10rem;
}

/**back to top**/
#myBtn {
  position: fixed;
  bottom: 15px;
  right: 9px;
  z-index: 99;
  font-size: 17px;
  border: none;
  background-color: #9B51E0;
  cursor: pointer;
  padding: 10px;
  border-radius: 12px;
}

#myBtn:hover {
  color: white;
  background-color: #9b51e0;
}

/* project2.html */
.bestbuddy img {
  width: auto;
  margin: 0 auto;
  display: block;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.doggo {
  display: block;
  margin: 0 auto;
  width: 100%;
}

.bestbuddy p {
  width: 80%;
  display: block;
  font-weight: 500;
  margin: 0 auto;
  text-align: center;
  margin-bottom: 4rem;
}

.personas, .persona {
  display: block;
  width: 50%;
  margin: 0 auto;
}

.flow img, .wireframing img, .style-guide img, .final-mockup img {
  width: 100%;
}

.developing-logo img {
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.style-guide img {
  margin-bottom: 20%;
}

.style-guide p {
  margin-bottom: 0rem;
}

.flow {
  margin-bottom: 4rem;
}

.flow, .wireframing, .final-mockup {
  background-color: #EB5757;
  width: 70%;
}

.doggo-background {
  background-color: #F39A9A;
}

.final-mockup, .doggo-Background {
  width: auto;
}

.wireframing, .final-mockup {
  margin-bottom: 4rem;
}

/*tablet*/
@media screen and (min-width: 768px) {
  div {
    width: 80%;
    margin: 0 auto;
  }

  .aboutme h5 {
    font-size: 30px;
  }

  .picture {
    width: 80%;
    margin-left: 10%
  }

  #footer-btn-container {
    margin: 1.2rem 0 9.4rem 0;
  }

  p.footer-copy {
    padding: 0rem 14rem 0rem;
  }

  .btn {
    font-size: 2.5rem;
  }

  h4 {
    font-size: 2.5rem;
  }

  .problem h3, .solution h3 {
    margin-top: 20px;
  }

  .finding h3 {
    margin-top: 20px;
  }

  .navbar {
    background-color: white;
    display: flex;
    justify-content: space-between;
    padding-bottom: 0;
    height: 85px;
    z-index: 10;
  }

  .main-nav {
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 2.2rem;
  }

  .main-nav li {
    margin: 0;
  }

  .main-nav a {
    x font-size: 1.7rem;
    font-family: "lora";
    margin-right: 40px;
  }

  .nav-links {
    color: black;
    font-size: 1.7rem;
    font-family: "lora";
    margin-right: 40px;
    text-decoration: none;
  }

  #logo {
    margin-top: 1.2rem;
    display: inline;
    margin-left: 5rem;
  }

  .navbar-toggle {
    display: none;
  }

  .form-container {
    padding: 3rem 15rem 5rem;
  }

  /* Cirrus.page */
  .cirrus p {
    width: 60%;
    margin: 0 auto;
    display: block;
  }

  .comp-logos {
    display: flex;
    margin-top: 10rem;
  }

  .survey1, .survey2 {
    display: flex;
    padding: 0rem 9rem 0rem;
  }

  .complogos {
    display: flex;
    padding: 2rem 1rem 0 1rem;
  }

  .user-persona-container {
    padding: 0 4.4rem;
    display: flex;
  }

  .personasone, .personastwo {
    margin-bottom: 8rem;
  }

  .userstories-container {
    flex-direction: row;
    display: flex;
    margin-bottom: 8rem;
  }

  .medium-priority {
    margin: 0 4.8rem;
  }

  .cloud {
    margin-left: 43%;
  }

  .mockups {
    margin-bottom: 8rem;
  }

  .hero p {
    width: 66%;
  }

  .user-research h3 {
    margin-top: 25px;
  }

  h3 {
    margin-top: 60px;
  }

  .down-arrow {
    margin-left: 48%;
    width: 5%;
  }

  .busy-bus {
    margin-bottom: 2rem;
    margin-top: 4rem;
    width: 80%;
    margin-left: 10%;
    padding: 0rem 14rem 0rem;
  }

  /*desktop*/
  @media screen and (min-width: 1280px) {
    div {
      margin: 0 auto;
      width: 51%
    }

    .aboutme p {
      margin: 0 auto;
      display: block;
      margin-bottom: 1.5rem;
      margin-top: 1.5rem;
    }

    .picture {
      width: 50%;
      margin-left: 24%
    }

    h4 {
      font-size: 3rem;
      margin-bottom: 3rem;
    }

    .content-box-narrow {
      margin: 0 auto;
      width: 20%;
    }

    p.footer-copy {
      padding: 0rem 38rem 0rem;
      font-size: 2rem;
    }

    .btn {
      font-size: 2rem;
    }

    .cloud {
      margin-left: 43%;
    }

    /* index.page */
    .hero p {
      padding: 0rem 10rem 0rem;
      display: block;
      margin: 0 auto
    }

    .down-arrow {
      margin-left: 48%;
      width: 2%;
    }

    .cirrus, .blocjams, .busybus, .dog-mockup {
      width: 50%;
    }

    .busybus {
      width: 25%;
      margin-top: 1rem;
      margin-bottom: 0rem;
    }

    .project1 p, .project2 p, .project3 p, .project4 p {
      width: 80%;
    }

    .project1, .project2, .project3, .project4 {
      padding: 5rem 10rem 5rem;
      margin: 0 auto;
      display: flex;
      align-items: center;
    }

    .project3 {
      padding: 5rem 3rem 5rem;
    }

    .form-container {
      padding: 3rem 40rem 5rem;
    }

    #logo {
      margin-left: 6rem;
    }

    /* Cirrus.html */
    .projectgroup img {
      margin-bottom: 0rem;
    }

    .comp-logos {
      padding: 0rem 10rem 0rem;
    }

    #role, #deliverables, #tools {
      padding: 0rem 2rem 0rem;
    }

    h3 {
      font-size: 2.7rem;
    }

    h2 {
      font-size: 36px;
      margin-top: 2rem;
    }

    .user-research h3 {
      margin-top: 35px;
    }

    .hero h1 {
      font-size: 40px;
    }

    .survey1, .survey2 {
      display: flex;
      padding: 0rem 30rem 0rem;
    }

    .survey-text {
      margin: 0 auto;
      text-align: center;
      padding: 0rem 3rem 0rem;
    }

    .complogos {
      display: flex;
      padding: 0rem 10rem 0rem;
    }

    .personasone {
      margin-right: 2rem;
      width: 100%;
      margin-left: 15%;
    }

    .personastwo {
      margin-left: 2rem;
      width: 100%;
      margin-right: 15%;
    }

    .userstories-container {
      padding: 0rem 15rem 0rem;
      text-align: center;
    }

    .color-pallette img, .Branding img {
      width: 100%;
    }

    .color-pallette img {
      margin-bottom: 4rem;
      margin-top: 3rem;
    }

    .brandlogo {
      margin-top: 25px;
      width: 100%
    }

    .final-product p {
      font-size: 43px;
    }

    .test1 {
      margin-bottom: 6rem;
    }

    /* project.page */
    .doggo {
      display: block;
      margin: 0 auto;
      width: 70%;
    }

    .bestbuddy p {
      padding: 0rem 6rem 0rem;
    }
  }