/* Global */
:root {
    --measure: 60ch;
    --ratio: 1.5;
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
}

* {
    box-sizing: border-box;
    max-inline-size: var(--measure);
}
img {
    max-inline-size: 100%;
}
html,
body,
div,
header,
nav,
main,
footer,
canvas {
    max-inline-size: none;
}

/* Layout */
.center {
    box-sizing: content-box;
}
.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.stack > * {
    margin-block: 0;
}
.stack > * + * {
    margin-block-start: var(--s2);
}
.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s1);
    justify-content: flex-start;
    align-items: center;
}

/* Branding */
*:not(.twinkling, .stars) {
    z-index: 5;
    font-family: sans-serif;
    color: #fff;
    line-height: var(--s1);
}
h1 {
    font-size: var(--s3);
    will-change: transform;
    transition: 200ms;
}
h1:hover {
    transform: translateX(var(--s-1));
}
h1 a,
.cta-button {
    text-decoration: none;
}
body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--s-2) auto var(--s-2) minmax(0, 5fr);
    grid-template-rows: 1fr auto 1fr;
}
main {
    grid-column: 3;
    grid-row: 2;
    background: rgb(2,0,36);
    background: linear-gradient(155deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 37%, rgba(0,96,116,1) 100%); 
    border-radius: 2rem;
    max-inline-size: var(--measure);
    position: relative;
    padding: var(--s2);
}
header img {
    inline-size: 10rem;
    block-size: 10rem;
    border: var(--s-2) solid black;
    border-radius: 100rem;
    object-fit: cover;
}
.cta-button {
    background-color: black;
    border-radius: 100rem;
    padding-block: var(--s-1);
    inline-size: fit-content;
    padding-inline: 3rem var(--s1);
    background-image: url('bin/envelope-regular.svg');
    background-repeat: no-repeat;
    background-size: 1.2rem;
    background-position-x: 1rem;
    background-position-y: 45%;
    will-change: transform;
    transition: 200ms;
}
.socials {
    list-style: none;
    padding: 0;
}
.socials li {
    will-change: transform;
    transition: 200ms;
}
.socials a {
    background-color: black;
    padding: var(--s-1);
    border-radius: 100rem;
}
.socials img {
    inline-size: 1rem;
    filter: invert(100%);
    vertical-align: middle;
}
.cta-button:hover,
.socials li:hover {
    transform: scale(1.1);
}