@font-face {
	font-family: 'montlight';
	src: url("../police/main/Montserrat-Light.ttf") /*domaine publique*/
}
* {
    margin: 0;
    padding: 0;
}
.avertissement {
    font-family: none;
    top: 0;
    position: fixed;
    background-color: black;
    height: 100%;
    width: 100%;
    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 3;
}
#avertissement-text {
    color: white;
}
#avertissement-understand {
    transition: all 2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.avertissement-understand {
    display: none;
    color: black;
    margin: 3% 0 0 5%;
}
.avertissement-understand-active {
    display: block;
    color: white;
    cursor: pointer;
    margin: 3% 0 0 5%;
}
.error {
    display: none;
    margin-left: 40%;
    width: 20%;
    padding: 7px;
    position: fixed;
    margin-top: 15vh;
    font-size: 75%;
    border-radius: 20px;
    border: 1px solid black;
    box-shadow: inset 0 0em 1.3em 0.5em rgb(186, 180, 0);
    z-index: 2;
}
#error-text {
    text-align: center;
    color: red;
    font-size: 1em;
}
input {
    border-radius: 20px;
    margin-bottom: 1%;
    padding: 1%;
    border: none;
    box-shadow: 0 9px 14px rgb(208, 208, 208);
}
.img1 {
    background-image: url('../img/gallery/IMG_20240204_021837.webp');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 100%;
    height: 100vh;
    position: absolute;
    z-index: 1;
}
.main {
    font-family: 'montlight';
    z-index: 2;
    position: relative;
    padding: 22.5vh 0 0vh 0;
    display: grid;
    place-content: center;
    grid-template-columns: 1fr 1fr;
    height: 50vh;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 15% , rgb(255, 255, 255) 16% , rgb(255, 255, 255) 53% , rgba(0, 0, 255, 0) 54%);
}
.main div {
    text-align: center;
    width: 25vw;
}
.main div:nth-child(2n-1) {
    margin-left: 24.9vw;
    margin-top: 0.8%;
} 
.line {
    margin: 2% 0% 2% 0;
    width: 25%;
    height: 1px;
    background-image: linear-gradient(90deg, rgba(0, 0, 255, 0) 0% , rgb(0, 0, 0) 50% , rgba(0, 0, 255, 0) 100%);
}
.one .line {
    margin: 3%;
}
.inbnt {
    display: grid;
    place-content: center;
    grid-template-columns: 1fr;
    z-index: 2;
    position: relative;
    justify-items: center;
}
.falsebtn {
    background-image: linear-gradient(0deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);
    width: 19vh;
    height: 6vh;
    margin-top: -0.2vh;
    border-radius: 20px;
    border: none;
    position: absolute;
    animation: 0.3s linear infinite color;
    z-index: 2;
}
@keyframes color {
    0% {background-image: linear-gradient(0deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
    10% {background-image: linear-gradient(36deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
    20% {background-image: linear-gradient(72deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
    30% {background-image: linear-gradient(108deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
    40% {background-image: linear-gradient(144deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
    50% {background-image: linear-gradient(180deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
    60% {background-image: linear-gradient(216deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
    70% {background-image: linear-gradient(252deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
    80% {background-image: linear-gradient(288deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
    90% {background-image: linear-gradient(324deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
    100% {background-image: linear-gradient(360deg, rgb(137, 253, 255) 0%, rgb(243, 133, 255) 100%);}
}
.backbnt {
    background-image: linear-gradient(-40deg, rgb(20, 177, 255) 20%, rgb(0, 255, 55) 50%, rgb(167, 92, 0) 80%);
    width: 19vh;
    height: 6vh;
    margin-top: -0.2vh;
    border-radius: 20px;
    border: none;
    z-index: 1;
}
.bnt {
    width: 18vh;
    height: 5vh;
    border-radius: 20px;
    margin-top: 2px;
    background-color: white;
    border: none;
    position: absolute;
    z-index: 1;
    transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275);    
}
.bnt:hover {
    width: 19vh;
    height: 6vh;
    margin-top: -0.2vh;
}