style.scss

@import "./theme.scss";

body {
	* {
		box-sizing: border-box;
		color: $dark_1;
		line-height: 1.3em;
	}

	font-family: Lato,
	Arial,
	Helvetica,
	sans-serif;
	margin: 0;

	ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	a {
		color: $blue_2  !important;
		text-decoration: none;

		&:hover {
			color: $blue_3  !important;
		}
	}

	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;

	.thumb-placeholder {
		background-color: $light_0;
	}

	.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: 20px;

			.bullet {
				cursor: pointer;
				width: 12px;
				height: 12px;
				background-color: $medium_grey;
				border-radius: 100%;
				box-shadow: 0 0 3px black;

				&.active {
					background-color: $light_0;
				}
			}
		}

		.toggle-fullscreen-button {
			position: absolute;
			right: 15px;
			top: 15px;
			color: $light_1;
			font-weight: bold;
			background: none;
			border: none;
			cursor: pointer;
			transition: transform 0.1s;

			&.to-full {
				font-size: 20px;

				@media screen and (max-width:1000px) {
					display: none;
				}
			}

			&.to-small {
				font-size: 30px;
			}

			&:hover {
				color: white;

				&.to-small {
					transform: scale(0.7);
				}

				&.to-full {
					transform: scale(1.5);

				}
			}


		}

		&.fullscreen {
			position: fixed;
			z-index: 20;
			top: 0;
			right: 0;
			left: 0;
			height: 100vh !important;
		}

		@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: $wp_bin;
			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: $wp_bin;
			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;
		}

		@import "./homepage.scss";
		@import "./pages/education/education.scss";
		@import "./pages/games/games.scss";
		@import "./pages/software-development/software-development.scss";
		@import "./article-view.scss";
	}

	footer {
		@include flex-center-col;
		width: 100%;
		background-image: $wp_bin;
		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%;
			}
		}
	}
}