/*@import '~@fortawesome/fontawesome-free/css/all.css';*/
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind variants;

.theme-light {
    /*@apply bg-MarathonGrey-lighter text-black;*/
    --bg-color: #ECEAE9;
    --text-color: #2C2926;
    --title-color: #200549;
}
.theme-dark {
    /*@apply dark:bg-MarathonGrey-darkest dark:text-gray-200;*/
    --bg-color: #2C2926;
    --text-color: #ECEAE9;
    --title-color: #9146FF;
}

html{
    background-color: #ECEAE9;
    color: #2C2926;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
}

body>header,
body>footer {
    flex: 0 1 auto;
}

body>#main {
    flex: 1 1 auto;
}

header, footer{
    /*@apply bg-MarathonGrey-light;*/
    /*@apply dark:bg-MarathonGrey-dark;*/
}

.fa{
    font-size: 32px;
    padding-right: 15px;
}

.btn-twitch {
    background-color: #9146FF;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

.btn-twitch:hover {
    background-color: #772ce8;
}

.btn-main {
    background-color: #380983;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}
.btn-main:hover {
    background-color: #5f22c6;
}

.btn-second {
    background-color: #156722;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}
.btn-second:hover {
    background-color: #2bb543;
    color: black;
}

.btn-third {
    background-color: #7e0909;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}
.btn-third:hover {
    background-color: #b52020;
}

.user-info {
    display: flex;
    align-items: center;
}

.user-info img {
    margin-right: 10px;
}

input{
    color: black;
    border: none;
    width: 75px;
    @apply rounded-lg p-2 text-center;
}

.title{
    @apply text-center text-xl leading-tight uppercase;
    color: var(--title-color);
}

.flag-icon{
    width: 25px;
}

.menu-item {
    @apply py-2 px-4 relative cursor-pointer transition duration-300;
}

#dropdown-states {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: #5f22c6 1px solid;
}

#dropdown-states > ul > li:hover {
    background-color: #9146FF;
    color: white;
}

.menu-item:hover {
    background-color: #9146FF;
    color: white;
}

.menu-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12.5%; /* Pour centrer le trait */
    width: 75%;
    height: 2px;
    background-color: #9146FF;
    transition: width 0.3s ease-in-out;
}

.large-input{
    width: 300px;
}

/* Responsive : Menu s'adapte en fonction de la taille de l'écran */
@media (max-width: 768px) {
    #menu {
        @apply flex-wrap;
    }
}