/*スムーススクロール*/
@media (prefers-reduced-motion : no-preference) {
	main {
		scroll-behavior : smooth;
	}
}


/*通常モード時*/
@media (prefers-color-scheme : light) {
	:root {
		--codeblock-bgcolor : rgb(220,220,220);
		--codeblock-rowscolor : rgba(010,010,010,.3);
		--summary-bordercolor : rgb(75,150,125);
		--details-bgcolor : rgb(130,150,150);
	}
}

/*ダークモード時*/
@media (prefers-color-scheme : dark) {
	:root {
		--codeblock-bgcolor : rgb(030,030,030);
		--codeblock-rowscolor : rgba(200,200,200,.3);
		--summary-bordercolor : rgb(25,175,125);
		--details-bgcolor : rgb(50,65,65);
	}
}

	div.memo#title {
		display : grid;
		justify-items : center;
		align-items : center;
		width : 100%;
		margin : 20px auto;
		border-bottom : 1px solid #3c6690;
		overflow : hidden;
		font-size : x-large;
	}

	div.memo_title2 {
		width : 100%;
		margin : 20px auto;
		border-bottom : 1px solid #3c6690;
		overflow : hidden;
		font-size : x-large;
	}

	div.memo#contents {
		margin : 0 20px;
	}

	div.memo#table {
		display : grid;
		justify-items : center;
		align-items : center;
		width : 90%;
		min-width : 600px;
		margin : 20px auto;
		border : 1px solid #3c6690;
		overflow : hidden;
	}

	div.memo#table div {
		display : grid;
		align-items : center;
		width : 100%;
		height : 100%;
		border 0;
	}

	div.memo#table img {
		width : 100%;
		height : 100px;
		object-fit : scale-down;
	}

	div.memo#code {
		background-color : var(--codeblock-bgcolor);
		width : 90%;
		margin : 0 auto;
		padding : 5px;
		overflow-x : auto;
		white-space : pre;
	}
	div.memo#code span.rows {
		counter-increment : line-number;
		display : inline-block;
		margin-right : 5px;
		width : 2rem;
		background-color : var(--codeblock-rowscolor);
		text-align : center;
		position : sticky;
		left : 0;
	}
	div.memo#code span.rows:after {
		content : counter(line-number);
	}

	div.memo#code span.command {
		color : rgba(080,150,210);
	}
	div.memo#code span.command_orig {
		color : rgba(000,095,190);
	}
	div.memo#code span.comment {
		color : rgba(100,150,085);
	}
	div.memo#code span.preprocessor {
		color : rgba(200,130,180);
	}
	div.memo#code span.label {
		color : rgba(250,250,125);
	}
	div.memo#code span.str {
		color : rgba(200,145,120);
	}



details {
	interpolate-size : allow-keywords;
	margin : 0 auto;
	padding : 5px;
	width : 90%;

	&::details-content {
		transition : height .4s , opacity .4s , content-visibility .4s allow-discrete;
		height : 0;
		overflow : clip;
	}

	&[open]::details-content {
		height : auto;
	}
}


div.hr {
	border : 1px solid rgb(80,100,130);
}


img.memo {
	margin : 0 auto;
	width : 100%;
	max-width : 100%;
	max-height : 350px;
	object-fit : scale-down;
}


/*折りたたみ*/
summary {
	list-style-type : none;
	position : relative;
	padding : 8px 20px;
	border : 1px solid var(--summary-bordercolor);
	cursor : pointer;
	user-select : none;

	&:after {
		content : "";
		position : absolute;
		top : 0;
		bottom : 0;
		right : 15px;
		margin : auto;
		width : 8px;
		height : 8px;
		border-top : 1px solid var(--summary-bordercolor);
		border-right : 1px solid var(--summary-bordercolor);
		transform : rotate(45deg);
		transition : .25s ease-in-out;
	}
	details[open] &:after {
		transform : rotate(135deg);
		transition : .25s ease-in-out;
	}
}

details div.contents {
	background-color : var(--details-bgcolor);
	padding : 8px 20px;
	border : 1px solid var(--summary-bordercolor);
	border-top : none;
}

details div.contents div.hr {
	margin : 10px 0;
}