.tab_extras {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

/* Menu navigation tabs */

.navigation_menu_extras {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    font-family: GenshinImpact;

    margin: 3vh 0vw;
}

.navigation_menu_extras>div {
    flex: 1 1 0;
    cursor: pointer;
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
    text-align: center;

    width: 16vw;
}

.active_tab_button {
    background-color: var(--secondary_color);
}

.disabled_tab_button {
    background-color: var(--tertiary_color);
}

.disabled_tab_button:hover {
    background-color: var(--secondary_color);
}

.menu_extra_banners {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    width: 90%;
}

.menu_extra_current_banners {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    flex-wrap: wrap;

    width: 100%;
}

.menu_extra_current_banners>img {
    width: 45%;

    border-radius: 10px;
}

.menu_extra_banners_stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
}

.menu_extra_characters_banners {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    flex-wrap: wrap;

    width: 100%;
}

.character_extra_banner {
    margin: 1vh 11px;
}

.character_banner_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    color: var(--light_text);

    margin: 3vh 1vw;
    
    width: 100%;
}

.character_banner_container_4 {
    box-shadow: 0px 12px 4px -4px var(--character_4_stars);
}

.character_banner_container_5 {
    box-shadow: 0px 12px 4px -4px var(--character_5_stars_light);
}

.banners_stat {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.banners_stat_container {
    position: relative;
}

.banners_stat_icon {
    width: 2.6vw;
}

.banners_stat_subtext {
    position: absolute;
    bottom: 5px;
    right: -5px;

    font-size: x-small;
    font-style: italic;
}

.banners_stat_count {
    font-size: large;

    margin-left: 1vw;
}

.character_banner_stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    font-size: smaller;

    background-color: var(--tertiary_color);
    border-radius: 10px;

    margin-top: 5px;
}

.character_banner_date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin-bottom: 5px;
}

.waiting_days {
    font-size: large;

    margin: 10px 0px;
}

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

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

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

.menu_extra_birthdays_calendar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: 70vw;
    height: 85vh;
}

.menu_extra_birthdays_calendar_menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;

    width: 25vw;
    height: 10vh;
}

.calendar_label {
    font-size: larger;
    color: var(--light_text);

    margin-bottom: 2vh;
}

.calendar_change_buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    width: 25vw;
    height: 10vh;

    margin: 1vw 1vh;
}

.change_calendar_month_button {
    width: 3vw;

    cursor: pointer;
}

.change_calendar_month_button:hover {
    filter: brightness(0%);
}

.last_month {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

.next_month {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.menu_extra_birthdays_calendar_month {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    width: 25vw;
    height: 100%;

    background-size: cover;
    background-repeat: no-repeat;

    border-radius: 10px;
}

.birthday_month_title {
    font-size: xx-large;
    width: 70%;
}

.birthday_days_columns {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: center;

    max-width: 60%;
    height: 30%;

    margin-top: 2vh;
    margin-bottom: 6vh;
}

.birthday_column_title {
    font-size: small;
}

.birthday_column {
    flex: 1;

    display: grid;
    align-items: center;
    justify-content: center;

    grid-template-rows: 16% 16% 16% 16% 16% 16%;

    font-size: large;

    margin: 0vh 0.3vw;

    height: 100%;
}

.birthday_column>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    margin: 0.3vh 0vw;
}

.calendar_img {
    max-width: 100%;
    max-height: 80%;
    width: auto;
    height: auto;
}

.previous_month_days {
    color: gray;
}


















.menu_extra_archetypes {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 90%;
}

.archetypes_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.archetype_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    width: 80%;

    margin: 5vh 0vw;
}

.teams_example {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 80%;
}

#show_all_archetypes_button {
    margin-right: 1vw;
}

.archetype_title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    margin-bottom: 1vh;

    width: 100%;

    font-size: 5vh;
    font-family: GenshinImpact;

    color: var(--light_text);
}

.archetype_subtitle {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    margin-top: 1vh;

    width: 100%;

    font-size: x-large;
    font-family: GenshinImpact;

    color: var(--light_text);
}

.element_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--primary_color);

    border-top-left-radius: 8%;
    border-top-right-radius: 8%;
    border-bottom-right-radius: 20%;

    /* border-radius: 50%; */
}

.element_character_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-color: var(--primary_color);

    border-top-left-radius: 8%;
    border-top-right-radius: 8%;
    /* border-bottom-right-radius: 20%; */

    /* border-radius: 50%; */
}

.double_element_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    position: relative;

    width: 12vh;
    height: 12vh;
    padding: 1vh;

    background-color: var(--primary_color);
    
    border-top-left-radius: 8%;
    border-top-right-radius: 8%;
    border-bottom-right-radius: 20%;
}

.double_element_container :first-child {

    width: 6vh;
    max-width: inherit;
    border-top-left-radius: 8%;
    border-top-right-radius: 8%;
    border-bottom-right-radius: 20%;

    position: absolute;
    top: 0.7vh;
    left: 0.7vh;
}

.double_element_container :last-child {
    width: 6vh;
    max-width: inherit;
    border-top-left-radius: 8%;
    border-top-right-radius: 8%;
    border-bottom-right-radius: 20%;

    position: absolute;
    bottom: 0.7vh;
    right: 0.7vh;
}

.svg_divisor_line {
    width: 10vh;
    height: 10vh;
    /* height: 100%; */
    position: absolute;
}

.divisor_line {
    stroke: #e2e2e2;
    stroke-width: 3;
}

.archetype_element_icon {
    width: 12vh;
    padding: 1vh;
    max-width: inherit;
}

.archetype_character_icon {
    width: 14vh;
    /* padding: 1vh; */
    max-width: inherit;
}

.team_elements_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    border-radius: 3px;
    margin: 1vh;
    margin-left: 4vh;
    margin-right: 4vh;

    padding: 2vh 0vw;

    width: 30vw;

    background-color: var(--tertiary_color);
}

.archetype_info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;

    height: 40vh;

    color: var(--light_text);
    font-size: smaller;
}

.recommended_characters_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;

    flex-wrap: wrap;
}

.link_archetypes_button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.link_archetypes_button>img {
    width: 5vh;
}

.link_archetypes_button>img:hover {
    filter: invert(100%);
}





/* Archetypes colors */

.color_pyro {
    background: linear-gradient(to bottom right, var(--secondary_color) 40%,  var(--pyro));
}

.color_electro {
    background: linear-gradient(to bottom right, var(--secondary_color) 40%, var(--electro));
}

.color_dendro {
    background: linear-gradient(to bottom right, var(--secondary_color) 40%, var(--dendro));
}

.color_anemo {
    background: linear-gradient(to bottom right, var(--secondary_color) 40%, var(--anemo));
}

.color_cryo {
    background: linear-gradient(to bottom right, var(--secondary_color) 40%, var(--cryo));
}

.color_geo {
    background: linear-gradient(to bottom right, var(--secondary_color) 40%, var(--geo));
}

.color_hydro {
    background: linear-gradient(to bottom right, var(--secondary_color) 40%, var(--hydro));
}

.color_hypercarry {
    background: var(--secondary_color);
}

.color_flex {
    background: linear-gradient(to bottom right, var(--secondary_color) 40%, var(--flex));
}

.color_pyro_illuminated {
    background: var(--pyro_collapsible);
}

.color_electro_illuminated {
    background: var(--electro_collapsible);
}

.color_dendro_illuminated {
    background: var(--dendro_collapsible);
}

.color_anemo_illuminated {
    background: var(--anemo_collapsible);
}

.color_cryo_illuminated {
    background: var(--cryo_collapsible);
}

.color_geo_illuminated {
    background: var(--geo_collapsible);
}

.color_hydro_illuminated {
    background: var(--hydro_collapsible);
}

.color_hypercarry_illuminated {
    background: var(--tertiary_color);
}

.color_flex_illuminated {
    background: var(--flex_collapsible);
}






/* Wide laptop version (Width: 1024->1440px) */
@media only screen and (min-width: 1025px) and (max-width: 1440px) {
    .footer {
        font-size: smaller;
    }
}








/* Small desktop/laptop version (Width: 769->1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {}













/* Mobile version (Width: 300->768px) */
@media only screen and (min-width: 0px) and (max-width: 768px) {
    .tab_extras {
        flex-direction: column;
    }

    .navigation_menu_extras>div {
        width: 50vw;
    }

    .menu_extra_characters_banners {
        width: 85vw;
    }

    .calendar_label {
        font-size: medium;
    }

    .menu_extra_birthdays_calendar {
        flex-direction: column;
    }

    .menu_extra_birthdays_calendar_menu {
        width: 100%;

        margin-top: 4vh;
        margin-bottom: 7vh;
    }

    .menu_extra_birthdays_calendar_month {
        width: 100%;
    }

    .calendar_change_buttons {
        width: 100%;
    }

    .change_calendar_month_button {
        width: 10vw;
    }

    .birthday_month_title {
        font-size: larger;
    }








    
    .archetype_container {
        flex-direction: column;
    }

    .team_elements_container {
        width: 90vw;

        margin-left: 0px;
        margin-right: 0px;
    }

    .archetype_element_icon {
        width: 15vw;
    }

    .double_element_container {
        width: 15vw;
        height: 15vw;
    }

    .double_element_container :first-child {
        width: 4vh;
    }

    .double_element_container :last-child {
        width: 4vh;
    }

    .svg_divisor_line {
        width: 9vh;
        height: 9vh;
    }

    .archetype_info {
        height: auto;
    }

    .archetype_character_icon {
        width: 15vw;
        padding: 1vh;
    }

    .archetype_title {
        width: 90vw;
        font-size: 4vh;
    }
}