/*
    Fonts
*/
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


*,
*::before,
*::after {
  box-sizing: border-box;
  /* outline: 1px solid magenta; */
  margin: 0;
  padding: 0;
  font-family: 'JetBrains Mono', monospace;
  border: none;
}

.navBarButtonIcon.svgIcon {
  /* background-color: blue; */
  width: 2.5rem;
  height: 1.5rem;
}

/* Invisible hover area */
.navBarButton::before {
  content: "";
  position: absolute;
  /* top: -40px;
  left: -60px;
  right: -40px;
  bottom: -40px; */
}


.navBarButton {
  position: relative;
  /* background-color: magenta; */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  align-content: center;

  cursor: pointer;
}

/* Default: hidden or collapsed */
.navBarButtonDetail {
  opacity: 0;
  max-width: 0%;
  overflow: hidden;
  transition: all 1.0s ease;
}

/* On hover of parent .navBarButton */
.navBarButton:hover .navBarButtonDetail {
  opacity: 1;
  max-width: 100%;
}

iframe {
  border: none;
}

/*
    Variables
*/
:root {
  /* Grayscale base (adjust these for main theme) */
  /* Solid dark backgrounds (use what fits your design) */
  /* --back-000:  hsl(0, 5%,  2%);  */
  --back-000: #000;
  --back-100: #010101;
  --back-200: #020202;
  --back-300: #030303;
  --back-400: #040404;
  --back-500: #050505;
  --back-600: #060606;
  --back-700: #070707;
  --back-800: #080808;
  --back-900: #1b1b1b;
  --back-1000: #1F1F1F;

  /* Light overlays (all based on white w/ alpha) */
  --text-ok:  hsla(0, 0%, 100%, 0.98);
  --text-90: hsla(0, 0%, 100%, 0.90);
  --text-80: hsla(0, 0%, 100%, 0.80);
  --text-70: hsla(0, 0%, 100%, 0.70);
  --text-60: hsla(0, 0%, 100%, 0.60);
  --text-50: hsla(0, 0%, 100%, 0.50);
  --text-40: hsla(0, 0%, 100%, 0.40);
  --text-30: hsla(0, 0%, 100%, 0.30);
  --text-20: hsla(0, 0%, 100%, 0.20);
  --text-10: hsla(0, 0%, 100%, 0.10);
  --text-05: hsla(0, 0%, 100%, 0.05);

  --very-bold-weight: 600;
  --bold-weight:      400;
  --normal-weight:    200;
  --light-weight:     100;

  /* Core backgrounds */
  --body-background-color: var(--back-000);
  --page-background-color: var(--back-000);

  /* Navbar & Icons */
  --nav-bar-logo-color:      var(--text-60);
  --nav-bar-hamburger-color: var(--text-70);

  /* Dropdowns */
  --dropdown-background-color:       var(--back-100);
  --dropdown-menu-item-border-color: var(--back-500);

  --dropdown-menu-item-current-color:  var(--text-90);
  --dropdown-menu-item-current-weight: var(--bold-weight);
  --dropdown-border-current-color:     var(--text-70);

  --dropdown-menu-item-normal-color:  var(--text-60);
  --dropdown-menu-item-normal-weight: var(--normal-weight);
  --dropdown-border-normal-color:     var(--text-40);

  --dropdown-menu-item-hovered-color:  var(--text-80);
  --dropdown-menu-item-hovered-weight: var(--bold-weight);
  --dropdown-border-hovered-color:     var(--text-60);

  /* Section Titles */
  --section-title-color:  var(--text-60);
  --section-title-weight: var(--very-bold-weight);
  --section-title-size: 1.85rem;

  --section-title-square-color:  var(--text-60);
  --section-title-square-weight: var(--light-weight);
  --section-title-square-size:   75%;

  --section-title-lighter-color:  var(--text-40);
  --section-title-lighter-weight: var(--light-weight);
  --section-title-lighter-size:   100%;

  /* About Section */
  --about-section-subtitle-size:   1.5rem;
  --about-section-subtitle-color:  var(--text-60);
  --about-section-subtitle-weight: var(--normal-weight);

  --about-callout-background-color: var(--back-900);
  --about-callout-text-color:       var(--text-60);

  /* Contacts */
  --contacts-section-subtitle-color:  var(--text-50);
  --contacts-section-subtitle-weight: var(--bold-weight);
  --contacts-section-subtitle-size:   1.0rem;
  --contacts-section-text-size:       1.2rem;

  /* Project Item Card */
  --project-item-card-background-color: hsl(0, 5%, 5%, 0.8);

  --project-item-card-icon-color: var(--text-80);

  --project-item-card-text-color:  var(--text-80);
  --project-item-card-text-weight: var(--bold-weight);
  --project-item-card-text-size:   0.8rem;


  /* Software Card */
  --software-card-title-color:  var(--text-80);
  --software-card-title-weight: var(--bold-weight);
  --software-card-title-size:   1rem;

  --software-card-description-color:  var(--text-60);
  --software-card-description-weight: var(--light-weight);
  --software-card-description-size:   75%;

  --software-card-border-color: var(--text-20);

  --software-card-hovered-background-color: var(--text-05);
  --software-card-hovered-border-color:     var(--text-40);
  --software-card-hovered-text-color:       var(--text-80);

  /* Generic */
  --icon-color:      var(--text-60);

  --link-text-color:             var(--text-70);
  --link-decoration-color:       var(--text-30);
  --link-text-color-hover:       var(--text-80);
  --link-decoration-color-hover: var(--text-40);

  --text-color:  var(--text-50);
  --text-weight: 400;
  --text-size:   1rem;

  --bold-text-color: var(--text-60);
  --bold-text-weight: 700;

  --text-detail-color:  var(--text-30);
  --text-detail-weight: 400;
  --text-detail-size:   0.8rem;

  /* Action Button  */

  --button-background-color:  var(--back-1000);
  --button-text-color: var(--text-70);

  --button-background-hovered-color: var(--back-700);
  --button-text-hovered-color: var(--text-90);

  /* Footer */
  --footer-text-color: var(--text-40);
  --footer-text-size: 0.8rem;

  --horizontal-line-color: var(--back-1000);

  /* Paragraphs */
  --paragraph-line-height: 1.5;
  --paragraph-margin-bottom: 1.25rem;

  /* Border & radius */
  --border-radius: 0.5rem;
  --border-color: var(--back-600);

  --itch-io-button-background-color:     hsl(350, 50%, 25%);
  --github-button-background-color:      hsl(250, 50%, 25%);
  --vscode-button-background-color:      hsl(226, 51%, 25%);
  --play-online-button-background-color: hsl(150, 50%, 25%);
  --view-online-button-background-color: hsl(195, 51%, 25%);
  --youtube-button-background-color:     hsl(003, 51%, 25%);

  /* Accent Colors (Change these to your brand) */
  --primary-accent: hsl(210, 100%, 60%); /* sky blue */
  --success-accent: hsl(160, 100%, 40%); /* teal green */
  --warning-accent: hsl(40, 100%, 60%);  /* amber */
  --error-accent:   hsl(0, 90%, 65%);    /* red */
}


/* -------------------------------------------------------------------------- */
/*                                                                            */
/*                                                                            */
/*  Body                                                                      */
/*                                                                            */
/*                                                                            */
/* -------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------- */
body {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-size);

  color: var(--text-color);

  width: 100%;
  height: 100dvh;
  min-height: 100dvh;

  max-width: 1000px;
  position: relative;

  background-color: var(--body-background-color);

  margin: 0;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------------------------------- */
.bodyContainer {
  padding: 2.0rem 1.0rem;
  background-color: var(--page-background-color);

  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* -------------------------------------------------------------------------- */
.bodyContainer > main {
  flex-grow: 1;
}

/* -------------------------------------------------------------------------- */
/*                                                                            */
/*                                                                            */
/*  Index Page                                                                */
/*                                                                            */
/*                                                                            */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
.indexAsciiArtContainer {
  flex-grow: 1;             /* fill available vertical space */

  justify-content: center;  /* center horizontally */
  align-items:     center;  /* center vertically */

  margin-top:    2rem;
  margin-bottom: 4rem;

  font-size: 0.9rem;
}

@media (max-width: 500px) {
  .indexAsciiArtContainer {
    font-size: 0.7rem;
  }
}
@media (max-width: 400px) {
  .indexAsciiArtContainer {
    font-size: 0.6rem;
  }
}

@media (max-width: 300px) {
  .indexAsciiArtContainer {
    font-size: 0.5rem;
  }
}



/* -------------------------------------------------------------------------- */
.mediaTalkList > li {
  margin-left: 2rem;
  padding: 0.25rem 0;
}




/* -------------------------------------------------------------------------- */
/*                                                                            */
/*  Links                                                                     */
/*                                                                            */
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
a {
  text-decoration: var(--link-decoration-color) dotted underline;
  text-underline-offset: 0.3rem;
  color: var(--link-text-color);
}

/* -------------------------------------------------------------------------- */
a:hover {
  text-decoration: var(--link-decoration-color-hover) solid underline;
  text-underline-offset: 0.3rem;
  color: var(--link-text-color-hover);
}


/* -------------------------------------------------------------------------- */
hr {
  border: none;
  border-top: 1px solid var(--horizontal-line-color);
}

/* -------------------------------------------------------------------------- */
section {
  margin-bottom: 2rem;
}

/* -------------------------------------------------------------------------- */
p {
  line-height: var(--paragraph-line-height);
  margin-bottom: var(--paragraph-margin-bottom);
  /* padding: 0.rem 0rem; */
}

/* -------------------------------------------------------------------------- */
b {
  font-weight: var(--bold-text-weight);
  color: var(--bold-text-color);
}

/* This is the font awesome SVG that we import with the import-svg.sh script. */
svg.svgIcon {
  display: inline-block;

  /* Just to make the icons centered with the text */
  position: relative;
  fill: var(--icon-color);
  width: 1rem;
  height: 1rem;
}

.textDetail {
  font-size: var(--text-detail-size);
  font-weight: var(--text-detail-weight);
  color: var(--text-detail-color)
}

/* @TODO: Add the icon for open new tab */



/*  */
svg.heartIcon {
  fill: #f24747;
  margin: 0;
  padding: 0;
}

svg.heartIcon:hover {
  fill: #f2e447;
  cursor: pointer;
}



/* -------------------------------------------------------------------------- */
/*                                                                            */
/*  Projects Page                                                             */
/*                                                                            */
/* -------------------------------------------------------------------------- */
.projects ul {
  margin-left: 2rem;
}


/* -------------------------------------------------------------------------- */
/*                                                                            */
/*  Project Detail Page                                                       */
/*                                                                            */
/* -------------------------------------------------------------------------- */
.projectsDetailPage {
  /* background-color: cyan; */
}

.projectsDetailPage .videoContainer {
  /* background-color: #f24747; */
  width: 100%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--background-color-callout-text-color);
}

.projectsDetailPage canvas,
.projectsDetailPage iframe .projectsDetailPage {
  width: 100%;
  height: 60vh;
  display: block;
}

.projectsDetailPage .youtubeVideo {
  border-radius: var(--border-radius);
  width: 100%;
  height: 60vh;
}

.projectsDetailPage .canvasContainer iframe {
  border-radius: var(--border-radius);
  width: 100%;
  height: 60vh;
}

.projectsDetailPage .titleContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.0rem;
  margin-bottom: 1.75rem;
}

.projectsDetailPage .titleContainer h1 {
  margin: 0;
  padding: 0;
}

.projectsDetailPage .canvasContainer {
  position: relative;
}

.XXX_iframeClick {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  z-index: 1;
  cursor: pointer;
  /* background-color: red; */
}

/* -------------------------------------------------------------------------- */
.projectsDetailPage .actionButtons {
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* default */
  gap: 1rem;
  margin-top: 1.5rem;
  justify-content: center;
}

.projectsDetailPage .actionButtons > * {
  max-width: 300px;
  width: 100%;
  justify-self: center; /* center individual buttons */
}

@media (min-width: 0px) and (max-width: 460px) {
  .projectsDetailPage .actionButtons {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------- */
.projectsDetailPage .actionButtons .actionButton {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  align-items: center;
  justify-content: center;

  gap: 0.5rem;
  padding: 0.5rem 1rem;

  border-radius: var(--border-radius);
  font-weight: var(--text-weight);
  text-decoration: none;

  background-color: var(--button-background-color);
  color: var(--button-text-color);

  flex-wrap: wrap;
  text-align: center;
}
.projectsDetailPage .actionButtons .actionButton:hover {
  font-weight: var(--bold-text-weight);
  color: var(--button-text-hovered-color);
}

.projectsDetailPage .actionButtons .play-online-bg:hover {
  background-color: var(--play-online-button-background-color);
}

.projectsDetailPage .actionButtons .view-online-bg:hover {
  background-color: var(--view-online-button-background-color);
}
.projectsDetailPage .actionButtons .itch-io-bg:hover {
  background-color: var(--itch-io-button-background-color);
}
.projectsDetailPage .actionButtons .github-bg:hover {
  background-color: var(--github-button-background-color);
}
.projectsDetailPage .actionButtons .vscode-bg:hover {
  background-color: var(--vscode-button-background-color);
}
.projectsDetailPage .actionButtons .youtube-bg:hover {
  background-color: var(--youtube-button-background-color);
}

/*
*
*/

/* ------------------------------------------------------------------------- */
.projectsDetailPage .generalInfo {
  /* background-color: #f24747; */
  margin-top: 1.5rem;
}

.projectsDetailPage .generalInfo .title {
  display: block;
  font-weight: bold;
}

.projectsDetailPage .generalInfo .infoUL {
  margin-left: 1.0rem;
}

.projectsDetailPage .generalInfo .platformUL {
  margin-left: 0.5rem;
}
.projectsDetailPage .generalInfo .platformUL .platformLI {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.projectsDetailPage .generalInfo li {
  list-style: none;
}

.projectsDetailPage .generalInfo li span {
  margin-right: 0.5rem;
}

svg.projectDetailPageCompanyLogo {
  height: 2rem;
  max-height: 2rem;
  max-width: 10rem;
  fill: var(--text-color);
}