body {
    display: flex;
    flex-direction: column;
}

/* Main */

.title{
    text-align: center;
}
.title-container{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    & > .preuveTitle{
        height: 5vh;
        margin: 0 1vw;
    }
}

.active > .title-container > .preuveTitle{
    display: none;
}

.grid-container {
    display: grid;
    padding: 10px;
    grid-template-columns: auto auto auto;
}
.card {
    background-image: url(../assets/parchment.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 10px;
    filter: contrast(0.9);
    padding: 20px;
    text-align: center;
    margin: 10px;
    cursor: pointer;
    &:hover {
        filter: contrast(1.2);
        transition: all 0.3s ease;
    }
    transition: all 0.3s ease;
}
.card .card-content {
    display: none;
}

.active .card-content{
    display: block !important;
}

/* Preuves */
.card .card-content .preuves {
    display: flex;
    justify-content: center;
    align-items: center;
    & > .preuve {
        display: flex;
        flex-direction: column;
        margin: 0 5vw;
        & > img {
            height: 10vh;
        }
    }
}

@media screen and (max-width: 768px) {
    .preuve {
        margin: 0;
    }
}

.inputs{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 1.5rem;
    height: 1.5rem;
    & > .inputContainer{
        width: calc(100% / 3);
        &:nth-child(2) {
            display: flex;
            justify-content: center; 
            & > input[type="text"]{
                height: 1.5rem;
                font-size: 1.5rem;
                margin: 1vw 1vw;
            }
            & > input[type="button"]{
                height: 2rem;
                font-size: 1.5rem;
                margin: 1vw 1vw;
            }
        }
        &:nth-child(3) {
            display: flex;
            justify-content: flex-end;
            z-index: -1;
        }
    }
}

@media screen and (max-width: 1000px) {
    .inputs{
        flex-direction: column;
        margin: 10vh 0;
        & > .inputContainer{
            width: 100%;
            &:nth-child(2) > input{
                margin: 0.5vw 1vh;
            }
            &:nth-child(3) {
                justify-content: center;
            }
        }
    }
}

/* GRAPHES */

.graphs{
    display: flex;
    justify-content: space-around;
    align-items: center;
    & > .graph{
        width: 50vw;
    }
}

@media screen and (max-width: 768px) {
    .graphs{
        flex-direction: column;
        & > .graph{
            width: 80vw;
        }
    }
}

/* Particularités */

.particularitesTitle{
    font-size: 2rem;
}

.particularite{
    font-size: 1.5rem;
}