* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul li {
  margin-left: 1.2rem;
}

a {
  font-weight: bold;
  color: black;
}

a:link,
a:visited,
a:active,
a:hover {
  color: black;
}

body {
  font-family: "Arial Nova", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /*background: url(webb.png) repeat;*/
  font-size: 1.1rem;
}

header,
section {
  background: rgb(102, 164, 233);
  background: linear-gradient(
    234deg,
    rgba(102, 164, 233, 1) 6%,
    rgba(135, 217, 230, 1) 76%
  );
}

h1 {
  display: inline-block;
  padding: 0 0 1rem 0;
}

@media (max-width: 1199.99px) {
  .container {
    width: 95%;
    margin: auto;
  }

  .header {
    padding: 1rem 0;
  }

  .sections {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .sections section {
    padding: 1rem;
    margin: 1rem 0;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 65%;
    margin: auto;
  }

  .header {
    padding: 3rem 0;
  }

  .sections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  /* dont want this anymore I don't think */
  .sections section {
    padding: 1rem;
    margin: 2rem 2rem 2rem 0;
    border-radius: 0 30px;
    background: rgb(247, 247, 157);
    background: linear-gradient(
      170deg,
      rgba(247, 247, 157, 1) 0%,
      rgba(247, 252, 136, 1) 35%,
      rgba(255, 235, 115, 1) 100%
    );
  }
}

/* Homepage */

.homepage {
  display: grid;
  grid-template-columns: 35% auto;
  height: 100vh;
}

.left > div {
  position: absolute;
  top: 30vh;
  left: 10vw;
  right: 75vw;
}

.left h1 {
  font-size: 3rem;
  border-bottom: 0.4rem solid black;
  padding-right: 3rem;
}

.left nav {
  padding: 2rem 0;
}

.left nav li {
  display: block;
}

.left nav ul li {
  padding-left: 0;
  margin: 1.5rem 0;
}

.right {
  background: none;
  color: #ccc;
}

.right > div > p {
  color: #000;
  padding: 5rem;
  font-size: 1.3rem;
  font-weight: 500;
}

.right > div > div {
  display: grid;
  grid-template-columns: auto auto auto;
}

.right > div > div div {
  height: 200px;
}

.right > div > div > div img {
  width: 150px;
  display: block;
  margin: auto;
}

.right .bg {
  position: absolute;
  top: 0;
  height: 300px;
  width: 100%;
  background: rgb(255, 255, 255);
  background: linear-gradient(
    0deg,
    rgba(255, 255, 255, 1) 50%,
    rgba(219, 219, 219, 1) 100%
  );
}

/* End homepage */

/* Examples */

.example {
  max-width: 700px;
  padding: 1rem 0;
  margin: 0 auto 2rem;
}

.example .img {
}

.example .img img {
  display: block;
  margin: 0 auto;
  max-width: 700px;
  max-height: 500px;
}

.example .desc {
}

/* End Examples */

/* BA Toolkit */

header.articleHeader {
  padding: 2rem 0;
}

.bg {
  width: 100%;
  height: 250px;
  position: absolute;
  z-index: -1;
  top: 100px;
  background: rgb(230, 242, 255);
  background: linear-gradient(
    180deg,
    rgba(230, 242, 255, 1) 6%,
    rgba(255, 255, 255, 1) 76%
  );
}

article section {
  background: none;
}

.content {
  line-height: 1.7rem;
}

.content p.intro {
  padding: 2rem 0;
}

.content .container > section {
  display: grid;
  grid-template-columns: 50% 50%;
}

.content section section {
  padding: 2rem 1rem;
}

.content section section h2 {
  padding: 1rem 0;
}

.content section section ul li {
  margin: 1rem;
}

.accordion .label {
  position: relative;
  border-top: 1px solid #cecece;
  border-bottom: 1px solid #0f0f0f;
  padding: 1rem;
}

.accordion .label:hover {
  cursor: pointer;
}

.accordion .label::before {
  content: "+";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}

.accordion .content {
  position: relative;
  height: 0;
  text-align: justify;
  overflow: hidden;
}

.accordion .accContainer.active .content {
  height: auto;
  padding: 1rem;
}

.accordion .accContainer.active .label::before {
  content: "-";
}

footer {
  background: rgb(10, 85, 166);
  background: linear-gradient(
    306deg,
    rgba(10, 85, 166, 1) 16%,
    rgba(18, 37, 94, 1) 58%,
    rgba(3, 27, 99, 1) 93%
  );
  color: aliceblue;
  padding: 2rem 0;
  font-size: 0.8rem;
}