@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);
        }
        @font-face {
          font-family: Impact;
          src: url(../Fonts/impact.ttf);
        }
        :root {
            --background:#341f97;
            --background2:rgba(95, 40, 205, 1.0);
        }
		* {
			padding: 0;
			margin: 0;
			box-sizing: border-box;
            font-family: Montserrat;
		}
		html {
			height: 100%;
			width: 100%;
		}

			body {
				height: 100%;
				width: 100%;
				display: flex;
				flex-direction: column;
			}

				
            @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;
                }



    	#commonfooter {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    		width: 100%;
    		margin: auto auto 1.5em auto;
    	}
    		#commonfooter > div {
    			height: 50px;
    			width: 320px;
    			display: flex;
    			align-items: center;
    			justify-content: center;
    			text-align: center;
    			background: rgb(1 1 1 / 5%);
    			border: 1px solid rgb(255 255 255 / 30%);
    			color: white;
    		}
    		#commonfooter > a {
    			margin-top: 1em;
			    color: black;
			    text-decoration: none;
			    filter: grayscale(1);
			    font-size: 0.8em;
			    padding: 7px 10px;
			    background: #F2F2F2;
			    border-radius: 2em;
    		}



            @keyframes come_indic {
                0% {opacity: 0;transform: scale(1.25) translate(-50%, -50%); filter: blur(15px);}
                100% {opacity: 1;transform: scale(1) translate(-50%, -50%); filter: blur(0px);}
            }
        #indic {
            position: fixed;
            z-index: 3;
            top: 50%;
            left: 50%;
            transform-origin: center center;
            transform: translate(-50%, -50%);
            border-radius: 1em;
            padding: 2em;
            display: flex;
            flex-direction: column;
            background: rgb(1 1 1 / 90%);
            border: 1px solid rgb(255 255 255 / 10%);
            box-shadow: 0px 0px 0px 1000px rgb(1 1 1 / 80%);
            animation: come_indic 1s;
            transition: transform .35s, opacity .35s;
        }
            #indic > i {
                font-style: normal;
                font-size: 1.5em;
                margin-bottom: 0.75em;
                filter: brightness(2) drop-shadow(0px 0px 7px white);
            }
            #indic > span {
                display: flex;
                flex-direction: column;
                font-size: 0.75em;
            }
                #indic > span > b {
                    display: flex;
                    flex-direction: column;
                    font-weight: normal;
                    margin-bottom: 10px;
                    font-family: 'Montserrat';
                }
            #indic > button {
                display: block;
                margin: 1em 0 0 auto;
                color: black;
                padding: 0.65em 1em;
                border-radius: 1em;
                cursor: pointer;
            }


            @media (max-width: 480px) {
                #indic {
                    width: 80%;
                }
            }