// out: false

body {
	#landing_page {
		main {
			padding: @big-gap @bigger-gap;

			section {
				& > span {
					&.characters {
						flex-direction: row;
						font-size: @small-fs;
					}
				}
			}
		}
	}

	#mobile_landing_page {
		main {
			section {
				& > span {
					&.characters {
						flex-direction: column;
						font-size: @xsmall-fs;
					}
				}
			}
		}
	}

	#landing_page,
	#mobile_landing_page {
		main {
			.data-info;
			border-radius: 5px;
			display: flex;
			flex-direction: column;
			gap: @big-gap;
			margin-bottom: 20px;
	
			h1.section-title {
				font-family: @dialogue-ff;
				font-size: @giant-fs;
				font-weight: 100;
				letter-spacing: 2px;
				text-align: center;
				margin-inline: auto;
			}

			a {
				color: @stardew-bg;
				text-decoration: underline;
				text-decoration-color: @stardew-bg;

				&:hover {
					cursor: @pointer;
					opacity: 0.7;
				}
			}

			code {
				.data-info;
				color: @auxiliary-fc;
			}

			section {
				& > span {
					display: flex;
					flex-direction: column;
					gap: @md-gap;

					&.characters {
						display: flex;
						gap: @big-gap;
						justify-content: space-evenly;
						margin-top: @big-gap;

						& > span {
							display: flex;
							gap: @big-gap;
							justify-content: flex-start;

							& > span {
								display: flex;
								flex-direction: column;
								justify-content: space-between;
							}
						}

						.character-image {
							width: @giant-icon;

							&.romain {
								aspect-ratio: 1/2.13;
							}

							&.nico {
								aspect-ratio: 1/1.99;
							}
						}

						.character-presentation {
							display: flex;
							flex-direction: column;
							gap: @md-gap;
							max-width: 450px;
						}

						.socials {
							display: flex;
							gap: @md-gap; 
							max-height: 28px;
							
							img {
								cursor: @pointer;
								width: @big-icon;
							}
						}
					}
				}

				&.about {
					display: flex;
					flex-direction: column;
				}
			}

			.section-title {
				font-weight: 600;
			}

			.img-embed {
				display: inline-block;
				height: @big-icon;
				margin-bottom: -@big-gap;
				position: relative;
				width: @big-icon;
				
				img {
					cursor: @pointer;
					margin-top: -(@big-gap - @md-gap);
					position: absolute;
					width: @big-icon;
				}
			}
		}
	}

	.loading {
		bottom: @md-gap;
		display: none;
		height: @giant-icon;
		left: @big-gap;
		position: fixed;
	}

	.error-wrapper {
		bottom: 0;
		left: 0;
		position: absolute;
		width: 100%;

		.dialogue-box-error-container {
			margin: 0 auto;
			position: relative; 
			width: fit-content;
			
			span {
				color: @dialogue-fc;
				font-family: @dialogue-ff;
				font-size: @giant-fs;
				left: @big-gap;
				letter-spacing: 2px;
				line-height: 1.4;
				padding: @small-gap;
				position: absolute;
				top: @big-gap;
				width: 57%;
			}
		}
	}
}