@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* Component IMPORTS */
@import "./components/Header.css";
@import "./components/Button.css";
@import "./components/SteamButton.css";
@import "./components/ProfileDropdown.css";
@import "./components/Toast.css";
@import "./components/Pagination.css";
@import "./components/Footer.css";

@import "./components/ItemCard.css";
@import "./components/PostCard.css";

/* Page Component IMPORTS */
@import "./components/ProfilePage.css";
@import "./components/HomePage.css";
@import "./components/PostPage.css";

*,
*::before,
*::after,
html {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
}

:root {
        --on: hsla(0 0 100);

        --background: hsla(0 0 13 / 100%);
        --background-container: hsla(0 0 15 / 100%);
        --background-dark-container: hsla(0 0 12 / 100%);

        --primary: #4E4E4E;
}

body {
        background: var(--background);

        font-family: "Outfit", sans-serif;
        font-optical-sizing: auto;
        font-style: normal;
}

main {
        padding-block: 50px;
}

a {
        text-decoration: none;
        color: inherit;
}

ul,
ol {
        list-style: none;
}


img {
        width: 100%;
        height: 100%;
}

input {
        border: none;
        outline: none;
}

button {
        border: none;
        outline: none;
        cursor: pointer;
}

.block {
        display: grid;
        grid-template-columns: 1fr min(100% - 60px, 1440px) 1fr;

        >* {
                grid-column: 2;
        }
}

.ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}