:root {
    --border-margin: 50px;
}

@font-face {
    font-family: Terminus;
    src: url(https://tpemcm.lamachotte.fr/fonts/terminus.ttf);
}

@font-face {
    font-family: Lato;
    src: url(https://tpemcm.lamachotte.fr/fonts/Lato-Regular.ttf);
}

* {
    font-family: "Lato";
}

header {
    background-color: darkgreen;
    padding-top: 5px;
    padding-bottom: 20px;
    margin: 0px var(--border-margin) 0px var(--border-margin);
    text-align: center;
    border-radius: 0px 0px 20px 20px;;
}

.footer {
    background-color: rgb(0, 26, 0);
    color: white;
    padding-top: 5px;
    padding-bottom: 20px;
    margin: 0px var(--border-margin) 0px var(--border-margin);
    text-align: center;
    border-radius: 20px 20px 0px 0px;
}

.contenu {
    background-color: blanchedalmond;
    border-radius: 20px;
    margin: 20px var(--border-margin) 20px var(--border-margin);
    padding: 20px 50px 20px 50px;
}


body {
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: rgb(65, 65, 65);
}

th, td {
    padding: 10px;
    text-align: center;
    border: 5px solid #ddd;
    margin: 0px;
    padding: 3px;
}

.frac {
    display:inline-block;
    margin-left: 5px;
    margin-right: 5px;
    vertical-align: -64%;
    text-align: center;
}
.frac > .num, .frac > .den {
    display: inline-block;
    padding:0 5px
}
.frac > .fracbar {
    display: block;
    height: 0;
    margin:0;
    border:0;
    border-bottom:.1em solid;
    overflow:hidden;
}
.den{vertical-align:top;}