@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/* https://icons.getbootstrap.com/ */


:root{
	--noir: 	#141414; 
    --gris1: 	#4d4d4d; 
    --gris2: 	#D8D8D8;
    --blanc: 	#FFFFFF;
    --violet: 	#662D91;
    --rouge: 	#E01C24; 
	--orange: 	#FF931E;
    --vert : 	#2E9959;
	--rose :	#ED5FB1;
	--bleu :	#3885F4; 
}

.bg-violet{
	background-color: var(--violet);
}
.bg-rouge{
	background-color: var(--rouge);
}
.bg-orange{
	background-color: var(--orange);
}
.bg-vert{
	background-color: var(--vert);
}
.bg-rose{
	background-color: var(--rose);
}
.bg-bleu{
	background-color: var(--bleu);
}


.peridot{
	font-family: "peridot-pe-variable", sans-serif;
    font-variation-settings: "ital" 0, "wdth" 80, "wght" 400;
}
.dorival{
	font-family: "dorival-ui-variable", sans-serif;
    font-variation-settings: "ital" 0, "wdth" 80, "wght" 400;
}

.peridot-compressed-black{
	font-family: "peridot-pe-variable", sans-serif;
    font-variation-settings: "ital" 0, "wdth" 50, "wght" 900;
	letter-spacing: 0;
}
.peridot-compressed-heavy{
	font-family: "peridot-pe-variable", sans-serif;
    font-variation-settings: "ital" 0, "wdth" 80, "wght" 950;
	letter-spacing: -0.05em;
}
.dorival-condensed-medium{
	font-family: "dorival-ui-variable", sans-serif;
    font-variation-settings: "ital" 0, "wdth" 80, "wght" 500;
	letter-spacing: -0.05em;
}

.font-light{
	font-variation-settings: "slnt" 0, "wdth" 80, "wght" 100;
}
.font-regular{
	font-variation-settings: "slnt" 0, "wdth" 80, "wght" 400;
}
.font-bold{
	font-variation-settings: "slnt" 0, "wdth" 80, "wght" 600;
}
.font-black{
	font-variation-settings: "slnt" 0, "wdth" 80, "wght" 950;
}

*{
    font-family: 'Montserrat', calibri, sans-serif;
}

body{
    margin: 0;
	margin-bottom: 100px;
	min-height: 100vh;
	position: relative;
}

main{
    &.main-30{
        margin: 10px 30vw;
    }
    &.main-20{
        margin: 10px 20vw;
    }
    &.main-10{
        margin: 10px 10vw;
    }
    &.main-5{
        margin: 10px 5vw;
    }
    &.main-center{
        margin: 10px auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
}

/* i{
    color: var(--violet);
} */

.vert{
    color: var(--vert) !important;
}
.rouge{
    color: var(--rouge) !important;
}

h1, h2, h3, h4, h5, h6, b{
    color: var(--gris1);
}

code, kbd{
    background-color: var(--gris2);
    border-radius: 4px;
    font-family: 'Courier New', Courier, monospace;
    padding: 2px;
	font-weight: 200;
}
pre{
    background-color: var(--gris2);
    font-family: 'Courier New', Courier, monospace;
    padding: 30px;
	font-weight: 200;
}

[title]{
    text-decoration: underline dotted;
    /* cursor: crosshair; */
}

header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10vw;
    background-color: var(--gris1);
	h2 a{
		color: var(--blanc) !important;
	}
    a{
        text-decoration: none;
        color: var(--blanc);
    }
    nav ul{
        display: flex;
        padding: 0;
        list-style: none;
        gap: 0 20px;
        li a{
            padding: 10px 20px;
            background-color: #00000055;
            transition: all 0.3s ease;
            color: var(--blanc);
			i{
				color: var(--blanc) !important;
			}
            &:hover{
                background-color: unset;
                color: var(--blanc) !important;
                i{
                    color: var(--blanc) !important;
                }
            }
        }
    }
}

div#top{
    padding: 20px 20vw;
    background-color: unset;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
	ul{
		padding: 0;
		list-style: none;
		gap: 0 20px;
	}
	li a{
		padding: 10px 20px;
		background-color: var(--gris1);
		transition: all 0.3s ease;
		color: var(--blanc);
		text-decoration: none;
		i{
			color: var(--blanc) !important;
		}
		&:hover{
			background-color: var(--gris2);
			color: var(--blanc) !important;
			i{
				color: var(--blanc) !important;
			}
		}
	}
}

menu{
    position: absolute;
	z-index: 999;
    width: fit-content;
    height: fit-content;
    background-color: var(--gris1);
    padding: 0;
    margin: 0;
    display: none;
    &.actif{
        display: block;
    }
    ul{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 10px;
        padding: 0;
        list-style: none;
        li a{
            display: block;
            padding: 0 20px;
            color: var(--noir);
            text-decoration: none;
        }
    }
}

.displayMenu:hover menu{
    display: block;
}

.msg{
    background-color: var(--gris2);
    padding: 10px 20px;
    list-style: none;
    width: 10%;
    border: var(--gris1) 1px solid;
    color: var(--noir);
    text-align: center;
    margin: auto;
    position: fixed;
    top: 100px;
    left: 45%;
    opacity: 1;
    transition: all ease-in-out 0.3s;
    &.fondu-msg{
        opacity: 0;
    }
}

.hide{
    display: none !important;
}

footer{
	width: 100%;
	margin-top: 70px;
	padding: 0;
	list-style: none;
	text-align: center;
	a{
		color: var(--violet) !important;
	}
}