*
{
    margin: 0px;
    padding: 0px;
}

body
{
    background-color: #131316;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    overflow-x: unset;
}

body::-webkit-scrollbar 
{
    display: none;
}

a
{
    text-decoration: none;
}

h1
{
    text-align: center;
    font-size: 3vw;
}

h2
{
    text-align: center;
    font-size: 6vw;
    font-family: 'Alfa Slab One', 'Poppins', sans-serif;
    font-weight: normal;
    text-transform: uppercase;
}

.container
{
    display: grid;
    place-items: center;
    align-content: center;
    justify-content: space-evenly;
    width: 100vw;
    height: 30vw;
}

.rubrique
{
    width: 60vw;
    height: 25vw;

    border-radius: 2vw;
    background-color: rgba(0, 0, 0, 0.3) ;

    display: flex;
    place-items: center;
    align-content: center;
    /* grid-template-columns: 25vw 25vw; */
    /* grid-template-rows: 25vh 25vh; */
    /* gap: 1vh; */

    background-position: center;
    /* background-size: cover; */
    background-repeat: no-repeat;

    color: #131316;

    overflow: hidden;
}

.rubrique:hover
{
    transform: scale(1.05);
}

.character
{
    float: left;
    /* width: calc(100% / 5 - 1%); */
    /* height: calc(100vw / 5); */
    height: 100%;
    width: 20vw;
    /* margin: 0.5%; */
    /* background-color: rgba(0, 0, 0, 0.1); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    transition-duration: 0.2s;
}

/* .hidden_left .character
{
    float: inline-start;
}

.hidden_right .character
{
    float: inline-start;
} */

.texte-character
{
    height: 70vh;
    width: 50vw;
    /* margin: 0.5%; */

    display: grid;
    place-items: center;
    align-content: center;
    /* background-position: center; */
    /* background-size: cover; */
    /* background-repeat: no-repeat; */

    color: #fff;
}

.small-rubrique
{
    height: 90vh;
    width: 30vw;

    border-radius: 3vh;
    background-color: #fff ;

    display: grid;
    place-items: center;
    align-content: center;
    /* grid-template-columns: 25vw 25vw; */
    /* grid-template-rows: 25vh 25vh; */
    /* gap: 1vh; */

    color: #131316;
}

.small-rubrique:hover
{
    transform: scale(1.1);
    /* transform: rotateY('180deg'); */
}

.grid2
{
    width: 56vw;
    height: 86vh;

    display: grid;
    grid-template-columns: 27vw 27vw;
    /* grid-template-rows: 25vh 25vh; */

    column-gap: 2vw;
    row-gap: 2vh;
}

.subrubrique
{
    height: 42vh;
    /* min-width: 25vw; */

    /* background-color: #000066;  */
    background: linear-gradient(#000066, #aaf);
    border-radius: 2vh;
}

.subrubrique:hover
{
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    transform: scale(1.015);
}

@keyframes pulse
{
    0%, 100% {transform: scale(1);}
    50% { transform: scale(1.1);}
}

.hidden
{
    opacity: 0;
    filter: blur(5px);
    transition: all 1s;
}

.hidden_left
{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-100%);
    transition: all 1s;
}

.hidden_right
{
    opacity: 0;
    filter: blur(5px);
    transform: translateX(100%);
    transition: all 1s;
}


@media (prefers-reduced-motion)
{
    .hidden
    {
        transition: none;
    }

    .hidden_left
    {
        transition: none;
    }

    .hidden_right
    {
        transition: none;
    }
}

.show
{
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}


/*** MEDIA ***/

@media (max-width: 1280px) 
{

    .container
    {
        width: 100vw;
        height: 30vw;
    }

    .rubrique
    {
        width: 80vw;
        height: 25vw;
    }

    .character
    {
        float: left;
        height: 100%;
        width: 30vw;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transition-duration: 0.2s;
    }

    .text-character
    {
        width: 50vw;
    }
}

/* @media (max-width: 480px) {

    .container
    {
        height: 50vh;
    }

    #intro
    {
        height: 100vh;
    }

    .rubrique
    {
        height: 40vh;
        width: 80vw;
    }

    .character
    {
        float: left;
        height: 100%;
        width: 30vw;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transition-duration: 0.2s;
    }

    .text-character
    {
        width: 50vw;
    }
} */