/* -- CORE STYLES & FONTS & VARIABLES ------ */

@import url('./core.css');

:root {
    --color-primary: #809edc;
    --color-black: #010101;
}


/* -- ICONS -------------------------------- */

.icon {
    width: 2rem;
    height: 2rem;
    display: block;
    background: currentColor;
    mask: var(--icon) no-repeat center / contain;

    &.facebook {
        --icon: url('../img/icon-facebook.svg');
    }

    &.instagram {
        --icon: url('../img/icon-instagram.svg');
    }
}


/* -- CUSTOM STYLES ------------------------ */

body {
    color: var(--color-black);
    background: var(--color-primary);
    font-family: sans-serif;

    &.invert {
        --color-primary: #010101;
        --color-black: #809edc;

        main {
            background: url('../img/poster-invert.png') no-repeat center / contain;
        }

        .menu a:hover {
            color: var(--color-primary);
        }
    }
}

main {
    width: 90vw;
    height: 90vh;
    background: url('../img/poster.png') no-repeat center / contain;
}

.menu {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
    gap: var(--gap-small);

    a {
        display: block;
        color: var(--color-primary);
        background: var(--color-black);
        width: 3.5em;
        height: 3.5em;
        position: relative;
        border-radius: 50%;
        transition: all .2s;

        &:hover {
            color: var(--color-black);
            background: #eee;
        }
    }
}