@import url('reset.css');
@import url('variables.css');
@import url('theme-toggle.css');
@import url('intro.css');
@import url('showcase.css');

* {
  transition: background-color var(--theme-time) ease, color var(--theme-time) ease, border-color var(--theme-time) ease;
}

html {
  height: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  place-items: center;
  padding: 2rem;
  font-family: var(--font-b);
  font-size: var(--fs-base);
  color: var(--text);
  background-color: var(--bg);
  height: 100%;
}

section {
  display: flex;
  flex-direction: column;
  place-items: center;
}

a {
  display: inline-block;
  text-decoration: none;
  color: var(--text);
  transition: transform var(--haptic-time) ease;
}

a:active {
  transform: translateY(var(--haptic-translate));
}

footer {
  display: block;
  padding: 2rem 0;
  font-family: var(--font-a);
}

.haptic-clickable {
  transition: transform var(--haptic-time) ease;
  cursor: pointer;
}

.haptic-clickable:active {
  transform: translateY(var(--haptic-translate));
}

.styled-link {
  color: var(--color-a);
  border-bottom: 1px dashed var(--color-a);
}