@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap');

*,
*::before,
*::after {
  font-family: "Fira Code", monospace;
  box-sizing: border-box;
}

:root {
  --fg-1: #d4be98;
  --fg-2: #ffe9c3;
  --bg-1: #282828;
  --bg-navbar: #32302f;
  --orange: #e78a4e;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

p, h1 {
  margin: 0;
}

a {
  all: unset;
  cursor: pointer;
  transition: .2s color;
}

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-1);
}

nav {
  background: var(--bg-navbar);
  display: flex;
  justify-content: space-between;
  padding: 16px;
}

.home {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.links {
  display: flex;
  gap: 32px;
}

.link {
  font-size: 24px;
  font-weight: 700;
}

.logo {
  font-size: 24px;
  font-weight: 700;
}

main {
  display: flex;
  height: 100%;
  justify-content: center;
}

.content {
  display: flex;
  flex-direction: column;
  max-width: 1013px;
  gap: 10px;
  padding: 32px;
}

.text {
  font-size: 24px;
  text-align: justify;
  color: var(--fg-1);
}

.paragraph {
  text-indent: 48px;
}

.header {
  color: var(--orange);
  font-size: 32px;
  font-weight: 700;
}

footer {
  display: flex;
  justify-content: space-between;
  padding: 16px;
}

.copyright {
  font-size: 20px;
}

.socials {
  display: flex;
  gap: 24px;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
}

svg {
  color: var(--fg-1);
  transition: .2s color;
}

.icon:hover > svg {
  color: var(--fg-2);
}

a:hover {
  color: var(--fg-2);
}