/*Styles für Astronautilia Digital*/
:root {
	--whitesmoke: #f5f5f5;
	--black: #000000;
	--black-light: #1e1e1e;
	--gray: #777777;
	--gray-light: #cccccc;
	--teal: #2c6e71;
	--teal-light: #00b3b3;
	--olive: #6c7a0b;
	--slateblue: #5d5d8b;
	--slateblue-light: #B6B6DD;
	--lightsteelblue: #cbd7ff;
	--gainsboro: #eaeaea;
	--blue: #5aaafa;
	--blue-gray: #4b7ea8;

	--lavender-transparent: rgba(210, 198, 220, 0.35);

	--beige: #DCCBBF;
	--mint: #C8DDD1;
	--lavender: #D2C6DC;
	--gray-fadeout: linear-gradient(to right, #d3d3d3 0%, #d3d3d3 10%, transparent 100%); /*light gray; nicht durchgehend, muss ausfaden*/

	--btn-bg: var(--black-light);
	--btn-bg-hover: var(--slateblue);
	--btn-bg-active: var(--slateblue-light);
	--btn-color: var(--whitesmoke);
	--btn-border: var(--lightsteelblue);

	--aside-width: 16.666666vw; /* = 100 vw / 6 */
	--line-label-width: 40px;





	--font-sans: "Helvetica Neue", Arial, sans-serif;
	--bg-page: #f5f5f5;
	--bg-card: #fafafa;
	--clr-primary: #2c3e50;
	--clr-accent: #e74c3c;
	--clr-muted: #7f8c8d;

}


/*...........................*/
/*Ebenen (z-index) = bg (-2) > img (-1) > text (1)*/
/*...........................*/
/* ------------------------ Grundlayout ------------------------ */
html,
body {
	height: 100%;
	margin: 0;
	color: var(--black-light);
	font-family: "Roboto", "Helvetica", "Arial", sans-serif;
	font-size: clamp(12px, calc(0.8rem + 0.25vw), 16px);
	line-height: 1.25;
}

.page {
	display: grid;
	grid-template-columns: var(--aside-width) 1fr;
	height: 100vh;
	position: relative; /* für ::before / ::after */
}
/*Hintergrundebene 1: Farbgradient*/
.page::before {
	content: "";
	position: absolute;
	inset: 0;
	background: 
	/*Prozentwert = Endpunkt dieser Farbe*/ 
radial-gradient(
ellipse at 0% 0%, /* Mittelpunkt = links‑oben, Form = Ellipse */ 
var(--black) 10%, 
var(--black-light) 30%, 
var(--slateblue) 60%, 
var(--teal) 80%, 
var(--teal-light) 100%)
	;
	background-size: 100% 100vh;
	background-repeat: no-repeat;
	z-index: -2;
}
/*Hintergrundebene 2: Hintergrundbild (Starry Night Sky)*/
.page::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: url("media/jeremy-perkins-uhjiu8FjnsQ-unsplash_1920-1247.webp");
	background-repeat: no-repeat;
	background-size: 100% 100vh;
	opacity: 0.5;
	/*opacity: 0.4;*/
}
/* ------------------------ aside ------------------------ */
.aside {
	width: 100%;
	display: flex;
	flex-direction: column;
	color: var(--whitesmoke);
	overflow: hidden;
	background: transparent;

}
.aside > * {
	z-index: 1;
}

.icon {
	flex: 0 1 auto;
	width: clamp(40px, 8vw, 90px);
	height: clamp(40px, 8vw, 90px);
	min-width: 0;
	margin: 0 15px 0 10px;
	background-image: url("media/graham-holtshausen-fUnfEz3VLv4-unsplash_1920-1281_quadrat2.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	border-radius: 12px; /* runde Ecken */
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* dezentter Grundschatten */
	transition: transform .2s ease, 
box-shadow .2s ease, 
filter .2s ease;
}

.title {
	flex: 1 1 0;
	min-width: 0;
	font-size: 2rem;
}

.toc {
	flex: 1;
	overflow-y: auto;
	padding: 1rem 0.5rem 0.5rem 1rem;
}
.toc ul {
	list-style: none;
	padding-left: 1rem;
}
.toc li {
	margin: 4px 0;
}
.toc li.tocSub {
	/*font-size: clamp(10px, calc(0.7rem + 0.2vw), 14px);*/
	font-size: clamp(9px, calc(0.65rem + 0.2vw), 13px);
}


/* ------------------------ Header (über die ganze Breite) ------------------------ */
.headerWrapper {
	grid-column: 1/-1;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	color: var(--whitesmoke);
	background: transparent;
	position: sticky;
	top: 0;
	padding: 10px 0 5px 0;

}

.headerWrapper > * {
	z-index: 1;
}
.titleWrapper {
	width: var(--aside-width); /* 1 / 6 der .headerWrapper‑Breite; in var berechnen, weil in .subHeaderWrapper nochmal benötigt */
	display: flex;
	align-items: center;
	min-width: 0;
}
.subHeaderWrapper {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	/*damit die Inhalte mittig zur Gesamtseite sind, nicht mittig zu den rechten 5/6*/
	/*transform: translateX(calc(-0.5 * var(--aside-width)));*/
	align-items: center;
}

.header {
	/*padding: 0 20%;*/
	text-align: center;
	font-size: 1.5rem;
}
.header1,
.nextPrev {
	display: inline-block;
	padding: 0 0.5rem;
}

.nextPrev a {
	color: var(--lightsteelblue);
	text-decoration:none;
}
.nextPrev.hidden a {
	opacity: 0.4;
	pointer-events: none;
	
}
.navWrapper {
	display: grid;
	/*grid-template-columns: repeat(3, 1fr);*/
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
	margin-top: 8px;
}
.navWrapper > * {
	text-align: center;
	padding: 4px 0;
}

/* ------------------------ Content Wrapper ------------------------ */
.contentWrapper {
	display: grid;
	grid-template-rows: 1fr auto;
	overflow: hidden;
	z-index: 1;
}

.textWrapper {
	display: grid;
	/*grid-template-columns: 6fr 1fr;*/
	grid-template-columns: 5.7fr 1.3fr;
	gap: 8px;
	overflow: hidden;
	background: var(--whitesmoke);
	box-shadow: 
	inset 0 8px 16px -8px rgba(0, 0, 0, 0.8), 
inset 0 -8px 16px -8px rgba(0, 0, 0, 0.8);
	height: 100%;
	position: relative;  /*Damit editionImg ausgerichtet werden kann*/
}
.main {
	padding: 0 20%;
	overflow-y: auto;
	background: var(--whitesmoke);
	color: var(--black-light);
	margin: 1rem 0 1rem 1rem;
}

.main > div {
	padding-top: 2.5rem;
}

.editionImg {
	position: absolute;               
    top: 177px;                           
    left: 1%;                        
    width: 14%;                      
    height: auto;
}
/* ------------------------ Footer ------------------------ */
.footer {
	text-align: center;
	background: var(--whitesmoke);
	color: var(--black-light);
	padding: 8px;
	font-size: 0.8rem;
	font-style: italic;
}

/* ------------------------ Links ------------------------ */
a {
	color: var(--blue-gray);
	text-decoration: underline;
	/*text-decoration: none;*/
}

.toc a {
	color: inherit;
	text-decoration: none;
}
.toc a:hover {
	color: var(--lightsteelblue);
}
.breadcrumbs a {
	color: var(--lightsteelblue);
	text-decoration: underline;
	/*text-decoration: none;*/
}
.vNum a,
.fn .label a {
	display: inline-block;
	font-weight: bold;
	padding: 0 10px 0 0;
	text-decoration: none;
}
.rsBibl a {
	color: inherit;
	background-color: inherit;
	cursor: pointer;
	text-decoration: underline dotted;
}

/*Links in Aside und Header vergrößern beim Hovern*/
.aside a,
.headerWrapper a {
	display: inline-block;
}
.aside a:hover,
.headerWrapper a:hover,
.tab:hover {
	transform: scale(1.05);

}



/* --------------------  Buttons  -------------------- */
.tab {
	font-family: inherit;
	font-size: 1rem;
	padding: 0.1rem 0.1rem;
	margin: 0 0.1rem;
	width: 35px;
	background: transparent;
	color: var(--btn-color);
	border: 1px solid var(--btn-border);
	border-radius: .4rem;
	cursor: pointer;
	transition: background .2s ease, 
color .2s ease, 
transform .1s ease;
}

/* Hover‑ und Fokus‑Zustand */
.tab:hover,
.tab:focus-visible {

}

/* Aktiver (gedrückter) Zustand */
.tab:active {
	background: var(--btn-bg‑active);

}

/* Fokus‑Ring – wichtig für Barrierefreiheit */
.tab:focus-visible {
	outline: 2px dashed var(--btn-bg‑active);
	outline-offset: 2px;
}


/* ------------------------ Strukturen ------------------------ */
h1 {
	color: var(--slateblue);
	display: block;
	border-bottom: solid 1px var(--slateblue);
	font-size: 1.5rem;
}
h2 {
	color: var(--slateblue);
	display: block;
	font-size: 1.2rem;
}
/*bislang nur "Fußnoten" in About*/
h2.subHeading {
	color: var(--slateblue);
	display: block;
	font-size: 1rem;
	font-weight: normal;
}
h3 {
	color: var(--slateblue);
	display: block;
	font-size: 1rem;
	font-style: italic;
}
.heading {
	display: block;
	font-style: italic;
	font-weight: bold;
}
hr {
	width: 70vh;
	height: 1px;
	background-color: var(--slateblue);
	border: none;
	margin-left: 0;
	margin-right: auto;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

/*dl als Grid (in Überlieferung und Back-Lists)*/
#d-introduction dl,
#d-indices dl,
#d-sourceDesc dl {
	display: grid;
	grid-template-columns: 11em auto;
}
#d-metrics dl {
	display: grid;
	grid-template-columns: 14em auto;
}

#d-introduction dt,
#d-introduction dd,
#d-indices dt,
#d-indices dd,
#d-metrics dt,
#d-metrics dd,
#d-sourceDesc dt,
#d-sourceDesc dd {
	padding: 3px 0 3px 0;
	margin: 0;
}
#d-introduction dd > span,
#d-indices dd > span {
	display: block;
}

/*Copy-Link Icon*/
h1 .copyDivLink::after {
	opacity: 0.2;
	vertical-align: super;
	font-size: 1.2rem;
	margin-left: 0.3rem;
	cursor: alias;
	content: "🔗\FE0E";
}
h1:hover .copyDivLink:after {
	opacity: 1;
}

.metTeilHead {
	margin-top: 0.5rem;
}
.metTeilHead:nth-of-type(1) {
	margin-top: 0;
}



/* ------------------------ Toggle ------------------------ */


.toggle {
	font-size: 0.9rem;
	line-height: 1.4;
	overflow-y: auto;
	padding: 1rem 0.2rem 0.5rem 0.2rem;
	background: var(--whitesmoke);
	color: var(--black-light);
	margin: 1.5rem 0 1rem 0;
}
.toggle > ul {
	list-style: none;
	margin: 1rem 0 0 0;
	padding: 0;
}
.toggle > ul > li > ul {
	list-style: none;
	margin: 0 0 0 3.5rem;
	padding: 0;
}
.toggle > ul > li {
	margin: 5px 0;
	font-weight: bold;
}
.toggle > ul > li > ul > li {
	margin: 5px 0;
	font-weight: normal;
}
.toggleTitle {
	display: block;
	font-weight: bold;
	color: var(--slateblue);
	font-size: 1rem;
}

.switch {
	position: sticky;
	width: auto;
	height: 18px;
	padding-left: 34px;
	margin-top: 4px;
	margin-bottom: 4px;
	display: inline-block;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 32px;
	background-color: #ccc;
	-webkit-transition: .2s;
	transition: .2s;
	border: solid 0.02px #06443682;
}

.slider:before {
	position: absolute;
	content: "";
	height: 14px;
	width: 14px;
	left: 3px;
	/*bottom: 3px;*/
	background-color: white;
	-webkit-transition: .2s;
	transition: .4s;
}

input:checked + .slider {
	background-color: var(--slateblue);
}

input:focus + .slider {
	box-shadow: 0 0 1px var(--slateblue);
}

input:checked + .slider:before {
	-webkit-transform: translateX(12px);
	-ms-transform: translateX(12px);
	transform: translateX(12px);
}

.slider.round {
	border-radius: 9px;
}

.slider.round:before {
	border-radius: 50%;
}




/*unset cursor bei Beispielfarben im Togglemenü (da kein Mouseover existiert)*/
/*important, damit die unteren Regeln überschrieben werden*/
/*andere Klasse als Auszeichnung im Text, um es fürs Togglen einfach zu halten*/
.monosyllabumVorschau,
.spondaicVorschau,
.neologismVorschau,
.versusTetracoliVorschau {
	cursor: text !important;
}
.rsVorschau {
	text-decoration: underline dotted !important;
}

.neologism.togglable.isDisabled,
.monosyllabum.togglable.isDisabled,
.spondaic.togglable.isDisabled {
	color: inherit;
	background-color: inherit;
	cursor: text;
	text-decoration: none;

}

/*Entitäten Edition; Toggle EIN*/
.neologism.togglable.isHighlighted,
.neologismVorschau {
	background-color: var(--lavender);
	cursor: help;
}
.spondaic.togglable.isHighlighted,
.spondaicVorschau {
	background-color: var(--beige);
	cursor: help;
}
.monosyllabum.togglable.isHighlighted,
.monosyllabumVorschau {
	background-color: var(--mint);
	cursor: help;
}
.versusTetracoli.togglable.isHighlighted,
.versusTetracoliVorschau {
	font-size: 0.7rem;
	vertical-align: super;
	cursor: help;
	display: inline-block;
}
.versusTetracoli.togglable.isDisabled {
	display: none;
}
/*Indexreferenzen in Edition; Toggle AUS*/
.rs.togglable.isDisabled a {
	color: inherit;
	background-color: inherit;
	cursor: text;
	text-decoration: none;
	pointer-events: none;
}

/*Indexreferenzen in Edition; Toggle EIN*/
.rs.togglable.isHighlighted a,
.rsVorschau,
.rs a {
	color: inherit;
	background-color: inherit;
	cursor: pointer;
	text-decoration: underline dotted;
	pointer-events: visible;
}

.app.togglable.isDisabled,
.orig.togglable.isDisabled,
.normTrans.togglable.isDisabled,
.metrics.togglable.isDisabled {
	display: none;
}
.togglable.metrics {
	display: inline-block;
	color: var(--gray);
	padding-left: 2em;
	letter-spacing: 2px;
}
.togglable.metricsVorschau {
	/*display: inline-block;*/
	color: var(--gray);
	/*padding-left: 2em;*/
	/*letter-spacing: 2px;*/
}


/*Popup Zitierlink*/
#copyToast {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 10px 16px;
	background: rgba(40, 40, 40, 0.9);
	color: white;
	border-radius: 6px;
	font-size: 14px;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
	z-index: 9999;
}

#copyToast.show {
	opacity: 1;
}


/* ------------------------ Verse ------------------------ */
.lg,
.opener,
.closer {
	display: block;
}
.footnotes ul {
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.l,
.fn {
	display: block;
	margin-bottom: 1rem;
}
.l > *,
.fn > * {
	display: block;
}

/* Erstes Kind (span) hinter Verszahl als block */
.l > *:nth-child(2),
.fn > *:nth-child(2) {
	padding-left: unset;
	margin-left: var(--line-label-width);
}
.l .copyVerseLink,
.fn .label {
	float: left;
	width: var(--line-label-width);
	font-size: 1rem;
}
/*Fußnoten in about etwas kleiner setzen*/
#d-about .fn > * {
	font-size: 0.8rem;
}
.l:hover .copyVerseLink {
	background-color: var(--lavender-transparent);
	cursor: alias;
}
.l:hover .copyVerseLink:after {
	opacity: 0.5;
	vertical-align: middle;
	font-size: small;
	margin-left: 1px;
	color: var(--slateblue);
	content: "🔗\FE0E";
}

.head .grc,
.head .cs {
	font-weight: bold;
}
.norm {
	color: var(--gray);
}
.grc {
	color: var(--black-light);
}
.cs {
	color: var(--black-light);
}
.de {
	color: var(--teal);
}

.norm,
.grc,
.cs,
.de {
	margin-left: var(--line-label-width);
	margin-bottom: 0.25rem;
}


/*....................... Apparate (Inline) .........................*/


.appMetric {
	display: inline-block;
	color: var(--gray);
	padding-left: 2em;
	letter-spacing: 2px;
}

.app {
	margin-top: 0.5rem;
	margin-left: calc(var(--line-label-width) + 1rem);
	background-color: var(--gainsboro);

}
.app > * {
	display: block;
}


dl.msNotes,
dl.critNotes,
dl.similiaNotes,
dl.commentNotes {
	display: grid;
	grid-template-columns: 3em auto;
	padding: 0;
	margin: 0;
}

dl.msNotes dt,
dl.critNotes dt,
dl.similiaNotes dt,
dl.commentNotes dt {
	color: var(--slateblue);
}
dl.msNotes dt,
dl.critNotes dt,
dl.similiaNotes dt,
dl.commentNotes dt,
dl.msNotes dd,
dl.critNotes dd,
dl.similiaNotes dd,
dl.commentNotes dd {
	padding: 3px 0 3px 0;
	margin: 0;
}
.item {
	display: inline;
}
.item:after {
	font-weight: bold;
	content: " | ";
}
.item:last-of-type:after {
	content: "";
}
/*....................... Apparate + Lists (Ende) .........................*/

#d-apparatus ul {
	list-style-type: none;
	margin: 0;
	padding: 0 5px 5px 0;
}

#d-apparatus li {
	padding: 0 0 0.3rem 0;
}

.metrikCardinal {
	display: inline-block;
	width: 3ch;
	text-align: right;
	margin-right: 10px;
}
.metrikProzent {
	display: inline-block;
	width: 70px;
	text-align: right;
}
/*....................... Foldable Segmente .........................*/

/*Apparate ein-/ausblendbar machen*/
.foldableDiv {
	position: relative;
}

.foldableDiv h2 {
	margin-right: 2rem; /* Platz für den Pfeil */
}

.foldable > summary {
	position: absolute;
	top: 0;
	right: 0;

	width: 1.5rem;
	height: 1.5rem;
	cursor: pointer;
	list-style: none;
}

.foldable > summary::-webkit-details-marker {
	display: none;
}

.foldable > summary::before {
	content: "▶";
	display: inline-block;
	color: var(--slateblue);
	transition: transform .2s ease;
}

.foldable[open] > summary::before {
	transform: rotate(90deg);
}

/*....................... Inline / Elemente .........................*/

.pb {
	display: block;
	color: var(--gray);
	width: fit-content;
}
.fnAnchor {
	vertical-align: super;
	line-height: 0;
	font-size: 90%;
}



/*TODO bereinigen b, sup*/
sup,
.sup {
	vertical-align: super;
	line-height: 0;
}
sub,
.sub {
	vertical-align: sub;
	line-height: 0;
}

.u {
	text-decoration: underline;
	cursor: help;
}
.strikethrough {
	text-decoration: line-through;
}
.wavyunderline {
	text-decoration: underline wavy;
}


b,
.bold {
	font-weight: bold;
}

.smallCaps {
	font-variant: small-caps;
}

.tooltip {
	cursor: help;
}


table,
tbody,
thead,
tr,
th,
td {
	border: 1px solid var(--gray-light);
	/*Achtung: thead und tbody wichtig, weil sonst die Rahmenfarbe schwarz überschrieben wird*/
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

th,
td {
	text-align: left;
	vertical-align: top;
	padding: 3px 20px 3px 3px;
}
.about td:nth-of-type(1) {
	/*Tabellen in Einführung nach Breite 1. Spalte (aber Tabelle in Astr. 1 Fn nicht)*/
	white-space: nowrap;
	width: 1%;
}
.about td:nth-of-type(2) {
	width: auto;
}


/* ------------------------ Edition (Einzelwebsite) ------------------------ */


/*grid mit: ul + div[darin ul+ul]*/
#d-edition > div {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	align-items: start;
}

#d-edition > div > div {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#d-edition ul {
	background: var(--bg-card);
	border: 1px solid #ddd;
	border-radius: 6px;
	padding: 1rem;
	list-style-type: none;
}
#d-edition ul::before {
	content: attr(data-title);
	font-weight: 600;
	margin-bottom: 1.2rem;
	display: block;
	color: var(--slateblue);
	border-bottom: solid 1px var(--slateblue);
}
#d-edition li {
	margin-bottom: .2rem;
}
#d-edition a {
	display: block;
	padding: .2rem .1rem;
	color: var(--black-light);
	border-radius: 3px;
	transition: background .2s, color .2s;
	text-decoration: none;
}
#d-edition a.visible {
	font-weight: bold;
}
#d-edition a.hidden,
#d-downloads a.hidden,
#d-documentation_technical a.hidden{
	color: var(--gray);
	pointer-events: none;
	text-decoration:none;
}
#d-edition a:hover {
	background-color: var(--lavender-transparent);
	color: var(--slateblue);
	transform: scale(1.05);
}



/* ------------------------ Bibliography / Index ------------------------ */


.bibl,
.index {
	display: block;
}

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

.bibl li {
	text-indent: -30px;
	padding: 0 0 15px 0;
}

.bibl li b {
	padding-right: 10px;
}


.index dt {
	/*TODO: nötig, wenn kein abc?*/
	padding-top: 20px;
	/*Padding für sticky-ABC-Leiste, damit die beim Springen nicht über dem Zielelement liegt*/
}
.index dd > span {
	display: flex;
	margin: 0 0 5px 0;
	flex-wrap: wrap;
}

/*TODO: indent hängend bei mehrzeiliger kurzsbeschreibung*/
.index dd > span > .label {
	vertical-align: top;
	/*für fSimilien wichtig, wenn nachfolgend mehrere ptr untereinander stehen*/
	margin-right: 10px;
	flex: 0 0 130px;
}
.index dd > span > .label {
	flex: 0 0 180px;
}

.index dd > span > .content {
	flex: 1;
}

/* ------------------------ Zeichnungen ------------------------ */

#d-drawings img {
	max-height: 100px;
	max-width: 150px;
}


.copyImgLink:hover {
	background-color: var(--lavender-transparent);
	cursor: alias;
}
.copyImgLink:after {
	font-size: 1.3rem;
	margin-left: 0.3rem;
	cursor: alias;
	color: var(--slateblue);
	content: "🔗\FE0E";
}


.drawing {
	display: inline-block;
	float: right;
}
.drawing img {
	max-height: 30px;
	border: solid var(--slateblue) 1px;
}


.preview {
	position: relative;
}

.preview::after {
	content: "";
	position: absolute;
	top: 1.5em;
	left: 0;
	width: 200px;
	height: 120px;

	background-image: var(--preview);
	background-size: contain;
	background-repeat: no-repeat;
	background-color: white;

	display: none;
	z-index: 1000;
}

.preview:hover::after {
	display: block;
}


img.at {
	display: inline-block;
	height: 9pt;
}

/*ABOUT (nicht Bilder in drawings)*/
figure {
	margin: 16px 0;
}
figcaption {
	font-size: smaller;
	font-style: italic;
}
/* --------- Medien‑Breakpoints --------- */
@media (max-width : 1700px) {
	.title {
		font-size: 1.5rem;
	}
	.icon {
		width: clamp(40px, 8vw, 70px);
		height: clamp(40px, 8vw, 70px);
	}

}
@media (max-width : 1400px) {
	.title {
		font-size: 1.3rem;
	}
	.icon {
		width: clamp(40px, 8vw, 60px);
		height: clamp(40px, 8vw, 60px);
	}

}
@media (max-width : 1000px) {
	.title {
		font-size: 1rem;
	}
	.icon {
		width: clamp(40px, 8vw, 50px);
		height: clamp(40px, 8vw, 50px);
	}

}
@media (max-width : 460px) {
	.title {
		font-size: 0.5rem;
	}
	.icon {
		width: clamp(40px, 8vw, 40px);
		height: clamp(40px, 8vw, 40px);
	}
}