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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
  list-style: none;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

:root {
  --color-bg: #f3f1f9;
  --color-bg-strong: #e7e3f4;
  --color-text: #28243a;
  --color-muted: #443c61;
  --color-border: #bcaee1;
  --color-btn: #8878c3;
  --color-accent: #8878c3;
  --color-accent-strong: #6b5e9e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #191624;
    --color-bg-strong: #28243a;
    --color-text: #f3f1f9;
    --color-muted: #bcaee1;
    --color-border: #443c61;
    --color-btn: #8878c3;
    --color-accent: #a597d5;
    --color-accent-strong: #8878c3;
  }
}
:root {
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --radius: 8px;
}

/* Custom Fonts */
@font-face {
  font-family: "Readex Pro";
  src: url("../fonts/readex-pro-v27-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Readex Pro";
  src: url("../fonts/readex-pro-v27-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("../fonts/red-hat-mono-v16-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("../fonts/red-hat-mono-v16-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Font Weights for Logo */
.fw-regular {
  font-weight: 400;
}

.fw-bold {
  font-weight: 700;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Red Hat Mono", monospace;
  font-weight: 400;
  margin: 0;
  line-height: 1.6;
  /* Flexbox rules to keep the footer at the bottom */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .brand-link {
  font-family: "Readex Pro", sans-serif;
  margin-top: 0;
}

header {
  background-color: var(--color-bg-strong);
  border-bottom: 1px solid var(--color-border);
  padding: var(--s-3) var(--s-3);
}

footer {
  background-color: var(--color-bg-strong);
  border-top: 1px solid var(--color-border);
  padding: var(--s-3) var(--s-3);
  text-align: center; /* Centers the copyright text */
}

.inner-container {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.brand-link {
  text-decoration: none;
  color: var(--color-text);
}
.brand-link:hover {
  color: var(--color-accent);
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover {
  color: var(--color-accent-strong);
}

main {
  padding: var(--s-6) var(--s-2);
  flex: 1;
}
main .grid-container {
  display: grid;
  gap: var(--s-4);
  margin: 0 auto;
}
main section {
  margin-bottom: var(--s-6);
  padding: var(--s-3) var(--s-3);
}

/* Tablet and Desktop Layout */
@media (min-width: 640px) {
  /* Set up 12 Column Grid */
  main .grid-container {
    grid-template-columns: repeat(12, 1fr);
    max-width: 640px;
  }
  main {
    /* Span all 12 columns */
  }
  main .about-section,
  main .contact-section {
    grid-column: 1/-1;
  }
}
@media (min-width: 768px) {
  main .grid-container {
    max-width: 768px;
  }
}/*# sourceMappingURL=styles.css.map */