<template>
	<div class="aida-404page">
		<div class="aida-404page-content">
			<h1 class="aida-404">404</h1>
			<p class="aida-text">NOT FOUND</p>
		</div>
	</div>
</template>

<script>
import { defineComponent,h,ref} from "vue";
export default defineComponent({
    data(){
        return{
           
        }
   },
   mounted(){
    
   },   
   methods:{
        
   }
})

</script>
<style scoped lang="less">
.aida-404page{
	height: 100vh;
	width: 100vw;
	position: relative;
	--upgradePageColor:#000;
	.aida-404page-content{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		.aida-404{
			font-size: 30vh;
			font-weight: bold;
			position: relative;
			line-height: 1;
			text-align: center;
			padding: 0;
			margin: 0;
		}
		.aida-404::after{
			content: '404';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			color: transparent;
			background: -webkit-repeating-linear-gradient(-45deg, #71b7e6, #69a6ce, #b98acc, #ee8176, #b98acc, #69a6ce, #9b59b6);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-size: 400%;
			text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.25);
			animation: animateTextBackground 10s ease-in-out infinite;
			@keyframes animateTextBackground {
				0%{
					background-position: 0 0;
				}
				25%{
					background-position: 100% 0;
				}
				50%{
					background-position: 100% 100%;
				}
				75%{
					background-position: 0 100%;
				}
				100%{
					background-position: 0 0;
				}
			}
		}
		.aida-text{
			color: #d6d6d6;
			font-size: 8vh;
			text-align: center;
			font-weight: bold;
			line-height: 10vh;
			max-width: 600px;
			position: relative;
		}
	}
	
}
</style>
