style.scss

@import "./theme.scss";

body {
	* {
		box-sizing: border-box;
		color: $dark_1;
		line-height: 1.3em;
	}
	font-family: Arial, Helvetica, sans-serif;
	margin: 0;
	ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	a {
		color: $blue_2;
		text-decoration: none;
		&:hover {
			color: $blue_3;
		}
	}

	blue {
		color: $blue_2;
	}
	red {
		color: $red_1;
	}
	green {
		color: $kaki;
	}
	emoji {
		font-style: initial;
		font-size: 25px;
	}

	.bg-blue {
		background-color: $blue_2;
		color: white;
	}

	.bg-dark {
		background-color: $dark_2;
		color: $light_2;
	}

	#seo-title {
		visibility: hidden;
	}

	img.pixelated {
		image-rendering: pixelated;
		image-rendering: -moz-crisp-edges;
		image-rendering: crisp-edges;
	}
}

main {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100vh;

	.warning-banner {
		background: url("/assets/images/wallpaper_warning.svg");
		width: 100%;
		height: 40px;
		padding: 20px 10%;
		@include flex-center;
		strong {
			font-size: 18px;
			color: $blue_1;
		}
	}

	.image-carousel {
		overflow: hidden;
		@include flex-center;
		background-color: black;
		position: relative;
		img {
			position: absolute;
			object-fit: contain;
			height: 80%;
			max-width: 100%;
		}
		.carousel-bullets {
			position: absolute;
			bottom: 0;
			padding: 20px;
			display: flex;
			gap: 10px;
			.bullet {
				cursor: pointer;
				width: 8px;
				height: 8px;
				background-color: $medium_grey;
				border-radius: 100%;
				box-shadow: 0 0 3px black;
				&.active {
					background-color: $light_0;
				}
			}
		}
		@media screen and (max-width: $screen_l) {
			.carousel-bullets {
				gap: 30px;
				.bullet {
					width: 12px;
					height: 12px;
				}
			}
		}
	}

	header {
		width: 100%;
		background-color: white;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		z-index: 10;
		nav {
			display: flex;
			align-items: center;
			height: $navbar_height;
			.home {
				margin: 0 10px;
				a {
					display: flex;
					align-items: center;
					gap: 10px;
					img {
						height: 40px;
						width: auto;
					}
					img.logo-text {
						width: 120px;
						height: auto;
					}
				}
			}
			ul {
				display: flex;
				padding: 0;
				margin: 0;
				list-style-type: none;
				height: 100%;
				flex: 1;
				li {
					position: relative;
					a {
						display: flex;
						align-items: center;
						height: 100%;
						padding: 10px 20px;
						color: $light_1;
						font-weight: 800;
						text-decoration: none;
					}

					.submenu {
						visibility: hidden;
						overflow: hidden;
						position: absolute;
						height: auto;
						max-height: 0;
						transition: max-height 0.6s;
						top: 100%;
						left: 50%;
						flex-direction: column;
						background-color: white;
						white-space: nowrap;
					}
					&.active {
						a {
							color: $dark_2;
							border-bottom: 3px solid;
						}
					}
					&:hover {
						a {
							color: $dark_2;
						}

						.submenu {
							visibility: unset;
							max-height: 1000px;
							a {
								color: $light_1;
								border: none;
							}
							li {
								&:hover {
									a {
										color: $dark_2;
									}
								}
							}
						}
					}
					&.lang-flags {
						display: flex;
						align-items: center;
						gap: 10px;
						margin-left: auto;
						padding: 0 20px;
						img {
							width: 35px;
							height: 30px;
							cursor: pointer;
							opacity: 0.5;
							&.selected,
							&:hover {
								opacity: 1;
							}
						}
					}
				}
			}
			.burger {
				display: none;
			}
			@media screen and (max-width: $screen_s) {
				justify-content: space-between;
				.burger {
					@include flex-center-col;
					font-weight: bold;
					border: 1px solid;
					margin: 0 20px;
					cursor: pointer;
					border-radius: 100%;
					width: 35px;
					height: 35px;
					color: $dark_3;
					font-size: 25px;
				}
				ul {
					display: none;
					&.responsive-show {
						display: flex;
						flex-direction: column;
						position: absolute;
						right: 0;
						max-width: 100vw;
						min-width: 50vw;
						top: $navbar_height;
						background-color: white;
						box-shadow: 0 4px 6px 2px #0000000a;
						height: unset;
						li {
							&.active {
								a {
									border: none;
								}
							}
							.submenu {
								display: flex;
								visibility: visible;
								position: relative;
								height: unset;
								max-height: unset;
								transition: max-height 0.6s;
								top: unset;
								left: unset;
								li {
									a {
										font-weight: 400;
										font-size: 14px;
										color: $light_1;
									}
								}
								margin-left: 20px;
							}
							&.lang-flags {
								margin-left: unset;
								justify-content: space-around;
								padding: 20px;
							}
						}
					}
				}
			}
		}
	}
	#page-container {
		width: 100%;
		flex: 1;
		.page-header {
			background-image: url("/assets/images/wallpaper_binary.png");
			padding: 50px 0;
			h1 {
				padding: 15px 40px 0;
				font-size: 25px;
				color: $blue_2;
				margin: 0 auto;
			}
			p {
				color: $blue_3;
				* {
					color: $blue_3;
				}
				font-style: italic;
				padding: 15px 40px 15px 100px;
				margin: 0 auto;
				font-size: 18px;
			}
			.big-logo {
				@include flex-center;
				gap: 20px;
				padding: 20px;
				img {
					width: 200px;
					max-width: 100%;
					&.logo-text {
						width: 300px;
						max-width: 100%;
					}
				}
			}
			.logo {
				padding-left: 30px;
				@include flex-center;
				img {
					width: 100%;
				}
			}
			@media screen and (max-width: $screen_s) {
				h1 {
					padding: 15px 20px 0;
				}
				p {
					padding: 20px 20px 30px 40px;
					text-align: justify;
				}
				.big-logo {
					flex-direction: column;
				}
			}
			&.logo-left {
				.grid-wrapper {
					h1 {
						width: 100%;
					}
					display: grid;
					grid-template-columns: 120px 1fr;
					grid-template-rows: auto 1fr;
					.logo {
						grid-column: 1;
						grid-row: 1;
						width: 100%;
					}
					p {
						margin: 0;
						grid-column: 1 / span 2;
					}
				}
				@media screen and (max-width: $screen_m) {
					.grid-wrapper {
						h1 {
							padding: 0 20px;
						}
						.logo {
							padding: 0 20px;
						}
					}
				}
			}
		}
		.page-philo {
			background-image: url("/assets/images/wallpaper_binary.png");
			padding: 120px 30px;
			p {
				width: 100%;
				max-width: 600px;
				font-size: 18px;
				color: $light_2;
				* {
					color: $light_2;
				}
				text-align: center;
				font-style: italic;
				font-weight: bold;
			}
		}
		.page-contents-center {
			@include page-contents-center;
		}
		h2.page-section-title {
			color: $blue_2;
			padding: 20px 0 10px;
			@include page-contents-center;
		}

		.article-details {
			grid-column: 1 / span 2;
			h2 {
				color: $medium_grey;
				margin: 0 10px;
				padding: 10px 0 0;
				font-size: 16px;
			}
			ul.details-list {
				margin: 10px;
				.detail {
					display: grid;
					grid-template-columns: 1fr auto;
					gap: 20px;
					font-size: 12px;
					border-bottom: 1px solid $light_0;
					padding: 5px 0;
					label {
						font-weight: bold;
						color: $medium_grey;
						white-space: nowrap;
					}
					.detail-value {
						text-align: right;
					}
				}
			}
		}

		@import "./homepage.scss";
		@import "./pages/education/education.scss";
		@import "./pages/games/games.scss";
		@import "./pages/software-development/software-development.scss";
	}
	footer {
		@include flex-center-col;
		width: 100%;
		background-image: url("/assets/images/wallpaper_binary.png");
		padding: 40px 20px;
		gap: 20px;
		font-size: 12px;
		span {
			color: $light_1;
			text-align: center;
		}
		.logo {
			@include flex-center;
			gap: 10px;
			img {
				width: 35px;
				&.text-logo {
					width: 100px;
				}
			}
		}
		.social {
			@include flex-center;
			gap: 20px;
			a {
				background-color: $dark_3;
				@include flex-center;
				width: 25px;
				height: 25px;
				font-weight: bold;
				font-size: 16px;
				border-radius: 100%;
			}
		}
	}
}