/* GENERAL SCAN */
#generalScan {
    /* Fill the card */
    position: relative;
    width: 100%;
    height: 100%;
    /* Center the scan */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* FINGERPRINT AND SCAN */
/* Gray fingerprint (not scanned) */
.fingerprint {
    /* Image */
	position: relative;
	width: 210px;
	height: 266px;
	background: url("../img/fingerprint1.png");
	background-size: 210px;
}

/* Blue fingerprint (scanned) */
.fingerprint::before {
    /* Image */
	width: 100%;
	height: 100%;
	background: url("../img/fingerprint2.png");
	background-size: 210px;
    /* Position */
    top: 0;
	left: 0;
    /* Extra details */
    content: '';
	position: absolute;
	animation: animateFingerprint 4s ease-in-out infinite; /* Repeat animation with a slow start and slow end (4 seconds), all the time */
}

/* Blue scan line (drawn with CSS) */
.fingerprint::after {
    /* Drawing */
    width: 100%;
	height: 6px;
    border-radius: 4px;
	background: #00FFFF;
    background-size: 210px;
    filter: drop-shadow(0 0 14px #00FFFF) drop-shadow(0 0 42px #00FFFF); /* Glowing effect */
    box-shadow: 0 0 17px #000000;
    /* Position */
    top: 3%;
	left: 0;
    /* Extra details */
    content: '';
    position: absolute;
	animation: animateScanLine 4s ease-in-out infinite; /* Repeat animation with a slow start and slow end (4 seconds), all the time */
}

/* Scanning text */
.scanningText {
    /* Text properties */
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 30px;
	letter-spacing: 5px;
    color: #00FFFF;
    /* Extra details */
	margin-top: 25px;
	opacity: 0;
	filter: drop-shadow(0 0 14px #00FFFF) drop-shadow(0 0 42px #00FFFF);
	animation: animateText 0.6s steps(1) infinite; /* Repeat animation (0.6 seconds), with only 1 step (less smooth and less continuous on purpose), all the time */
}

/* ANIMATIONS */
/* Fingerprint image animation, appear and disappear from top to bottom */
@keyframes animateFingerprint {
	0%, 100% {
		height: 0;
	}
	50% {
		height: 100%;
	}
}

/* Scan line animation, move from top to bottom */
@keyframes animateScanLine {
	0%, 100% {
		top: 3%;
	}
	50% {
		top: 97%;
	}
}

/* Text animation, appear and disappear */
@keyframes animateText {
	0%, 100% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
}