@font-face {
  font-family: 'Kode Mono';
  src: url('fonts/KodeMono-VariableFont_wght.ttf');
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-VariableFont_wdth,wght.ttf');
}

:root {
  --border-colour: #333;
  --site-max-width: 80rem;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
}

::backdrop {
  background-color: black;
  /*
    The negative margin is a bit of a hack. Without the negative margin, if you
    scroll down the page in Chrome on Android while a modal <dialog> is open,
    the URL bar at the bottom of the screen moves out of view, but the backdrop
    only goes up to where the URL bar used to be. So you see a gap below the
    backdrop, where is there no backdrop, in the space formerly occupied by the
    URL bar. The negative margin makes the backdrop extend beyond the viewport,
    and thus the gap I described is not visible.
  */
  margin: -10rem;
  opacity: 0.5;
}

a:hover {
  filter: brightness(3);
}

body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: auto;
  max-width: var(--site-max-width);
  padding: 1rem;
}

button {
  align-self: stretch;
  background-color: yellow;
  border: 0;
  border-radius: 0;
  color: black;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.5rem;
  text-transform: uppercase;
}

button:disabled {
  opacity: 0.5;
}

button:hover, .techTags a:hover {
  filter: brightness(0.75);
}

code {
  background-color: #ddd;
  padding: 0 0.25rem;
}

dialog[open] {
  border: 0;
  margin: auto;
  max-height: calc(100dvh - 4rem);
  max-width: calc(var(--site-max-width) - 4rem);
  padding: 0;
  width: calc(100dvw - 4rem);
}

dialog[open] a {
  color: darkblue;
}

h1 {
  font-family: 'Kode Mono', monospace;
  font-size: 5rem;
  font-weight: 700;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

hr {
  border: 1px solid white;
  width: 100%;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

#copyrightText {
  text-align: center;
}

#featuredProjects {
  align-items: flex-start;
  background-color: darkred;
  color: white;
  flex-direction: column;
}

#jumbotron {
  background-color: black;
  color: white;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem;
}

#jumbotron a {
  color: skyblue;
}

#jumbotron h1 {
  margin: 0;
}

#jumbotron p {
  font-size: 1.5rem;
  margin: 0;
}

#jumbotron #pageLede {
  font-size: 2rem;
}

#otherProjects {
  background-color: darkblue;
  color: white;
}

.dialogBody {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.dialogBody > * {
  margin: 0;
}

.dialogHeader {
  align-items: center;
  background-color: white;
  border-bottom: 1px solid var(--border-colour);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1rem;
  position: sticky;
  top: 0;
}

.dialogHeader > * {
  margin: 0;
}

.dialogHeader > button {
  align-self: flex-start;
  background-color: darkred;
  color: white;
}

.dialogHeader > h2 {
  font-size: min(2rem, 7.5dvh);
}

.note {
  background-color: lightgrey;
  color: black;
  padding: 1rem;
}

.note > p > a {
  color: darkblue;
}

.note > p:first-child::before {
  content: 'Note: ';
  font-weight: bold;
}

.note p {
  margin: 0;
}

.project {
  background-color: #ddd;
  color: black;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.project > * {
  margin: 0;
}

.projectsContainer {
  align-self: stretch;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.projectsSection {
  background-color: grey;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
}

.projectsSection > * {
  margin: 0;
}

.projectsSection a {
  color: skyblue;
}

.projectsSection .note {
  border: 0;
}

.projectsSection .project a {
  color: darkblue;
}

.tagGo {
  background-color: #00acd7;
  color: white;
}

.tagJavaScript {
  background-color: #f7df1e;
  color: black;
}

.tagLaravel {
  background-color: #f53003;
  color: white;
}

.tagNodeJs {
  background-color: #417e38;
  color: white;
}

.tagPhp {
  background-color: #4f5b93;
  color: white;
}

.tagPreact {
  background-color: #673ab8;
  color: white;
}

.tagRails {
  background-color: #d30001;
  color: white;
}

.tagReact {
  background-color: #61dafb;
  color: black;
}

.tagRuby {
  background-color: #990000;
  color: white;
}

.tagTypeScript {
  background-color: #3178c6;
  color: white;
}

.techTags {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.techTags a {
  text-decoration: none;
}

.techTags span {
  border: 1px solid var(--border-colour);
  display: block;
  font-weight: bold;
  padding: 0.5rem;
}

@media (min-width: 30rem) {
  .onlyMobile {
    display: none;
  }
}

@media (min-width: 60rem) {
  .projectsContainer:has(> :nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
  }
}