@font-face {
  font-family: 'ABC Areal Superfamily Variable';
  src: url('/fonts/ABCArealSuperfamilyVariable.woff2') format('woff2');
}

:root {
  --primary-color: #5C5C5C;
  --stroke-color: #5c5c5c65;
  --link-color: #8c8c8c;
  --link-hover-color: #a7a7a7;
  --background-color: #000000;
  --main-padding: 16px;
  --font-stack: 'ABC Areal Superfamily Variable', 'Arial', sans-serif;
}

body {
    background: #000000;
    padding: var(--main-padding);
    padding-top: 220px;
    font-family: var(--font-stack);
    color: var(--primary-color);
    letter-spacing: -5%;
    align-content: center;
    display: flex;
    justify-content: center;
}

.title {
    font-size: 14px;
}

.main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 640px;
}

.main-text {
    font-size: 30px;
    font-weight: 700;
}

.divider {
    border-bottom: solid 1px var(--stroke-color);
}

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

.links .main-text {
    flex: 1;
}

.images {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

img {
    border-radius: 4px;
    width: 100%;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    color: var(--link-hover-color);
}