italia2024/libraries/hoverlin/demo.css

Italia 2024 assets

/** demo.css
***************************************/
.pg-sarapeji4ioa {
	position: relative;
	overflow: hidden;
}

.pg-sarapeji4ioa :is([href], [onclick]):is(:hover, :focus) {
	opacity: 1;
}

/* Conpornent
====================================== */
/* .button */
.magique .pg-sarapeji4ioa .button {
	min-width: unset;
	width: 30.8%;
	margin: 0.5em;
}

/* Icon（Material Symbols） */
[class^="sect-peji4ioA"] .icon {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 1.3em;
	height: 0;
	font-size: 1em;
  margin-left: 0.15em;
}

[class^="sect-peji4ioA"] .icon::before {
	position: relative;
	top: 1px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 0;
	height: 0;
	font-size: 130%;
	/* Material Symbols */
	font-family: 'Material Symbols Sharp';
	font-variation-settings:
		'FILL' 0,
		'wght' 300;
}

/* 対角線 */
.pg-sarapeji4ioa .is-dialine {
	position: relative;
}

.pg-sarapeji4ioa .is-dialine::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(to bottom right, transparent calc(50% - 1px), hsla(0, 0%, 84%, 0.5), transparent calc(50% + 1px)),
		linear-gradient(to top right, transparent calc(50% - 1px), hsla(0, 0%, 84%, 0.5), transparent calc(50% + 1px));
}

/* 中央線 */
.pg-sarapeji4ioa .is-midline {
	position: relative;
}

.pg-sarapeji4ioa .is-midline::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-image:
		linear-gradient(to right, transparent calc(50% - 1px), hsla(0, 0%, 84%, 0.15), transparent calc(50% + 1px)),
		linear-gradient(to bottom, transparent calc(50% - 1px), hsla(0, 0%, 84%, 0.15), transparent calc(50% + 1px));
}