/* Global */

:root
{
  --color-primary-hue: 200;
  --color-primary-50: hsl(var(--color-primary-hue), 50%, 90%);
  --color-primary-100: hsl(var(--color-primary-hue), 50%, 85%); /* rgb(186, 219, 219) */
  --color-primary-200: hsl(var(--color-primary-hue), 50%, 75%); /* rgb(180, 180, 237) */
  --color-primary-500: hsl(var(--color-primary-hue), 50%, 50%); /* rgb(78, 139, 163) */
  --color-primary-900: hsl(var(--color-primary-hue), 70%, 20%); /* rgb(12, 12, 87) */

  --color-neutral-100: hsl(0, 0%, 100%);
  --color-neutral-500: hsl(0, 0%, 50%);
  --color-neutral-900: hsl(0, 0%, 0%);

  /* --color-accent-hue: 270;
  --color-accent-500: hsl(var(--color-accent-hue), 50%, 80%);
  --color-accent-900: hsl(var(--color-accent-hue), 50%, 30%); */
}

*,
*::before,
*::after
{
  box-sizing: border-box;
}

body
{
  margin: 0;
  padding: 0;

  background-color: var(--color-primary-900);
  color: var(--color-neutral-100);
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

h1
{
  text-align: center;
}

p
{
  max-width: 60ch;
  margin-inline: auto;
  text-align: center;
}

a:link, a:visited, a:active
{
  text-decoration: none;
  color: var(--color-primary-900);
  /* text-shadow: var(--color-neutral-500) 1px 1px 1px; */
}


/* Header */

header
{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9000;
  min-width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 0.2em;

  background-color: var(--color-primary-200);
}

.logo
{
  margin-left: 1em;
}


/* Navigation */

.navToggle
{
  display: none;
  font-size: 1.5rem;
  margin: 0 1em 0 0;

  border: none;
  background-color: rgb(0,0,0,0);
  color: var(--color-primary-900);
}

.navMenu
{
  display: flex;
  flex-direction: row;
  position: static;
  gap: 0;
  padding: 0;
  margin: 0 2em 0 0;

  list-style: none;
}

.navMenu li
{
  padding-inline: 0.8em;
  padding-block: 0.3em;
}

.navMenu li:hover
{
  box-shadow: 2px 2px 4px var(--color-neutral-500), 0px -2px 4px var(--color-neutral-500) inset;
}

.navMenu li:active
{
  box-shadow: -2px -2px 4px var(--color-neutral-500), 0px -2px 4px var(--color-neutral-500) inset;
}


/* Content */

main
{
  margin: 0;
  padding: 0;
}

section
{
  padding-top: 2.5em;
  padding-bottom: 2em;
  margin-inline: auto;
  width: min(90%, 70rem);
}


/* Home */

.homeContainer
{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  padding-inline: 3em;
}

.homeContainer img
{
  max-width: 12em;

  border-radius: 50%;
  border: 2px solid var(--color-primary-500);
}

.homeContainer p
{
  margin-inline: 1em;
}


/* Projects */

#projectsSection p a
{
  text-decoration: underline;
  color: var(--color-primary-100);
}

.projectsContainer
{
  /* display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
  grid-gap: 2em; */

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-inline: auto;
  padding-inline: 1em;
}

.projectCard
{
  /* min-width: 20em; */
  flex: 0 0 20em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 0.8em;
  margin: 0.6em;
  padding-bottom: 0.3em;
  text-align: center;

  background-color: var(--color-primary-200);
  color: var(--color-neutral-900);
  border-radius: 2%;
  border: 0px outset var(--color-primary-500);
  box-shadow: 1px 1px 10px var(--color-neutral-900);
}

.projectCard img
{
  width: 100%;
  aspect-ratio: 1.2/1;
  margin-block: 0;

  border-radius: 2%;
}

.projectCard h2
{
  font-size: 1.75rem;
  margin-inline: 0.3em;
  margin-block: 0;

  color: var(--color-primary-900);
  text-shadow: 1px 1px 2px var(--color-neutral-500);
}

.projectCard h3
{
  margin-inline: 0.3em;
  margin-block: 0;
}

.projectCard p
{
  font-size: 1.125rem;
  margin-inline: 0.3em;
  margin-block: 0;
}

.projectLinkWrapper
{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 0.3em;
  margin-inline: 0.5em;
  margin-block: 0;
}

.projectLink:link, .projectLink:visited
{
  padding-block: 0.5em;
  text-align: center;

  color: var(--color-neutral-100);
  background-color: var(--color-primary-900);
  /* border: 2px solid var(--color-primary-500); */
}

.projectLink:hover
{
  box-shadow: 1px 1px 2px var(--color-primary-900), 0px -2px 4px var(--color-primary-500) inset;
}

.projectLink:active
{
  box-shadow: -1px -1px 2px var(--color-primary-900), 0px -2px 4px var(--color-primary-500) inset;
}


/* Contact */

.contactContainer
{
  display: flex;
  flex-flow: column nowrap;
  gap: 1em;
  max-width: 30em;
  margin-inline: auto;
}

.contactCard
{
  font-size: 1.5rem;
  text-align: center;
  padding-block: 0.4em;
  
  background-color: var(--color-primary-200);
  border: 1px solid var(--color-primary-500);
}

.contactCard:hover
{
  box-shadow: 2px 2px 4px var(--color-neutral-900), 0px -4px 8px var(--color-neutral-500) inset;
}

.contactCard:active
{
  box-shadow: -2px -2px 4px var(--color-neutral-900), 0px -4px 8px var(--color-neutral-500) inset;
}


/* About */

.aboutContainer
{
  display: block;
  min-height: 100vh;
}


/* Footer */

footer
{
  text-align: right;
  padding: 0.2em;
}


/* Media Queries */

@media only screen and (max-width: 500px)
{
  .navToggle
  {
    display: block;
    z-index: 8000;
  }

  .navMenu
  {
    display: none;
  }

  .navMenu li
  {
    width: 100%;
    text-align: center;
    padding-block: 0.8em;
  }

  .navMenuOpen
  {
    display: flex;
    flex-direction: column;
    gap: 0.2em;
    position: fixed;
    top: 2em;
    left: 50%;
    z-index: 7000;
    width: 50%;
    padding: 1.5em;
    align-items: center;
    font-size: 1.2rem;

    background-color: var(--color-primary-200);
    box-shadow: -2px 2px 4px var(--color-neutral-900);
  }
}