/* Main */
:root {
    --color-primary: #7380ec;
    --color-secondary: #ff006e;
    /* --color-tertiary: ; */
    --color-primary-dark: #5563c1;
    --color-primary-shade: #b5bfd9;
    --color-danger: #ff7782;
    --color-success: #41f1b6;
    --color-warning: #ffbb55;
    --color-white: #fff;
    --color-info: #7d8da1;
    --color-silver: #ccc;
    --color-grey: #f2f2f2;
    --color-dark: #363949;
    --color-dark-alpha: rgba(54, 57, 73, 0.5);
    --color-black-alpha: rgba(0, 0, 0, 0.05);
    --color-light: rgba(132, 139, 200, 0.18);
    --color-dark-varient: #677483;
    --color-background: #f6f6f9;
    --color-illustraion-shadow: rgb(230, 230, 230);

    --card-border-radius: 2rem;
    --border-radius-1: 0.4rem;
    --border-radius-2: 1.2rem;

    --card-padding: 1.8rem;
    --box-shadow: 0 2rem 2rem var(--color-light);

    --black: rgb(0, 0, 0);
    --heading2: rgb(51, 51, 51);
    --text: #333;
    --ltext: rgb(240, 240, 240);
    --color1: rgb(117, 45, 46);
    --color-green: rgb(20, 206, 112);
    --color-red: rgb(219, 89, 89);
}

.dark-theme {
    --color-illustraion-shadow: rgb(25, 25, 25);
    --color-background: #181a1e;
    --color-white: #202528;
    --color-dark: rgb(237, 239, 253);
    --color-dark-alpha: rgba(237, 239, 253, 0.5);
    --color-black-alpha: rgba(0, 0, 0, 0.5);
    --color-dark-varient: #a3bdcc;
    --color-light: rgba(0, 0, 0, 0.4);
    --box-shadow: 0 2rem 3rem var(--color-light);
}

.card {
    border-radius: 1rem;
    background-color: var(--color-white);
    box-shadow: var(--box-shadow);
    padding: 1rem;
}

.text-primary {
    color: var(--color-primary);
}
.text-warning {
    color: var(--color-warning);
}
.text-danger {
    color: var(--color-red);
}

.big-text-4 {
    font-size: 4rem;
}
.big-text-3 {
    font-size: 3rem;
}
.big-text-2 {
    font-size: 2rem;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 14px;
}

body {
    font-family: "Roboto", sans-serif;
    font-size: 0.88rem;
    background: var(--color-background);
    overflow-x: hidden;
    color: var(--color-dark);
    transition: all 0.3s ease-in-out;
}

button {
    font-family: "Roboto", sans-serif;
    background-color: var(--color-primary);
    color: white;
    border: 1px solid var(--color-grey);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;

    &:hover {
        background-color: var(--color-primary-dark);
    }

    &[disabled] {
        background: var(--color-silver);
        cursor: not-allowed;
    }
}

main {
    position: relative;
}

h1 {
    letter-spacing: 4px;
}

h2 {
    letter-spacing: 1px;
}

/*
h3 {
    font-size: 0.87rem;
}

h4 {
    font-size: 0.8rem;
}

h5 {
    font-size: 0.77rem;
}

small {
    font-size: 0.75rem;
} */

a:not(.link),
a:link:not(.link),
a:visited:not(.link) {
    text-decoration: none;
}

input, textarea {
    font-family: "Roboto", sans-serif;

    &:focus {
        outline-color: var(--color-primary);
    }
}

input[type=file] {
    width: 50%;
    min-width: 200px;
    max-width: 100%;
    color: var(--color-dark);
    padding: .5rem;
    background: var(--color-white);
    border-radius: 10px;
    border: 2px solid var(--color-light);
    
    &::file-selector-button {
        margin-right: 1rem;
        border: none;
        background: var(--color-primary);
        padding: .5rem 2rem;
        border-radius: var(--border-radius-2);
        color: var(--color-white);
        cursor: pointer;
    }

    &.hide-input {
        display: none;
        &::file-selector-button {
            display: none;
        }
    }
}

.gap {
    max-width: 1340px;
    margin: auto;
}

.button-styled {
    border: 2px solid var(--bs-dark);
    color: var(--bs-dark);
    background-color: var(--bs-white);
    padding: .5rem 1.5rem;
    border-radius: .2rem;
    width: fit-content;
    transition: all .3s;

    &:hover {
        background-color: var(--bs-dark);
        color: var(--bs-white);
    }
}

.outline {
    border: 1px solid;
    border-radius: 3px;
    padding: .5rem 1rem;
    width: fit-content;
    margin: 0 auto;
}

.rating-stars {
    display: grid;
    font-size: 2rem;
    --fill-color: #f28c00;
    --percent-stars: calc(var(--fraction) / var(--total) * 100%);
    color: var(--fill-color);
    width: fit-content;
    margin: 0 auto;

    span {
        grid-column: 1;
        grid-row: 1;
    }
    .empty-stars {
        color: var(--fill-color);
    }

    .filled-stars {
        background: linear-gradient(to right, var(--fill-color) var(--percent-stars), var(--color-white) var(--percent-stars));
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        display:block;
    }
}

p {
    color: var(--color-info);
}


@media (max-width:900px) {
    /* .gao {
        padding: 0 1rem;
    } */
}