:root {
    --dark-grey: #2b2b2b;
    --pink: #ffafaf;
    --black: #000000;
    --white: #ffffff;
}

@font-face {
    font-family: "albertus_nova";
    src: url("fonts/albertus_nova.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "inlander_rough";
    src: url("fonts/inlander_rough.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {
    color: var(--dark-grey);
    font-family: "albertus_nova";
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
}

body {
    background-color: var(--pink);
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-width: 50%;
    margin: 2em auto;
}

.inlander {
    font-family: "inlander_rough";
    font-variant-ligatures: none;
    font-feature-settings: "liga" 0, "calt" 0;
}

h1 {
    text-align: center;
    font-size: 5em;
    margin-top: 0;
}

h1:last-of-type {
    margin-top: -1.5em;
    margin-bottom: 0;
}

h2 {
    text-align: center;
}

h2,
.social a {
    font-size: 1.5em;
}

.socials-container {
    margin: auto;
    width: fit-content;
}

.social {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.social a {
    text-decoration: none;
}

.social a:last-of-type:hover {
    text-decoration: underline;
}

.social a svg {
    fill: var(--dark-grey);
    width: 24px;
    height: 24px;
}

@media only screen and (max-width: 650px) {
    h1 {
        font-size: 10vw;
    }

    h2,
    .social a {
        font-size: 3.5vw;
    }
}

@media only screen and (max-width: 350px) {
    .social a svg {
        width: 16px;
        height: 16px;
    }
}