.container {
    display:grid;
    grid-template-columns:38% 5% 57%;
    grid-template-rows:25% 10% 65%;
}


.table-of-contents {
    border:solid white 3px;
    border-radius:15px;
    padding:5px;
    width:90%;
    height:fit-content;
    margin: 0 auto 0 auto;
    grid-column:1;
    grid-row:1;
}


.table-of-contents li {
    list-style:decimal;
    width:fit-content;
    transition:all ease 0.2s;
}

.table-of-contents a{
    color:white;
    text-decoration:none;
    transition:all ease 0.2s;
}

.table-of-contents li:hover a{
    text-decoration:underline;
}

.table-of-contents li:hover{
    padding-left:5%;
}

.table-of-contents ul{
    text-align:left;
}

.content {
    grid-column:3;
    grid-row:1/4;
}

.content p{
    text-align:left;
}

.niveau2 {
    grid-column:1;
    grid-row:2;
    margin:10vh auto auto auto;
}

@media (max-width: 900px){
    .container {
        grid-template-columns:auto;
        grid-template-rows:auto auto auto;
    }
    
    .content {
        grid-column:1;
        grid-row:2;
    }
    
    .content p {
        width:50vw;
        margin:auto;
    }
    
    .niveau2 {
        grid-row:3;
    }
}