@font-face {
  font-family: 'Roboto-regular';
  src: url('./fonts/Roboto-Regular.ttf') format('TrueType');
  font-weight: 400;
}

@font-face {
  font-family: 'Roboto-bold';
  src: url('./fonts/Roboto-Bold.ttf') format('TrueType');
  font-weight: 700;
}

:root {
  --vivid-red: hsl(348, 100%, 56%);
  --light-blue: hsl(203, 95%, 57%);
  --medium-blue: hsl(215, 90%, 60%);
  --dark-blue: hsl(216, 60%, 34%);
  --pure-white: hsl(0, 0%, 100%);
  --gray-80: hsl(0, 0%, 80%);
  --gray-60: hsl(0, 0%, 60%);
  --gray-40: hsl(0, 0%, 40%);
  --gray-20: hsl(0, 0%, 20%);
}

html, body {
  height: 100%;
  font-family: Roboto-regular, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: var(--gray-20);
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  height: inherit;
}

.header {
  display: flex;
  justify-content: center;
}

.header h1 {
  text-align: center;
  padding-top: 16px;
  font-family: Roboto-bold;
  width: fit-content;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
}

.app-content-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  font-size: 0.875rem;
  background-color: var(--gray-80);
  color: var(--gray-40)
}

.footer-link-layout {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-link-style {
  color: var(--gray-20);
  font-weight: 700;
}

.user-control-button {
  padding: 6px 16px;
  font-size: 1.5rem;
  color: var(--pure-white);
  text-shadow: 1px 1px 1px var(--gray-40);
  border: none;
  border-radius: 5px;
  border-bottom: 2px solid var(--dark-blue);
  border-right: 2px solid var(--dark-blue);
  background-color: var(--light-blue);
}