/* CSS Style sheet Template, developed by Amal Kariyawasam (https://1amal.github.io), 
Last Update: 30/08/2024 
*/

:root {
  font-family: "openSansRegular";
  font-size: 16px;

  /* min-height: 100vh;   */
  /* The min-width CSS property sets the minimum width of an element. 
  It prevents the used value of the width property from becoming smaller than the value specified for min-width. */

  /* Colour Scheme */
  /* HTML Main Element Colours */
  --colour-RootBackground: #ffffff;
  --colour-H1-Heading: #000000;
  --colour-H2-Heading: #160404;
  --colour-H3-Heading: #000300;
  --colour-P-Paragraph: #000000;
  --colour-H1HeadingBackground: #3bc03d;
  --colour-H2HeadingBackground: #e2b33a;
  --colour-H3HeadingBackground: #f6f47d;
  --colour-ALinks: #2997ff;
  --colour-ALinksActive: #090656;
  --colour-ALinksVisited: #090656;;
  --colour-ALinksHover: #7940e3;
  --colour-inksDivExternalResources:#aaeb9d;
  /* Different Div Section Colours */
  --colour-MainWebsiteGridContainer: #ffffff;
  --colour-IntroductionBackground: #f4b618;
  --colour-IntroductionText: #000000;
  --colour-IntroductionLogos: #0cb920;
  --colour-ProjectBackground: #ffffff;
  --colour-ProjectBorderWebsites: #f0a00a;
  --colour-ProjectBorderProductivityApps: #37e50c;
  --colour-ProjectBorderGamesMultimedia: #8f0449;
  --colour-ProjectBorderDeveloperResources: #b03d03;
  --colour-ProjectText: #110000;
  --colour-FooterBackground: #caced3;
  --colour-FooterText: #170f0f;
  --colour-MainMenuBackground: #23ab50;
  --colour-MainMenuText: #ffffff;
  --colour-BorderProjects: #5e50e2;
  --colour-CPDPending: #d68418;
  --colour-CPDCompleted: #13a570;
  /* Custom CSS */
  background-color: var(--colour-RootBackground);
  margin: 0;
}

@font-face {
  font-family: "openSansRegular";
  src: url(../website-resources/fonts/open-sans-regular.ttf);
  font-weight: normal;
  font-style: normal;
}

h1 {
  font-size: 2rem;
  padding: 5px;
  margin: 5px;
  text-align: center;
  color: var(--colour-H1-Heading);
  background-color: var(--colour-H1HeadingBackground);
}

h2 {
  font-size: 1.5rem;
  padding: 5px;
  margin: 5px;
  text-align: center;
  color: var(--colour-H2-Heading);
  background-color: var(--colour-H2HeadingBackground);
}

h3 {
  font-size: 1.25rem;
  padding: 5px;
  margin: 5px;
  text-align: center;
  color: var(--colour-H3-Heading);
  background-color: var(--colour-H3HeadingBackground);
}

p {
  font-size: 1rem;
  padding: 5px;
  margin: 5px;
  text-align: center;
  color: var(--colour-P-Paragraph);
  /* background-color: var(--colour-HeadingBackground); */
}

a:link {
  background-color: transparent;
  text-decoration: none;
  color: var(--colour-ALinks);
}

a:visited {
  background-color: transparent;
  text-decoration: none;
  color: var(--colour-ALinksVisited);
}

a:hover {
  background-color: transparent;
  text-decoration: underline;
  color: var(--colour-ALinksHover);
}

a:active {
  background-color: transparent;
  text-decoration: underline;
  color: var(--colour-ALinksActive);
}
/* ********** Code for Containers ********** */
.mainWebsiteGridContainer {
  display: grid;
  grid-template:
    "navBar navBar navBar" 1fr
    "introductionContainer introductionContainer" 1fr
    "projectsContainer projectsContainer" 5fr
    "contactContainer contactContainer" 1fr
    / 1fr 1fr;

  max-height: 100vh;
  max-width: 100vw;
  margin: 0;
  padding: 0;
  background-color: var(--colour-MainWebsiteGridContainer);
}

/* ********** Start of code for Navigation Bar **********  */
/* ********** Start of code for Navigation Bar **********  */
#navBar {
  background-color: #1f2937;
  padding: 1vw;
  display: flex; /*Enable flexbox layout */
  flex-direction: column;
  justify-content:space-evenly; /*This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. 
  It also exerts some control over the alignment of items when they overflow the line. */
  flex-wrap: wrap;
  flex-shrink: 0;
}

#navBar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#navBar li {
  float: left;
}

#navBar li a {
  color: #f9faf8;
  padding-top: 0.5vw;
  padding-bottom: 0.5vw;
  padding-left: 0.5vw;
  padding-right: 0.5vw;
  text-decoration: none;
  font-size: 2rem;
}

#navBar li a:hover {
  background-color: #15d48e;
}

#navBar a:active {
  background-color: #0704aa;
}
/* ********** End of code for Navigation Bar **********  */

.linksDivExternalResources ul
{

  list-style-type: none;
  /* margin: 0; */
  /* padding: 0; */
  
  overflow: hidden;
  background-color: var(--colour-inksDivExternalResources);
}

.linksDivExternalResources li{
  float: left;
  padding: 0.5rem 1.5rem;


}

.linksDivExternalResources li a:hover:not(.active) {
  /* display: block; */
  color: white;
  text-align: center;
  padding: 0.5rem 0.5rem;
  text-decoration: none;
}

/* .linksDivExternalResources li {

} */


/* ********** Start of code for About Section **********  */

.introductionContainer {
  grid-area: introductionContainer;
  display: flex;
  flex-flow: row nowrap;
  flex: 1 auto;
  justify-content: flex-start;
  border-radius: 20%;
  background-color: var(--colour-IntroductionBackground);
}

.currentSkillsDiv {
  display: flex;
  flex-direction: column;
  background-color: var(--colour-MainMenuBackground);
}

.frontEndStackDiv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* background-color: var(--colour-IntroductionBackground); */
}

.backEndStackDiv {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.devToolsDiv {
  display: flex;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}

.aboutInfoDiv {
  flex: auto;
  font-size: 1.5rem;
  font-weight: 700;
  background-color: var(--colour-IntroductionBackground);
  color: var(--colour-IntroductionText);
}

/* ********** End of code for About Section **********  */
/* ********** Start of code for Project Section**********  */
.projectsContainer {
  grid-area: projectsContainer;
  color: var(--colour-ProjectText);
}

.projectCardsContainer {
  display: flex;
  flex-flow: column wrap;
  flex: 1;
  box-sizing: border-box;
  text-align: center;
  font-size: 1.5rem;
}
.projectCategoryWebsites {
  display: flex;
  flex-flow: row wrap;
  border-radius: 10px;
  border-width: 0.25rem;
  border-style: solid;
  border-color: var(--colour-ProjectBorderWebsites);
  margin: 10px;
}

.projectCategoryProductivityWebApps {
  display: flex;
  flex-flow: row wrap;
  border-radius: 10px;
  border-width: 0.25rem;
  border-style: solid;
  border-color: var(--colour-ProjectBorderProductivityApps);
  margin: 10px;
}

.projectCategoryGamesWebApps {
  display: flex;
  flex-flow: row wrap;
  border-radius: 10px;
  border-width: 0.25rem;
  border-style: solid;
  margin: 10px;
  border-color: var(--colour-ProjectBorderGamesMultimedia);
}

.projectCategoryDeveloperResources {
  display: flex;
  flex-flow: row wrap;
  border-radius: 10px;
  border-width: 0.25rem;
  border-style: solid;
  margin: 10px;
  border-color: var(--colour-ProjectBorderDeveloperResources);
}

.projectDiv {
  display: grid;
  grid-template: 3fr 1fr 1fr 1fr / 3fr 1fr;
  resize: both;
  padding: 0.5rem;
  margin: 1rem;
  border-radius: 25px;
  border-width: 0.1rem;
  border-style: solid;
  border-color: var(--colour-BorderProjects);
  width: 400px;
  height: 800px;
  overflow: scroll;
}
.projectPreviewImageDiv {
  grid-area: 1/1/2/3;
}

.projectScreenShotImage {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.projectNameDiv {
  grid-area: 2/1/3/2;
}

.projectLinks {
  grid-area: 2/2/3/3;
  justify-self: center;
}
.projectDescriptionDiv {
  grid-area: 3/1/4/3;
}

.projectTechStackDiv {
  grid-area: 4/1/5/3;
}

.svgLogos {
  height: 3rem;
  width: 3rem;
  padding: 0.5rem;
}

/* ********** End of code for Project Section**********  */

.contactMeContainer {
  grid-area: contactContainer;
  padding: 1rem;
  background-color: var(--colour-FooterBackground);
  color: var(--colour-FooterText);
}

.cpdCompleted {
  color: var(--colour-CPDCompleted);
  font-size: 1.6rem;
}

.cpdPending {
  color: var(--colour-CPDPending);
  font-size: 1.5rem;
}

.contactMe {
  text-align: center;
  padding: 1rem;
}

/* Media queries for responsive mobile displays  */

@media (max-width: 400px) {
  .introductionContainer {
    flex-wrap: wrap;
  }

  .projectDiv {
    width: 270px;
    height: 800px;
  }

  .projectCardsContainer {
    flex: 1 1 100%;
  }

  .projectCardsContainer {
    flex: 1 1 100%;
  }
  .projectCategoryWebsites {
    flex: 1 1 100%;
  }

  .projectCategoryGamesWebApps {
    flex: 1 1 100%;
  }

  .projectCategoryProductivityWebApps {
    flex: 1 1 100%;
  }

  .projectCategoryDeveloperResources {
    flex: 1 1 100%;
  }
}