@font-face {
    font-family: "andika";
    src: url("./fonts/Andika.ttf");
}
@font-face {
    font-family: "amiko";
    src: url("./fonts/Amiko-Regular.ttf");
}
@font-face {
    font-family: "italianno";
    src: url("./fonts/Italianno-Regular.ttf");
}
@font-face {
    font-family: "amita";
    src: url("./fonts/Amita-Regular.ttf");
}
:root {
    --primary: #0d6efd;
    --accent: #b0bec5;
    --bg-color: #ffffff;
    --container-bg-color-lighter: #ffffff50;
    --modal-bg-color: #ffffff80;
    --text-color: #fff;
    --text-color-darker: #212121;
}
*,
html {
    font-size: 16px;
    color: var(--text-color);
}

/* Style de la barre de navigation de toutes les pages */

.first-letter {
    font-family: "italianno";
    font-size: 4rem;
    line-height: 0.5;
}
.remaining-letters {
    font-family: "amita";
    font-size: 1rem;
}
nav {
    margin-top: 1.25rem;
}
.offcanvas-top {
    background-color: rgba(60, 132, 206, 1) 38%;
}
a {
    color: var(--text-color);
    font-family: "amiko";
    font-size: 1rem;
}
.nav-item .nav-link:not(.active) {
    padding-top: 0.6rem;
}
.nav-item .nav-link.active {
    background-color: var(--container-bg-color-lighter);
    border-radius: 1.25rem;
    padding-inline: 1.25rem;
    padding-top: 0.6rem;
    padding-bottom: 0.4rem;
}
.nav-link:hover {
    color: #fff;
}
.navbar {
    height: 10%;
}

/* style du composant principal de toutes les pages*/
main {
    width: 100%;
    height: 90%;

    font-family: "andika";
    text-align: center;
}

.fs-1 {
    width: 80%;
    font-size: 2.8rem;
}
h1,
h2,
h3 {
    width: fit-content;
    height: fit-content;
}
h3 {
    width: 60%;
    font-size: 1.2rem;
    text-decoration: none;
}

/* Classes supplémentaires manquantes à Bootstrap qui été ajoutées */
.w-55 {
    width: 55%;
}
.w-60 {
    width: 60%;
}
.w-38 {
    width: 38%;
}
.w-34 {
    width: 34%;
}
.w-33 {
    width: 33%;
}
.w-30 {
    width: 30%;
}
.w-45 {
    width: 45%;
}
.w-40 {
    width: 40%;
}
.w-35 {
    width: 35%;
}
.h-15 {
    height: 15%;
}
.h-20 {
    height: 20%;
}
.h-30 {
    height: 30%;
}
.h-35 {
    height: 35%;
}
.h-40 {
    height: 40%;
}
.h-42 {
    height: 42%;
}
.h-45 {
    height: 45%;
}
.h-55 {
    height: 55%;
}
.h-60 {
    height: 60%;
}
.h-65 {
    height: 65%;
}
.h-70 {
    height: 70%;
}
.w-60 {
    width: 60%;
}
.w-70 {
    width: 70%;
}
.w-75 {
    width: 75%;
}
.w-80 {
    width: 80%;
}
.w-80 {
    width: 80%;
}
.w-85 {
    width: 85%;
}
.w-90 {
    width: 90%;
}
.w-95 {
    width: 95%;
}
.h-80 {
    height: 80%;
}

.w-95 {
    width: 95%;
}
.h-90 {
    height: 90%;
}
.h-fit {
    height: fit-content;
}
.w-fit {
    width: fit-content;
}
.top-line,
.bottom-line {
    width: 0;
    opacity: 0;
    height: 0.15rem;

    border-radius: 2rem;
    background-color: white;
}
.section-title-text {
    font-family: "andika";
    font-size: 2rem;
    opacity: 0;
}
.text-container {
    font-family: "andika";
    font-size: 1.2rem;

    background-color: #00000033;
    backdrop-filter: blur(10px);
    border-radius: 1.25rem;
}
strong {
    letter-spacing: 0.1rem;
}

.offcanvas-top {
    border-bottom-left-radius: 2rem;
    border-bottom-right-radius: 2rem;
}
.card {
    border: none;
    width: 22rem;
    height: fit-content;

    padding-block: 1.5rem;

    box-shadow: #00000022 0 0 2rem 0.1rem;
    background-color: var(--container-bg-color-lighter);
}
.used-tech {
    width: 20rem;
    height: 25rem;
}
.card-header {
    background-color: transparent;
}
.card-title {
    color: white;
}

.member-picture {
    width: 100%;
    height: 100%;
    background-color: purple;
}
.modal {
    backdrop-filter: blur(3px);
}
.modal-content {
    background-color: var(--modal-bg-color);
}

.toast-header {
    background-color: var(--modal-bg-color);
    height: 2.5rem;
}
form {
    background-color: var(--container-bg-color-lighter);
}
.btn-icon {
    width: auto;
    height: 1.5rem;
}
strong {
    background: linear-gradient(to right, #31064f, #e01b90);
    background-clip: text;

    color: transparent;
}
button[type="reset"] {
    background: white;
}
button[type="reset"]:hover {
    background: var(--text-color-darker);
}