@font-face {
    font-family: "WWW";
    src: url("../font/Typo_Wawa_Writes_Word/WawaWritesWords-Regular.ttf") format("TrueType");
}

@font-face {
    font-family: "Basteleur-Moonlight";
    src: url("../font/Basteleur-master/Basteleur-Moonlight.ttf") format("TrueType");
}

@font-face {
    font-family: "Inter";
    src: url("../font/Inter/Inter_28pt-Regular.ttf") format("TrueType");
}

@font-face {
    font-family: "Inter-title";
    src: url("../font/Inter/Inter_28pt-SemiBoldItalic.ttf") format("TrueType");
}


:root {
    --main-color: rgb(75, 0, 130); /* #4B0082 */
    --second-color: rgb(255, 182, 0); /* #FFB600 */
    --third-color: rgb(0, 255, 127);  /* #00FF7F */
    --light-color: rgb(203, 108, 230); /*#CB6CE6 */
    --white: rgb(240, 230, 250); /* #F0E6FA */
    --nl: rgb(239, 235, 232); /* #EFEBE8*/
    --black: rgb(42, 40,43); /* #2A282B */

    --radius: 0.4em;
}

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-size: 20px;
    line-height: 24px;
    font-family: "Inter";
    color: var(--white);
    /*background: linear-gradient(0deg,rgba(203, 108, 230, 1) 0%, rgba(75, 0, 130, 1) 30%);*/
    background-color: var(--main-color);
}

h1 {
    font-size: 34px;
    line-height: 45px;
    font-family: "Basteleur-Moonlight", Cursive;

}

h2 {
    font-size: 35px; 
    font-family: "WWW", Cursive;

}

h3 {
    font-size: 24px;
    font-family: "Inter-title", Cursive;

}

h4 {
    font-family: "Basteleur-Moonlight", Cursive;
}

a {
    color: var(--third-color);
}

/* UTILS    ======================== */

.container {
    max-width: 1200px;
    margin: auto;
    
    padding: 2em 0;
}

#firefly {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    filter: blur(1px);
}

.www-font {
    font-family: "WWW", Cursive;
}

.action-button {
    display: block;
    width: fit-content;
    margin: auto;
    text-decoration: none;
    padding: 1em 1em;
    color: var(--main-color);
    background-color: var(--second-color);
    border-radius: var(--radius);

    transition: 0.5s;
}

.action-button:hover {
    background-color: var(--third-color);
    transform: scale(1.1);
    transition: 0.5s;
}

.down-arrow {
    display: block;
    padding: 1em;
    margin: auto;
    width: 5%;
    
}

.hide {
    display: none;
}

/* HEADER    ======================== */

header {

   > div {
       display: flex;
       justify-content: space-between;
       gap: 50%;

       & div {
           display: flex;
           align-items: center;
           gap: 1em;

        & a {
            max-width: 2em;
        }

           & img {
               width: 100%;
           }
       }

       & div:first-child {
           justify-content: start;
       }

       & div:last-child {
           justify-content: end;
       }
   } 

    & nav {
        margin-bottom: -4em;

        & ul {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1em;
            margin: 0;
            padding: 0;
            list-style-type: none;
            text-align: center;

            & li {
                flex-basis: 13%;
                width: fit-content;

            }

            & li a {
                color: var(--third-color);
                text-decoration: none;
                transition: 0.3s;
            }

            & li a:hover{
                color: var(--second-color);
                transition: 0.3s;
            }

            & li img {
                width: 100%;
            }

            & .nav-div {
                position: relative;
                cursor: pointer;
                transition: 0.3s;
                color: var(--third-color);

                & ul {
                    display: none;
                    position: absolute;
                }

            }

               
            & .nav-div:hover {
                transition: 0.3s;
                color: var(--second-color);

                & ul {
                    display: block;
                }
            }
        }

    }
}

/* FOOTER    ======================== */

footer {
    text-align: center;

    & div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-around;
        gap: 1em;

        color: var(--white);

        & img {
            width: 100%;
        }

        & a {
            color: var(--white);
            text-decoration: none;
        }

        & ul {
            text-align: left;
            margin:0;
        }

        & div:first-child {
            
            & img {
                max-width: 5em;
            }
        }


        & div:last-child {
            
            & div {
                display:flex;
                gap: 0.5em;

                & a {
                    max-width: 2em;
                    
                }

            } 
        }
    }

    > div:last-child {
        font-size: 0.5em;

        & p {
            margin: auto;

            & a {
                color: var(--third-color);
                text-decoration: none;
            }
        }
    }
}

/* ERRO    ======================== */

.error {
    margin: auto;
    text-align: center;

    & img {
        width: 100%
    }
}
/* MAIN   ========================= */

.intro {
    padding-top: 15em;

    background-image: url("../img/image-feu-de-camp-scelle-raton-min.webp");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;

    & article {
        background-color: rgba(75, 0, 130, 0.75);
    }

    .hero {
        width: 39%;
        padding: 2em;
        margin-left: 50%;
        background-color: rgba(75, 0, 130, 0.75);
        border-radius: var(--radius);

        & p {
            padding-bottom: 1em;
        }
    }

    .hello {
        padding: 2em;
        margin-top: 15em;
        text-align: center;
        background-attachment: fixed;
        & ul {
            list-style-type: none;
        }

        .container {
            > div {
                display: flex;
                align-items: center;

        & img {
            width: 50%;
        }

            }
        }
    }
}


.cards {

    & h3 {
        text-align: center;
    }

    & img:last-child {
        display: block;
        width: 100%;
    }

    & article {
        & ul {
            padding: 0;
            list-style-type: none;
        }

         > ul {
             display: flex;
             justify-content: space-between;
             gap: 1em;

             > li {
                 flex-basis: 45%;
                 padding: 1.5em;
                 text-align: center;
                 background-color: var(--light-color);
                 border-radius: var(--radius);

                 > img {
                     width: 50%;

                 }

                 > ul {
                     text-align: left;

                     > li {
                         padding: 0.5em 0;
                     }
                 }

             }
         }
    }
    
}

.bubble {
     > ul {
         padding: 0;
         display: flex;
         justify-content: space-between;
         gap: 1em;

         list-style-type: none;

         & li {
             & img {
                 width: 100%;
                 border-radius: var(--radius);
             }
         }
     }
}

.product {
    text-align: center;
    /*background: radial-gradient(circle,rgba(0, 255, 127, 1) 0%, rgba(75, 0, 130, 1) 34%); */
    background-attachment: fixed;


    & article {
        padding: 1em;
        border-radius: var(--radius);

    }

    & article:first-child {
        & img {
            width: 75%;
        }
    }

    & article:last-child {
        
         > div {
             display: flex;
             gap: 1em;

         }
    
    }

    
 }

 .gazette {
    padding: 3em 0;
    background-image: url("../img/banniere-lanterne-scelle-raton-min.webp");
    background-size: cover;


    & article {
        padding: 1em;
        display: grid;
        grid-template-areas:
        "i1 i1"
        "d1 d2";
        color: var(--main-color);
        background-color: var(--nl);
        border-radius: var(--radius);

        & img {
            grid-area: i1;
            width: 100%;
        }

        & div:nth-child(2) {
            grid-area: d1;

            & h2 {
                padding-bottom: 0.3em;

            }

            & h3{
                padding: 0;
            }
        }

        & div:last-child {
            grid-area: d2;
        }

    }
 }

 .accordeon {
     margin: 1em auto;
     padding: 1em 1em;
     background-color: var(--main-color);
     border: 2px solid var(--second-color);
     border-radius: var(--radius);

     color: var(--third-color);

     & div {
         padding: 1em;
         cursor: pointer;
         box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;

         & p {
            transition: 0.5s;
         }

     }

     & div:hover {
         outline: 1px solid var(--third-color);

     }

   }

.oracle-hero {

    & article {
        width: 50%;
        margin: auto;
    }

    & video {
        display: block;
        width: 70%;
        margin: 1em auto;
        border-radius: var(--radius);
    }

    > div {
        display: flex;
        gap: 1.5em;
    }

}

.oracle-product {

    & article {
        display: grid;
        gap: 1em;
        grid-template-areas:
        "h1 h1"
        "i1 d1";

        & h2 {
            grid-area: h1;
        }

        & img {
            grid-area: i1;
            width: 100%;
        }

        & div {
            grid-area: d1;

            & ul {
                padding: 0;
                list-style-type: none;
            }
        }
    }
}

.oracle-outro {
    background-color: var(--light-color);

    & article {
        text-align: center;

        > div {
            padding: 1em;

            & p {
                margin: 0;
            }

            & p:last-child {
                padding: 1em 0;
            } 
        }
    }
}