@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('nav.css');
@import url('index.css');
@import url('about.css');
@import url('projects.css');
@import url('contact.css');

:root {
  --ash-grey: #bfc3ba;
  --silver: #a9aca9;
  --mauve-shadow: #60495a;
  --vintage-grape: #3f3244;
  --midnight-violet: #2f2235;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --radius: 8px;
  --footer-safe: 64px;
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background-color: var(--midnight-violet);
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  color: var(--ash-grey);
}

main {
  padding: var(--space-3) var(--space-2);
  padding-bottom: calc(var(--space-3) + var(--footer-safe));
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: var(--ash-grey);
  font-weight: 500;
}

a:hover {
  color: var(--mauve-shadow);
}

:where(a, input, textarea, button):focus-visible {
  outline: 3px solid var(--silver);
  outline-offset: 3px;
}

footer {
  color: var(--ash-grey);
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 12px var(--space-2);
  background: rgba(47, 34, 53, 0.9);
  backdrop-filter: blur(6px);
}