@font-face {
          font-family: Montserrat;
          src: url(../Fonts/Montserrat-Medium.ttf);
        }
        @font-face {
          font-family: pixy;
          src: url(../Fonts/PixelifySans-VariableFont_wght.ttf);
        }
        @font-face {
          font-family: Documan;
          src: url(../Fonts/DocumanSemiBold.otf);
        }
        :root {
            --background:#341f97;
            --background2:rgba(95, 40, 205, 1.0);
        }
		* {
			font-family: Montserrat;
		}

		body {

		}


        *::-webkit-scrollbar {
        	width: 5px;
        	height: 5px;
        	padding: 15px;
            background: rgba(1 1 1 / 10%);
        }
        *::-webkit-scrollbar-thumb {
        	width: 90%;
        	border-radius: 4px;
            background: rgba(95 40 205 / 90%);
        }

		.bloc_calculs {
			display: flex;
			flex-direction: column;
		}
		.inputs {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}
		.input-group {
			width: 32.1%;
			margin: 0% 0.5% 15px 0.5%;
		}
		.input {
		  /*max-width: 190px;*/
		  width: calc(100% - 2rem);
		  height: 44px;
		  background-color: rgba(1 1 1 / 40%);
		  color: white;
		  border-radius: .5rem;
		  padding: 0 1rem;
		  border: 2px solid transparent;
		  font-size: 1rem;
		  transition: border-color .3s cubic-bezier(.25,.01,.25,1) 0s, color .3s cubic-bezier(.25,.01,.25,1) 0s,background .2s cubic-bezier(.25,.01,.25,1) 0s;
		}

		.label {
			width: 100%;
			display: block;
			margin-bottom: .3rem;
			font-size: .9rem;
			font-weight: normal;
			color: white;
			transition: color .3s cubic-bezier(.25,.01,.25,1) 0s;
		}
			.right {
				text-align: right;
			}

		.input:hover, .input:focus, .input-group:hover .input {
		  outline: none;
		  border-color: #05060f;
		  background-color: rgba(255 255 255 / 100%);
		}

		.input:hover, .input:focus {
			color: black;
		}

		.input-group:hover .label, .input:focus {
		  font-weight: bold;
		  /*color: #05060fc2;*/
		}


		.input-group > select {
			appearance: none;
		    border: 0;
		    font: inherit;
		    width: -webkit-fill-available;
		    height: 48px;
		    padding: 0 4em 0 1em;
		    background: url(../img/bas.png) no-repeat right 0.8em center / 1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
		    color: white;
		    border-radius: 0.5rem;
		    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
		    cursor: pointer;
		    outline: none !important;
		}
		  .input-group > select > option {
		    color: white;
		    background-color: var(--background);
		    border: 0 !important;
		    outline: none !important;
		  }
			option:focus {
		   		background-color: var(--background);
				color: black;
			}



		.boutons {
			display: flex;
			justify-content: center;
			margin-top: 20px;
		}
			.boutons button {

			}

			.btn1 {
			 position: relative;
			 font-size: 17px;
			 text-decoration: none;
			 padding: 1em 2.5em;
			 display: inline-block;
			 border-radius: 6em;
			 transition: all .2s;
			 border: none;
			 font-family: inherit;
			 font-weight: 500;
			 color: black;
			 background-color: white;
			 cursor: pointer;
			 outline: none !important;
			}

			.btn1:hover {
			 transform: translateY(-3px);
			 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
			 outline: none !important;
			}

			.btn1:active {
			 transform: translateY(-1px);
			 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
			 outline: none !important;
			}

			.btn1::after {
			 content: "";
			 display: inline-block;
			 height: 100%;
			 width: 100%;
			 border-radius: 100px;
			 position: absolute;
			 top: 0;
			 left: 0;
			 z-index: -1;
			 transition: all .4s;
			 outline: none !important;
			}

			.btn1::after {
			 background-color: #fff;
			 outline: none !important;
			}

			.btn1:hover::after {
			 transform: scaleX(1.4) scaleY(1.6);
			 opacity: 0;
			 outline: none !important;
			}

			#resultat {
				display: flex;
				justify-content: center;
				align-items: center;
				color: white;
    			margin: 15px 0px 15px 0px;
    			font-size: 1.2em;
    			font-weight: bold;
    			text-align: center;
			}
				#resultat > i {
					font-weight: normal;
					margin: 0px 7px 0px 7px;
					font-size: 0.8em;
				}

			#description {
				display: flex;
			    flex-direction: column;
			    font-family: calibri;
			    color: white;
			    margin-top: 65px;
			    text-align: justify;
			    background: rgba(1 1 1 / 5%);
			    padding: 15px;
			    box-shadow: 0px 30px 20px -10px rgba(1 1 1 / 10%) inset;
			}
				#description > h2 {
					font-weight: bold;
					margin: 0px 0px 0px 0px;
					font-size: 1em;
			    	text-align: left;
				}
				#description > span {
					margin: 10px 0px 25px 0px;
					font-size: 12px;
				}
				#description  a {
					color: wheat;
	    			text-decoration: none;
				}

				
            @keyframes appear_up_notif {
                0% {opacity: 0;top:-50px;}
                100% {opacity: 1;top:0px;}
            }
            @keyframes disappear_up_notif {
                0% {opacity: 1;top:5px;}
                100% {opacity: 0;top:-30px;}
            }
                .notif {
                    position: absolute;
                    display: table;
                    left: 5px;
                    bottom: -50px;
                    opacity: 0;
                    border-radius: 3px;
                    padding: 10px;
                    font-size: 15px;
                    color: white;
                    background: #2c3e50;
                    text-transform: none;
                    z-index: 16;
                    animation: appear_up_notif .8s forwards, disappear_up_notif 1s 4s forwards;
                } 

        @keyframes grass_move {
        	0% {background-position: 0% 100%;}
        	100% {background-position: 100% 100%;}
        }

        #affiche_mal {
        	z-index: 10;
        	display: flex;
        	flex-direction: column;
        	align-items: center;
        	justify-content: center;
        	color: white;
        	background: var(--background) url(../img/tuile.png) 100% 100% repeat-x;
        	position: absolute;
        	top: 0;
        	left: 0;
        	opacity: 0;
        	transition: opacity .5s;
        	width: 100vw;
        	height: 100vh;
            animation: grass_move 10s forwards infinite linear;
        }
        	#affiche_mal > img{
			    margin-bottom: 50px;
    			height: 50px;
        	}

        	#affiche_mal > span{
        		text-align: center;
        		width: 80%;
        	}

        	#affiche_mal > button{
        		padding: 15px;
			    border-radius: 10px;
			    background: white;
			    color: var(--background);
			    margin-top: 25px;
			    font-weight: bold;
			    cursor: pointer;
			    font-family: pixy;
			    font-size: 1.5em;
			    width: 200px;
    			clip-path: polygon(0px calc(100% - 24px), 4px calc(100% - 24px), 4px calc(100% - 16px), 8px calc(100% - 16px), 8px calc(100% - 12px), 12px calc(100% - 12px), 12px calc(100% - 8px), 16px calc(100% - 8px), 16px calc(100% - 4px), 24px calc(100% - 4px), 24px 100%, calc(100% - 24px) 100%, calc(100% - 24px) calc(100% - 4px), calc(100% - 16px) calc(100% - 4px), calc(100% - 16px) calc(100% - 8px), calc(100% - 12px) calc(100% - 8px), calc(100% - 12px) calc(100% - 12px), calc(100% - 8px) calc(100% - 12px), calc(100% - 8px) calc(100% - 16px), calc(100% - 4px) calc(100% - 16px), calc(100% - 4px) calc(100% - 24px), 100% calc(100% - 24px), 100% 24px, calc(100% - 4px) 24px, calc(100% - 4px) 16px, calc(100% - 8px) 16px, calc(100% - 8px) 12px, calc(100% - 12px) 12px, calc(100% - 12px) 8px, calc(100% - 16px) 8px, calc(100% - 16px) 4px, calc(100% - 24px) 4px, calc(100% - 24px) 0px, 24px 0px, 24px 4px, 16px 4px, 16px 8px, 12px 8px, 12px 12px, 8px 12px, 8px 16px, 4px 16px, 4px 24px, 0px 24px);
        	}

        @media (max-width: 480px) {
        	body {
        		padding-top: 1em;
        	}
        	.label {
        		color: rgb(255 255 255 / 70%);
        	}
        	.inputs {
        		flex-direction: column;
        	}
        	.input-group {
        		width: -webkit-fill-available;
        		margin: 0% 0.5% 15px 0.5%;
        	}
        	.input {
    			max-width: 100%;
    			width: inherit;
    		}
			#resultat {
    			font-size: 1em;
			}
        }