/**

Authored by:  @jg_digitalMedia
Web:          https://www.jonniegrieve.co.uk/assets/project_status_images
Last Update:  14/08/2026 - 13:50
Description:  Project Status Homepage with clickable images (Projects)


*/
* {
  padding: 0;
  margin: 0;
}

/* header.scss */
body {
  background: #0f172a;
  /* font-family: Arial; */
  /* font-family: 'Roboto', sans-serif; */
  /* font-family: 'Lato', sans-serif; */
  /* font-family: 'Allerta', sans-serif; */
  /* font-family: 'Marvel', sans-serif; */
  font-family: "Mali", cursive;
}

header {
  position: sticky;
  top: 0px;
  width: 100%;
  min-height: 105px;
  padding: 0;
  background: #1a3352;
  color: white;
  font-family: "Poppins";
  border-bottom: 1px solid #8b8b8b;
  z-index: 10000;
}
@media (max-width: 940px) {
  header {
    /* min-height: 110px; */
    min-height: 90px;
  }
}
header h1 {
  text-align: center;
  font-size: 30px;
}
@media (max-width: 940px) {
  header h1 {
    font-size: 18px;
  }
}
header .key {
  position: relative;
  top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
  width: 97%;
  text-align: right;
  margin: 0px auto;
  font-size: 12px;
  /* right: 2px; */
}
@media (max-width: 1290px) {
  header .key {
    display: block;
    text-align: center;
    position: relative;
    top: 20px;
  }
}
@media (max-width: 940px) {
  header .key {
    display: block;
    margin: 0px auto;
    width: 85%;
    line-height: 2;
    font-size: 12px;
    padding: 5px 0;
    /* height: 115px; */
    /* min-height: 100px; */
    min-height: 65px;
    height: auto;
  }
}
@media (max-width: 680px) {
  header .key {
    margin: 0px auto 15px auto;
  }
}
header .key h1 {
  text-align: center;
}
header .key h2 {
  width: auto;
  display: inline-block;
  /* font-size: 14px; */
  /* font-size: 12px; */
  /* font-weight: normal; */
  /* margin-right: 15px; */
  margin: 0 5px;
}
header .key span#green-complete {
  display: inline-block;
  background: #008000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
header .key span#red-incomplete {
  display: inline-block;
  background: #ff0000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
header .key span#yellow-review {
  display: inline-block;
  background: #ffff00;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
header .key span#orange-upcoming {
  display: inline-block;
  background: #ff9005;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
header .key span {
  font-size: 14px;
}

#container {
  display: flex;
  /* grid-auto-columns: 1fr 1fr; */
  position: relative;
  /* font-family: "Poppins"; */
  font-family: "Poppins";
  /* background: #ffd272; */
  /* color: white; */
  color: white;
  margin: 25px auto;
  line-height: 2.1;
  width: 60%;
}
@media (max-width: 1080px) {
  #container {
    width: 95%;
  }
}
@media (max-width: 940px) {
  #container {
    flex-direction: column-reverse;
    width: 80%;
  }
}
@media (max-width: 680px) {
  #container {
    width: 95%;
  }
}
#container .project_list {
  display: block;
  border: solid 1px #1b4e62;
  background: #1a3352;
  width: 90%;
  border-radius: 10px;
  /* color: #fffb83; */
  /* color: #89ddff; */
  color: #89ddff;
}
@media (max-width: 940px) {
  #container .project_list {
    width: 90%;
    margin: 0 auto;
  }
}
@media (max-width: 680px) {
  #container .project_list {
    font-size: 3vw;
  }
}
#container .project_list .project_status_header {
  text-align: center;
}
#container .project_list h2 {
  text-align: center;
}
#container .project_list ul {
  list-style-type: none;
}
@media (max-width: 940px) {
  #container .project_list ul {
    margin: 0 auto;
  }
}
#container .project_list li {
  display: inline-block;
  /* height: 45px; */
  width: 29%;
  vertical-align: top;
  margin: 0 7px;
}
@media (max-width: 940px) {
  #container .project_list li {
    width: 47%;
  }
}
@media (max-width: 680px) {
  #container .project_list li {
    display: block;
    width: 55%;
    margin: 0 auto;
  }
}
#container .project_list li em {
  font-weight: bold;
}
#container .project_list li .project_info .complete {
  display: inline-block;
  background: #008000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
#container .project_list li .project_info .incomplete {
  display: inline-block;
  background: #ff0000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
#container .project_list li .project_info .under_review {
  display: inline-block;
  background: #ffff00;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
#container .project_list li .project_info .upcoming {
  display: inline-block;
  background: #ff9005;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
#container .project_list a {
  text-align: center;
  color: #89ddff;
  transition: 0.3s;
}
#container .project_list a:hover {
  color: #3ab2e2;
}
#container .project_list a img {
  width: 100%;
  content: "data image";
  border-radius: 6px;
  border: solid 1px #8b8b8b;
  transition: 0.2s border;
}
#container .project_list a img:hover {
  border: solid 1px #89ddff;
}
#container .project_list .project_info {
  content: "project_info";
  margin: 9px auto;
  font-size: 14px;
}
@media (max-width: 780px) {
  #container .project_list .project_info .project_name {
    display: inline-block;
    font-size: 12px;
    text-align: center;
  }
}
#container .project_list ul#project-status {
  float: left;
  margin: 0 5% 0 5%;
}
#container .main-content-repos,
#container .main-content-notespage {
  display: block;
  width: 66%;
  padding: 20px;
  /* background: #1a3352; */
  background: #1a3352;
  border-radius: 10px;
  border: solid 1px #1b4e62;
  /* color: #fffb83; */
  /* color: #89ddff; */
  color: white;
  /* font-size: 12px; */
}
@media (max-width: 940px) {
  #container .main-content-repos,
  #container .main-content-notespage {
    width: 90%;
  }
}
@media (max-width: 680px) {
  #container .main-content-repos,
  #container .main-content-notespage {
    font-size: 3.5vw;
  }
}
#container .main-content-repos .project_status_header,
#container .main-content-notespage .project_status_header {
  text-align: center;
}
#container .main-content-repos p,
#container .main-content-notespage p {
  margin: 17px auto;
  line-height: 1.6;
}
#container .main-content-repos a,
#container .main-content-notespage a {
  text-align: center;
  color: #89ddff;
  transition: 0.3s;
}
#container .main-content-repos a:hover,
#container .main-content-notespage a:hover {
  text-decoration: none;
  color: #3ab2e2;
}
#container .main-content-repos h2,
#container .main-content-notespage h2 {
  text-align: center;
  /* color: #7eb9e5; */
  /* color: #c3e88b; */
  /* color: #89ddff; */
  color: #89ddff;
}
#container .main-content-repos li,
#container .main-content-notespage li {
  list-style-type: none;
  margin: 6px 0;
}
#container .main-content-notespage {
  width: 55%;
  margin: 0 auto;
  font-size: 12px;
}
#container .main-content-notespage ul {
  list-style-type: none;
  margin: 6px 0;
}
#container .main-content-notespage ul li strong {
  font-weight: normal;
  color: #89ddff;
}
#container .main-content-repos {
  display: block;
  margin: 0 auto;
  width: 90%;
  padding: 0;
}
#container .main-content-repos p {
  /* color: $col---secondary; */
  /* text-align: center; */
  font-size: 12px;
  text-align: left;
}
#container .main-content-repos p #repo_count {
  color: #89ddff;
}
#container .main-content-repos ul {
  text-align: center;
  list-style-type: none;
  margin: 6px auto;
  /* width: 45%; */
  width: 100%;
}
#container .main-content-repos ul li {
  display: inline-block;
  vertical-align: top;
  /* width: auto; */
  width: 35%;
  margin: 0 50px;
}
@media (max-width: 950px) {
  #container .main-content-repos ul li {
    width: 43%;
    margin: 0 10px;
  }
}
@media (max-width: 530px) {
  #container .main-content-repos ul li {
    width: 75%;
  }
}
#container .main-content-repos ul li strong {
  font-weight: normal;
  color: #89ddff;
}
#container .main-content-repos ul li a img {
  width: 100%;
  border: solid 1px gray;
  border-radius: 7px;
  transition: 0.3s border;
}
#container .main-content-repos ul li a img:hover {
  border: solid 1px #89ddff;
}
#container .main-content-repos ul li aside.key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px auto;
  font-size: 14px;
}
#container .main-content-repos ul li aside.key .complete {
  display: inline-block;
  background: #008000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
#container .main-content-repos ul li aside.key .incomplete {
  display: inline-block;
  background: #ff0000;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
#container .main-content-repos ul li aside.key .ongoing {
  display: inline-block;
  background: #ffff00;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}
#container .main-content-repos ul li aside.key .repo-status {
  text-transform: capitalize;
  color: #89ddff;
}
#container .main-content-repos ul li aside.key .repo-type {
  color: #89ddff;
}

/* footer.scss */
footer {
  width: 100%;
  display: block;
  margin-top: 25pt;
  text-align: center;
  font-family: "Poppins";
}
footer p {
  /* color: white; */
  color: white;
}
footer p a {
  text-align: center;
  /* color: #89ddff; */
  color: #89ddff;
  transition: color 0.3s;
}
footer p a:hover {
  color: #3ab2e2;
}

/*# sourceMappingURL=style.css.map */