@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: FixtureCondensedBlack;
    src: url('fonts/fixture_condensed_black.otf');
}

@font-face {
    font-family: FixtureExpandendBold;
    src: url('fonts/fixture_expanded_bold.otf');
}

@font-face {
    font-family: Helvetica;
    src: url('fonts/HelveticaNowDisplay-Regular.otf');
}

@font-face {
    font-family: HelveticaBold;
    src: url('fonts/helvetica_now_micro_bold.otf');
}

@font-face {
    font-family: FixtureBold;
    src: url('fonts/fixture_bold.otf');
}

@font-face {
    font-family: FixtureExpandedMedium;
    src: url('fonts/fixture_expanded_medium.otf');
}

:root {
    --color-pink: #E9CCCC;
    --color-grey: #787878;
}

body,
header {
    background-color: #101010;
    font-family: 'Helvetica', sans-serif;
}

h1, h2 {
    font-family: 'FixtureCondensedBlack';
}

button {
    font-family: 'FixtureExpandedMedium';
}

.expanded-bold {
    font-family: 'FixtureExpandendBold';
}

.menu-list {
    font-family: 'FixtureBold';
}

.border-pink {
    border-color: var(--color-pink);
}

.pink {
    color: var(--color-pink);
}

.grey {
    color: var(--color-grey);
}

.category-list li:hover {
    color: white;
    cursor: pointer;
}

.fb-link::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('img/icon/fb_black.svg') no-repeat;
    background-size: cover;
    position: absolute;
    left: -1.6rem;
}