@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root {
    --font-sans: 'Roboto Flex', sans-serif;
    --font-title: 'Libre Franklin', sans-serif;
    --font-sub-title: "Bebas Neue", sans-serif;

    --color-bg: #f2f1fb;
    --header-bg: #c9c5f5;

    --home-accent: #423b91;

    --text-main: #272176;
    --text-accent-1: #272176;
    --text-accent-2: #fff;

    --accent-color-1: #41efc8;
    --accent-color-2: #fe0ec8;
    --accent-color-3: #ffc800;
    --accent-color-3-hover: #ffd747;

    --comms-open: #26d658;
    --comms-closed: #f62727;
    --comms-ask: #fdcd1d;

    --tab-bg: #423b91;
    --borders: #423b91;
    --table-borders: #272176;
    --surface: #fff;

    --nav-width: 9rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg);
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
}

.header {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.text {
    font-family: 'Libre Franklin', sans-serif;
    color: var(--home-accent);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text.title {
    font-size: 2rem;
    font-weight: 700;
}

.text.subtitle {
    font-size: 1.2rem;
    font-weight: 500;
}

.text.under-construction {
    font-size: 0.8rem;
    margin-top: 4rem;
}

.portrait {
    height: 8rem;
    width: 8rem;
    background-color: #fff;
    border-radius: 50%;
    border: solid 3px var(--home-accent);

    background-image: url("/shared-resources/img/portrait.png");
    background-position: bottom center;
    background-size: 95%;
    background-repeat: no-repeat;
}

.socials-container {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    z-index: 3;
}

.social-icon-container {
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background-color: var(--home-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem;
    position: relative;
    cursor: pointer;
    transition: transform 0.15s;
}

.social-icon-container:hover {
    transform: translateY(-10%);
}

.nav-btn {
    width: auto;
    height: 2rem;
    background-color: var(--home-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border-radius: 0.5rem;
    cursor: pointer;

    font-family: var(--font-title);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
}

.nav-btn:hover {
    transform: scale(1.03);
}

/*#region ICONS*/

.social-icon {
    height: 100%;
    aspect-ratio: var(--icon-aspect);
    background-color: #fff;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.inprnt {
    -webkit-mask-image: url("/shared-resources/svg/inprnt.svg");
    mask-image: url("/shared-resources/svg/social-inprnt.svg");
    --icon-aspect: 336.74 / 363.83;
}

.instagram {
    -webkit-mask-image: url("/shared-resources/svg/instagram.svg");
    mask-image: url("/shared-resources/svg/social-instagram.svg");
    --icon-aspect: 1 / 1;
}

.kofi {
    -webkit-mask-image: url("/shared-resources/svg/kofi.svg");
    mask-image: url("/shared-resources/svg/social-kofi.svg");
    --icon-aspect: 468.29 / 362.37;
}

.patreon {
    -webkit-mask-image: url("/shared-resources/svg/patreon.svg");
    mask-image: url("/shared-resources/svg/social-patreon.svg");
    --icon-aspect: 332.2 / 363.83;
    padding-left: 1px;
}

.twitch {
    -webkit-mask-image: url("/shared-resources/svg/twitch.svg");
    mask-image: url("/shared-resources/svg/social-twitch.svg");
    --icon-aspect: 311.85 / 363.83;
}

.twitter {
    -webkit-mask-image: url("/shared-resources/svg/twitter.svg");
    mask-image: url("/shared-resources/svg/social-twitter.svg");
    --icon-aspect: 447.75 / 363.83;
}

.straw {
    -webkit-mask-image: url("/shared-resources/svg/socials-sp.svg");
    mask-image: url("/shared-resources/svg/socials-sp.svg");
    --icon-aspect: 1 / 1;
}

/*#endregion*/