/*
Theme Name: Konichu Theme
Description: Child theme for Hello-elementor. You can now safely customize it and not risk losing your customizations.
Author: Alexandre REVIRE
Author URI: https://alexandre-revire
Template: hello-elementor
Version: 1.0
*/

/* luckiest-guy-regular - latin */
@font-face {
    font-family: "Luckiest Guy";
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    src: url("../fonts/Luckiest Guy/luckiest-guy-v18-latin-regular.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+ */ url("../fonts/Luckiest Guy/luckiest-guy-v18-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-300 - latin */
@font-face {
    font-family: "Open Sans";
    font-weight: 300;
    font-style: normal;
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    src: url("../fonts/Open Sans/open-sans-v34-latin-300.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+ */ url("../fonts/Open Sans/open-sans-v34-latin-300.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-regular - latin */
@font-face {
    font-family: "Open Sans";
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    src: url("../fonts/Open Sans/open-sans-v34-latin-regular.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+ */ url("../fonts/Open Sans/open-sans-v34-latin-regular.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-500 - latin */
@font-face {
    font-family: "Open Sans";
    font-weight: 500;
    font-style: normal;
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    src: url("../fonts/Open Sans/open-sans-v34-latin-500.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+ */ url("../fonts/Open Sans/open-sans-v34-latin-500.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-600 - latin */
@font-face {
    font-family: "Open Sans";
    font-weight: 600;
    font-style: normal;
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    src: url("../fonts/Open Sans/open-sans-v34-latin-600.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+ */ url("../fonts/Open Sans/open-sans-v34-latin-600.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
    font-family: "Open Sans";
    font-weight: 700;
    font-style: normal;
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    src: url("../fonts/Open Sans/open-sans-v34-latin-700.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+ */ url("../fonts/Open Sans/open-sans-v34-latin-700.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-800 - latin */
@font-face {
    font-family: "Open Sans";
    font-weight: 800;
    font-style: normal;
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    src: url("../fonts/Open Sans/open-sans-v34-latin-800.woff2") format("woff2"), /* Chrome 36+, Opera 23+, Firefox 39+ */ url("../fonts/Open Sans/open-sans-v34-latin-800.woff") format("woff"); /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

.no-list {
    list-style: none;
}

#StatKonichGame form {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 4rem;
    gap: 1em;
}

#StatKonichGame form [type="submit"] {
    flex-shrink: 1;
}

#StatKonichGame #results { 
    display: grid;
    width: 100%; 
    grid-template-columns: 1fr 1fr;
    grid-template-rows: min-content min-content min-content min-content; 
    gap: 2rem 2rem;
    grid-template-areas: 
    "stats appearance"
    "arsenal-events arsenal-events"
    "arsenal-items arsenal-spells"
    "inventory-items inventory-spells";
}

#StatKonichGame #results h2 {
    color: var(--e-global-color-text);
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 18px;
}


#StatKonichGame #results #player-statistiques {
    grid-area: "stats";
}

#StatKonichGame #results #player-statistiques .wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 2rem;
}

#StatKonichGame #results #player-statistiques .wrapper .basic-infos {
    flex-shrink: 0;
}

#StatKonichGame #results #player-appearance {
    grid-area: "appearance";
}

#StatKonichGame #results #player-arsenal-events {
    grid-area: "arsenal-events";
    grid-column-start: 1;
    grid-column-end: 3;
}

#events {
    display: grid;
    max-height: 400px;
    overflow-y: scroll;
    grid-template-columns: repeat(2,1fr);
    background: rgba(248, 204, 48, 0.08);
    overflow-x: hidden;
}


#StatKonichGame #results #player-arsenal-items {
    grid-area: "arsenal-items";
}

#StatKonichGame #results #player-arsenal-spells {
    grid-area: "arsenal-spells";
}

#StatKonichGame #results #player-inventory-items {
    grid-area: "inventory-items";
}

#StatKonichGame #results #player-inventory-spells {
    grid-area: "inventory-spells";
}

.custom-items-list {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 17px 14px;
    background: rgba(48, 236, 248, 0.08);
    gap: 10px;
}

.custom-items-list li {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 0px;
    gap: 12px;
}

.custom-items-list li .slot {
    padding: 8px 17px;
    color: var(--e-global-color-text);
    background: #181818;
}

#ShopKeeper { 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 1rem 1rem;
}

.stuff {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    padding: 10px;
    text-align: center;
    border: solid 1px var(--e-global-color-primary);
    gap: 25px;
}

.stuff .stuff__infos {
    color: var(--e-global-color-text);
    font-size: 14px;
}

.stuff .stuff__infos .stuff__title {
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 18px;
}

@media screen and (max-width: 1024px) {
    #ShopKeeper { 
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 1fr;
    }
}

@media screen and (max-width: 768px) {
    #StatKonichGame form {
        flex-direction: column;
        justify-content: center;
    }
    
    #StatKonichGame #results { 
        grid-template-columns: 1fr;
        grid-template-rows: min-content min-content min-content min-content; 
        grid-template-areas: 
        "stats"
        "appearance"
        "arsenal-events"
        "arsenal-items"
        "arsenal-spells"
        "inventory-items"
        "inventory-spells";
    }

    #StatKonichGame #results #player-statistiques .wrapper {
        flex-wrap: wrap;
    }

    #ShopKeeper { 
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (max-width: 480px) {
    #ShopKeeper { 
        grid-template-columns: 1fr;
    }
}