@font-face {
    font-family: nunito;
    src: url(../fonts/nunito.ttf);
}

* {
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    color: white;
    font-family: nunito, serif;
    transition: border-radius 0.5s;
}

body {
    --default-border-radius: 20px;

    margin: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}


.cardContainer {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


.card {
    background: rgb(150, 150, 150, 0.35);
    backdrop-filter: blur(4px);
    border: 1px solid rgb(150, 150, 150, 0.75);
    border-radius: var(--default-border-radius);
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}


#svgQuadrillage {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #121111;

}

#svgBackCurve {
    position: fixed;
    width: 100%;
    height: 100vh;
}


.curve {
    stroke: #76ABAE;
    stroke-width: 5px;
}

.droite {
    stroke: #f43020;
    stroke-width: 5px;
}

.tangente {
    stroke: #f43020;
    transition: opacity 1s;
    opacity: 0;

}

.tangentePoint {
    fill: #e5c185;
    transition: opacity 1s;
    opacity: 0;
}

.tangentePointExpli {
    fill: #121111;
}