/*Colors inspired by: https://colorhunt.co/palette/258092 */
* {
  margin: 0;
  padding: 0;
}

/*body, nav {
  background: linear-gradient(95deg, #1f6fd2, navy);
/*  background: linear-gradient(90deg, navy, #3f8fd2); */
body {
  background: linear-gradient(65deg, #eae3c8 50%,  #c2b092 50%);
  /* background: linear-gradient(60deg, #2D5E75, #889AE7, #4ca0cf, #4A9CC2, #506975) */
  /* background: linear-gradient(80deg, navy, #177bcc); */
/*  background: #0a6acc; */
}

img {
    height: 150px;
    width: 150px;
    border-radius: 50%;
  }

/*figure {
  float: left;
  margin: 10px 0 10px 10px;
}
*/

.img-text {
  float: right;
  text-align: center;
  width: 45%;
  margin-left: 10px;
  margin-top: 0;
  margin-bottom: 1.5%;
/*  margin-right: 30px;*/
  /* margin: 50px auto; */
/*  color: #eae3c8; */
  color: #a1cae2;
/* Opacity changes both fonts and background to more transparent
  To just change the background and leave the font non-transparent, use rgba
  background: rgba(0,0,0,0.6); */
  background: black;
  opacity: 0.8;
  padding-top: 10px;
  padding-bottom: 20px;
  padding-right: 30px;
  border-radius: 30px;
  border-top-right-radius: 0px;
  font-size: 1.1rem;
}



.img-text h1{
  color: #3f8fd2;
  color: #e1e1e1;
  padding-top: 10px;
  padding-bottom: 10px;
/*  color: #a1cae2; */
}

hr {
  clear: both;
  opacity: 0;
  margin-bottom: 15px;
}

h3 a{
  position: absolute;
  right: 7%;
  font-size: .9rem;
  text-decoration: none;
}

nav {
/*  background: #3f8fd2; */
/*  background: #eae3c8; */
  margin: 0;
  padding: 10px 2px 0 4px;
}

/* ul {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
}

li {
    width: 100px;
    height: 100px;
    border: 1px solid navy;
    justify-items: space-between;
    list-style-type: none;
    padding: 10px;
} */

strong {
    display: block;
    font-weight: normal;
}

/*section {

}*/

.container {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

.box {
    width: 100px;
    height: 100px;
    border: 1px solid navy;
    padding: 10px;
    /* background: hsl(130,50%,88%); */
    /* background: #cfc5a5; */
}

.non-striped .box {
  background: hsl(130,50%,88%);
}

.striped .box {
  background: #EFDDFF;
}


  div {
    text-align: right;
    padding: 0px 25px;
    font-size: 1.1rem;
  }

  nav a {
/*    color:#a1cae2;
    color: #3f8fd2; */
    color: #cfc5a5;
/*    color: #c2b092; */
    text-decoration: none;
    background: black;
    /* opacity: .6; */
    padding: 2px;
  }

  nav div {
    color: #3f8fd2;
    /*background: black;
    opacity: .6;*/
  }

  nav {
  margin-top: 0px;
  margin-left: 50%;
  /* margin-right: 30px; */
  padding-top: 20px;
  padding-bottom: 7px;
  background: black;
  opacity: .8;
  }

  nav a:hover {
/*    color: #a1cae2; */
    color: #3f8fd2;
  }

header {
  background-image: url("https://images.freeimages.com/images/large-previews/89e/screens-row-1243513.jpg");
  background-position: center;
  background-size: cover;
  height: 350px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

  .hidden {
    display: none;
  }

  h2, h3 {
    /*Dark Brown */
    /* color: #927022; */
    color: snow;
    padding: 10px 0;
  }

  h2 {
    text-align: center;
    font-size: 1.4rem;
  }

  h3 {
/*    color: #4a47a3; Steel purple color */
    font-size: 1.3rem;
  }

  .box.completed {
    background: #a1cae2;
    text-decoration: line-through;
  }

  .in_progress {
    /*Lighter than slate purple-- background: #6a67b3; */
    /*Bright/deep blue for in_progress */
    background: #3f8fd2;
/*    Pretty pink background color
background: rgb(255,100,150); */
  }

  article {
    padding: 20px 3%;
    margin: 2% 3%;
/*    opacity: 0.8; */
    border-radius: 30px;
  }

  article.striped {
    background: linear-gradient(45deg, #8811B5 50%, #AF8DF5 50%)
    /* background: linear-gradient(45deg, #2d577e 50%, #4887C2 50%) */
      /* background: linear-gradient(45deg, hsl(8, 60%, 30%) 50%, hsl(8,30%,65%) 50%); */
/*    background: linear-gradient(45deg, #eae3c8 50%, #c2b092 50%); */
/*    background: #eae3c8; */
  }

  /* article.striped .box {
    background: #CFBDF5;
  } */

  article.non-striped{
    background: linear-gradient(45deg, hsl(150,50%,65%) 50%,  hsl(150,50%,35%) 50%);
/*    background: linear-gradient(45deg, #c2b092 50%,  #eae3c8 50%); */
/*    background: #c2b092;*/
  }

a {
  color: navy;
  text-decoration-style: dotted;
}

footer {
/*  background: #3030b0; */
  background: #4595c4;
  text-align: center;
  font-size: 0.9rem;
  padding-top: 3px;
  padding-bottom: 3px;
}