Homepage/css/main.less

@bg: #000;
@text: contrast(@bg);
@crimson-red: #e11;
@font-size: 16px;

html {
	background:
	linear-gradient(
		0deg,
		darken(@bg,10%),
		fade(darken(@bg,10%), 50%)),
	repeating-linear-gradient(
		45deg,
		darken(@crimson-red, 20%) 0% 2%,
		transparent 2% 4%
	),
	repeating-linear-gradient(
		-45deg,
		@bg 0% 2%,
		darken(@bg, 20%) 2% 4%
	);
	color: @text;
	font-size: @font-size;
	font-family: 'Oswald' ,sans-serif;
	scroll-behavior: smooth;
	body {
		margin: 0;
		.content {
			width: 100%;
			.head {
				width: 100%;
				margin-bottom: 20px;
				height: calc(100vh);
				position: relative;
				overflow: hidden;
				.slideshow {
					width: 100%;
					height: 100%;
					li {
						&:nth-child(1) span {
							background-image: url(../res/slideshow/1.jpg);
							animation-delay: 15s;
						}
						&:nth-child(2) span {
							background-image: url(../res/slideshow/2.jpg);
							animation-delay: 10s;
						}
						&:nth-child(3) span {
							background-image: url(../res/slideshow/3.jpg);
							animation-delay: 5s;
						}
						&:nth-child(4) span {
							background-image: url(../res/slideshow/4.jpg);
							opacity: 1;
							animation-delay: 0s;
						}
						&:nth-child(1) div {
							opacity: 1;
							animation-delay: 0s;
						}
						&:nth-child(2) div {
							animation-delay: 5s;
						}
						&:nth-child(3) div {
							animation-delay: 10s;
						}
						&:nth-child(4) div {
							animation-delay: 15s;
						}
						div {
							position: absolute;
							bottom: 0;
							right: 0;
							padding: 10px;
							z-index: 10;
							opacity: 0;
							animation-timing-function: ease-in-out; 
							animation: textslideshow 20s infinite;
						}
					}
					span {
						color: transparent;
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
						opacity: 0;
						background-size: cover;
						background-position: center;
						background-repeat: no-repeat;
						z-index: 5;
						animation: slideshow 20s infinite;
						animation-timing-function: ease-in-out; 
					}
				}
			}
			div.main {
				animation: none;
				background: fadeout(@bg,20%);
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				padding: 0;
				z-index: 6;
				opacity: 1;
				display: flex;
				text-align: center;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				img {
					animation-timing-function: ease-in-out; 
					animation: slide-in-top 1s;
					width: 50%;
				}
				p {
					font-size: 1.5em;
				}
			}
			.about {
				margin: 0 2.5%;
				padding: 10px 0;
				text-align: center;
				font-size: 2em;
				h3 {
					margin: 20px 0 5px 0;
				}
			}
		}
	}
	.footer {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: flex-start;
		width: 100%;
		overflow: hidden;
		background: @bg;
		border-top: contrast(@bg) 2px solid;
		margin: 10px 0;
		padding: 4px 10px 0px 10px;
		box-sizing: border-box;
		.column {
			&.header {
				justify-self: flex-start;
			}
			margin: 0 10px;
			min-width: 100px;
		}
	}
}

@media only screen and (max-width: 800px) {
	body {
		.footer {
			flex-direction: row;
			align-items: center;
			text-align: center;
			flex-wrap: wrap;
			padding: 0;
			.column {
				width: 50%;
				margin: 0;
				&.header {
					width: 100%;
				}
			}
		}
	}
}

h1, h2, h3, p {
	margin: 0;
}
a {
	color: contrast(@bg);
	transition: color 300ms;
	&:hover {
		color: @crimson-red;
	}
	&:not([href]) {
		color: average(contrast(@bg), @bg);
	}
}
ul {
	list-style-type: none;
	padding-inline-start: 0;
	padding-inline-end: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}
@keyframes slideshow { 
    0%,35%,100% { opacity: 0 }
    5%,25% { opacity: 1 }
}
@keyframes textslideshow { 
    10%,25% { transform: translateX(0px); opacity: 1 }
    30% { transform: translateX(-20px); opacity: 0 }
    100%,0% { transform: translateX(20px); opacity: 0 }
}
@keyframes blink { 
    0%,20%,70%,100% { color: @text }
    25%,50% { color: @crimson-red }
}
@keyframes slide-in-top { 
    0% { transform: translateY(-100px) }
    100% { transform: translateY(0px) }
}
.attention {
	animation: blink 5s infinite;
}
.hidden {
	display: none;
}