/****** Reset ******/
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  font-family:
    system-ui,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji'; /* 1 */
  line-height: 1.15; /* 2 */
  -webkit-text-size-adjust: 100%; /* 3 */
  tab-size: 4; /* 4 */
}
body {
  margin: 0;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp,
pre {
  font-family:
    ui-monospace,
    SFMono-Regular,
    Consolas,
    'Liberation Mono',
    Menlo,
    monospace; /* 1 */
  font-size: 1em; /* 2 */
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
table {
  border-color: currentcolor;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
legend {
  padding: 0;
}
progress {
  vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
summary {
  display: list-item;
}
:root {
  line-height: 1.5;
}
h1, h2, h3, h4, h5, figure, p, ol, ul {
  margin: 0;
}
ol[role="list"], ul[role="list"] {
  list-style: none;
  padding-inline: 0;
}
h1, h2, h3, h4, h5 {
  font-size: inherit;
  font-weight: inherit;
}
img, svg {
  display: block;
  max-inline-size: 100%;
}

/****** Global ******/
@font-face {
  font-display: swap;
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/fraunces-v38-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/fraunces-v38-latin-700.woff2') format('woff2');
}
:root {
  --orange: #ff7900;
  --off-black: #151515;
  --white: #fff;
  --link-color: var(--orange);
}

/****** Content ******/
body {
  background-color: var(--off-black);
  color: var(--white);
  font-family: 'Fraunces', system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  text-align: center;
}
h1 {
  font-weight: 700;
  font-size: 3rem;
  margin-bottom: 3rem;
}
main p {
  font-size: 1.6rem;
  margin-bottom: 2rem;
}
p a {
  color: var(--link-color);
  text-decoration: none;
  outline: 0;
  cursor: pointer;
  background-image: linear-gradient(to top,var(--link-color),var(--link-color));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% .12rem;
  transition: all .2s linear;
}
p a:focus,
p a:hover {
  color: var(--off-black);
  text-decoration: none;
  background-size: 100% 2.8rem;
}

/****** Header ******/
header {
  width: 100%;
}
header nav {
  background-color: var(--orange);
  color: var(--off-black);
  width: 100%;
  padding: 1.5rem 3vw 1rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
.logo {
  max-width: 15rem;
  margin: 0 auto;
}
.logo path {
  fill: var(--off-black);
}
.edge {
  filter: drop-shadow(0 0 5px rgba(0,0,0,0.7));
}
.edge path {
  fill: var(--orange);
}

/****** Main ******/
main {
  position: relative;
  overflow: hidden;
  padding: 4rem 2rem;
}
main::before {
  content: "";
  position: absolute;
  top: -4%;
  width: 110%;
  height: 108%;
  left: -5%;
  opacity: .11;
  background: url(img/grain.jpg) repeat 50%;
  z-index: 1;
  animation: grain 2s steps(1) infinite;
  mask-image: gradient(linear,left 5%,left 0,from(#000),to(rgba(0,0,0,.2)));
}
main::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 100px;
  opacity: .08;
  background: url(img/scratch.png) repeat 50%;
  animation: scratch 1.5s steps(1) infinite;
  z-index: 2;
}
main > section {
  position: relative;
  z-index: 3;
}
main p strong {
  color: var(--orange);
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0, 0); }
  10% { transform: translate(-1%, -1%); }
  20% { transform: translate(1%, 1%); }
  30% { transform: translate(-2%, -2%); }
  40% { transform: translate(3%, 3%); }
  50% { transform: translate(-3%, -3%); }
  60% { transform: translate(4%, 4%); }
  70% { transform: translate(-4%, -4%); }
  80% { transform: translate(2%, 2%); }
  90% { transform: translate(-3%, -3%); }
}
@keyframes scratch {
  0%, 100% { transform: translateX(0); opacity: 0.075; }
  10% { transform: translateX(-1%); }
  20% { transform: translateX(1%); }
  30% { transform: translateX(-2%); opacity: 0.09; }
  40% { transform: translateX(3%); }
  50% { transform: translateX(-3%); opacity: 0.05; }
  60% { transform: translateX(8%); }
  70% { transform: translateX(-3%); }
  80% { transform: translateX(10%); opacity: 0.02; }
  90% { transform: translateX(-2%); }
}

/****** Social ******/
.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}
.social li {
  width: 3rem;
  margin: 0 .5rem;
}
.social a svg path {
  fill: var(--white);
  transition: fill .2s linear;
}
.social a:focus svg path,
.social a:hover svg path {
  fill: var(--orange);
}

/****** Footer ******/
footer {
  padding: 2rem 5rem;
  font-size: 1rem;
  border-top: .2rem solid var(--grey);
}
.icon {
  width: 3rem;
  margin: 0 auto .5rem;
}
.icon path {
  fill: var(--white);
}
footer p {
  margin-bottom: 0.5rem;
}
footer p:last-of-type {
  margin-bottom: 0;
}

/****** Media Queries ******/
@media (min-width:60rem) {
  h1 {
    font-size: 5rem;
  }
  main > section div {
    column-count: 2;
    column-gap: 40px;
    padding: 0 4rem 2rem;
  }
}