@charset "utf-8";

/* js */
#modal {
	width: 100%;
	height: 100%;
	visibility: hidden;
	position: fixed;
	top: 0; left: 0;
	z-index: 1000;
	background: rgba(0,0,0,.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity .1s ease-out, visibility .1s ease-out;
}
#modal-img {
	max-width: 90%;
	max-height: 90%;
	border: 5px solid #fefefe;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity .3s ease-out;
}
#modal.show {
	visibility: visible;
	opacity: 1;
	pointer-events: all;
}
#modal-img.show {
	opacity: 1;
}
/* end js */

#contents {
	width: 1050px;
	margin: 20px auto 30px;
	display: flex;
	justify-content: space-between;

	main {
		width: 780px;
		padding: 35px 20px 30px;
		position: relative;
		box-sizing: border-box;
		border-radius: 8px;
		overflow: hidden;
		background-color: rgb(255 255 255);


		a {
			&:link,
			&:visited,
			&:active {
				color: rgb(83 131 195);
				transition: none;
			}

			&:hover {
				text-decoration: underline;
				color: rgb(83 131 195 / .7);
			}
		}

		&::before {
			width: 780px;
			height: 3px;
			display: block;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgb(255 136 0);
		}

		> section {

			h2 {
				margin-bottom: 25px;
				padding-bottom: 15px;
				font-size: 23px;
				font-weight: bold;
				border-bottom: 2px solid rgb(51 51 51);

			}

			.quick-links {
				width: fit-content;
				height: 35px;
				display: block;
				margin: 5px 0 20px;
				line-height: 35px;
				padding: 0 20px;
				border-radius: 18px;
				font-weight: bold;
				color: rgb(255 255 255);
				background-color: rgb(255 136 0);
				transition: background-color .3s 0s;

				&:hover {
					text-decoration: none;
					background-color: rgb(255 136 0 / .8);
				}
			}

			> div {
				margin-bottom: 30px;

				p {
					line-height: 2;
				}
				
			}
			

			> section {
				margin-bottom: 50px;
				line-height: 2;

				h3 {
					height: 35px;
					margin-bottom: 25px;
					position: relative;
					padding-bottom: 5px;
					line-height: 48px;
					text-indent: 20px;
					font-size: 18px;
					font-weight: bold;
					border-bottom: 2px solid rgb(255 136 0);
					
					&::before,
					&::after {
						width: 10px;
						height: 9px;
						display: block;
						content: "";
						position: absolute;
						top: 0;
						left: 5px;
						transform: rotate(55deg);
						background-color: rgb(255 136 0);
					}

					&::before {
						width: 6px;
						height: 6px;
						top: 12px;
						left: 0;
						transform: rotate(15deg);
					}
				}

				a {
					margin: 0 3px;
				}

				ol {
					margin-left: 1.8em;
				}
				ol {
					counter-reset: item;
				}
				ol li::before {
					counter-increment: item;
					content: counter(item)".";
					margin-left: -1.5em;
					margin-right: .5em;
					font-weight: bold;
					color: rgb(85 85 85);
				}

				.image {
					max-width: 80%;
					height: auto;
					margin: 20px auto 40px;
					display: block;
					cursor: pointer;
					box-sizing: border-box;
					border: 5px solid rgb(254 254 254);
					box-shadow: 0 0 4px 0 rgb(204 204 204);
					outline: 1px solid rgb(204 204 204);
				}

				.circled-digits {
					width: 1.3em;
					height: 1.3em;
					margin: 0 3px;
					position: relative;
					top: -0.08em;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					line-height: 1;
					border-radius: 50%;
					vertical-align: middle;
					color: rgb(255 255 255);
					font-size: 0.9rem;
					padding-top: 2px;
					box-sizing: border-box;
				}
				.orange { background-color: rgb(255 136 0); }
				.blue { background-color: rgb(32 0 170); }
				.yellow { background-color: rgb(204 204 0); }
				.gray { background-color: rgb(150 150 150); }

				.red {
					padding: 0 3px;
					color: rgb(255 0 0);
				}

				.important {
					color: rgb(255 0 0);
					font-weight: bold;
				}


				&#notes,
				&#settings,
				&#changelog {
					
					li {
						line-height: 25px;
						margin-left: 1.5em;
						margin-bottom: 5px;
						position: relative;

						&::before {
							width: 5px;
							height: 5px;
							display: block;
							content: "";
							position: absolute;
							top: 9px;
							left: -1em;
							transform: rotate(45deg);
							background-color: rgb(255 136 0);
						}
					}
				}

				&#integration,
				&#integration2 {

					p, li {
						margin-bottom: 15px;
					}
				}

				&#settings {

					p {
						margin-bottom: 15px;
					}
				}

				&#download {

					> div {
						display: flex;
						justify-content: space-between;

						img {
							margin: 5px 0 0;
						}

						div {
							width: 382px;
							margin-top: 5px;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							border-radius: 8px;
							background-color: rgb(245 245 245);

							#download-link {
								width: 165px;
								height: 40px;
								display: inline-block;
								margin-bottom: 50px;
								padding-left: 35px;
								line-height: 43px;
								text-align: center;
								color: rgb(255 255 255);
								font-size: 16px;
								border-radius: 5px;
								box-shadow: 2px 2px 3px 0 rgb(204 204 204);
								background: rgb(0 187 0) url("/assets/images/download.png") no-repeat 35px center;
								transition: background-color 0.3s 0s;

								&:hover {
									text-decoration: none;
									background-color: rgb(0 204 0);
								}
							}

							dl {
								display: grid;
								grid-template-columns: 1fr 1fr;
								gap: 5px 10px;
								width: 100%;

								dt {
									grid-column: 1;
									text-align: right;
								}

								dd {
									grid-column: 2;
								}
							}
						}
					}
				}
			}

			> section:last-child {
				margin-bottom: 0;
			}
		}

	}

	aside {
		width: 250px;
		height: max-content;
		position: sticky;
		top: 65px;

		nav {
			margin-bottom: 20px;
			padding: 20px 0 10px;
			position: relative;
			border-radius: 8px;
			overflow: hidden;
			background-color: rgb(255 255 255);

			&::before {
				width: 250px;
				height: 3px;
				display: block;
				content: "";
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgb(255 136 0);
			}

			ul {
				padding: 0 20px;

				li {
					height: 40px;
					position: relative;

					a {
						height: 40px;
						padding-left: 20px;
						line-height: 40px;

						&::before {
							width: 6px;
							height: 6px;
							display: block;
							content: "";
							position: absolute;
							top: 13px;
							left: 0;
							transform: rotate(45deg);
							border-top: 3px solid rgb(255 136 0);
							border-right: 3px solid rgb(255 136 0);
						}

						&:hover::before {
							border-top-color: rgb(255 136 0 / .7);
							border-right-color: rgb(255 136 0 / .7);
						}
					}
				}
			}

			p {
				height: 40px;
				line-height: 40px;
				padding: 0 20px;

				a {
					display: block;
					position: relative;
					text-indent: 20px;
					
					&::before {
						width: 12px;
						height: 3px;
						display: block;
						content: "";
						position: absolute;
						top: 15px;
						left: 0;
						transform: skewX(-15deg);
						border-top: 2px solid rgb(255 136 0);
						border-bottom: 2px solid rgb(255 136 0);
					}

					&::after {
						width: 2px;
						height: 12px;
						display: block;
						content: "";
						position: absolute;
						top: 13px;
						left: 2px;
						transform: skewX(-15deg);
						border-left: 3px solid rgb(255 136 0);
						border-right: 3px solid rgb(255 136 0);
					}

					&:hover::before {
						border-top-color: rgb(255 136 0 / .7);
						border-bottom-color: rgb(255 136 0 / .7);
					}

					&:hover::after {
						border-left-color: rgb(255 136 0 / .7);
						border-right-color: rgb(255 136 0 / .7);
					}
				}
			}
		}

		#banners {

			ul {

				li {
					padding: 15px;
					border-radius: 8px;
					background-color: rgb(255 255 255);

					a {
						display: block;
					}

					a img:hover {
						opacity: .7;
						transition: opacity .3s 0s;
					}

					img {
						width: 100%;
						height: auto;
						margin-top: 5px;
						padding: 2px;
						box-sizing: border-box;
						border: 1px solid rgb(204 204 204);
					}
				}
			}
		}
	}
}