@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold-Italic.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold-Italic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Bold.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold-Italic.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold-Italic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-ExtraBold.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Italic.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium-Italic.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium-Italic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Medium.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff2/JetBrainsMono-Regular.woff2') format('woff2'),
    url('https://cdn.jsdelivr.net/gh/JetBrains/JetBrainsMono/web/woff/JetBrainsMono-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* @font-face {
	font-family: 'Lacquer';
	src: url('Fonte/Lacquer-Regular.ttf') format('truetype');
	font-display: swap;
} */

:root {
	--bg: rgb(255, 255, 255);
	--fg: rgb(0, 0, 0);
	--accent: rgb(0, 222, 255);
	--glyph: 8.5vw;
	--gap: 0.15vw;
	--lineGap: clamp(14px, 1.8vw, 26px);
	--temp: 0.4s;
	--padd: 0vw;
}


.effect{
	transition: all var(--temp);
}

body {
	margin: 0;
	font-family: 'JetBrains Mono', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color: var(--fg);
	background: var(--bg);
	overflow-x: hidden;
	
	display: grid;
	
	grid-template-areas: 
	'Header Main'
	'Not Not'
	;

	column-gap: 0vw;
	grid-template-columns: 11vw auto;
}

header,main {
    padding: 3vh;
    padding-top: 10.5vh;
	/* padding-left: 1.5vw; */
	padding-bottom: 0vh;
	padding-right: 0vw;
}

header, main, footer img{
	/* transform: translate(1.5vw, 0vh); */
} 


header{
	padding-right: 0vw;
	position: fixed;
	width: 10.2vw;
}

.headerNav {
	grid-area: Header;
	opacity: 0;
	transition: opacity 650ms ease;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: end;

	height: 77.5vh;
}

main{
	width: 79vw;
	grid-area: Main;
	padding-left: 3vw;
	/* min-height: 100vh; */
}

main{
	font-size: 2.25vh;
}



.editionContent>span:nth-child(2){
	padding-top: 2vh;
}


footer{
	grid-area: Footer;
	padding-bottom: 7vh;
	background-color: rgb(255,255,255);
}

.footerSocial{
	display: block;
}

.headerNav nav {
	display: flex;
	flex-direction: column;
	align-items: end;
	gap: 0.5vh;
	text-align: end;
}

.headerNav a {
	text-decoration: none;
	color: var(--fg);
	font-size: 1.85vh;
	letter-spacing: 0.08em;
	font-weight: 600;
	width: fit-content;
}

.headerNav img{
	height: 3.5vh;
}

.headerNav a.isActive {
	color: var(--accent);
}

.AbaB:hover{
	color: #00E2FD;
}

.layer-letter{
	cursor: pointer;
}

.headerSocial {
	gap: 1vh;
}

.footerLogos {
	display: none;
	align-items: center;
	justify-content: space-between;
	opacity: 0;
	transition: opacity 650ms ease, background-color 650ms ease 800ms;
	padding-left: 2.5vw;
	padding-top: 8vh;
	padding-right: 20vw;
}

.footerLogos img {
	height: 4vh;
	width: auto;
	opacity: 1;
}

.footerSocial {
	display: block;
	gap: 1vh;
}

.footerSocial img {
	height: 3.5vh;
}

#vazio {
	transition: background-color 650ms ease 800ms;
}

/* Scene */
.scene {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--lineGap);
	
	box-sizing: border-box;
}

.fullTitle {
	opacity: 1;
	pointer-events: auto;
	width: min(1050px, 100%);

	display: flex;
	flex-direction: column;
	gap: 1vh;
}

#appMobile{
	display: none;
}

#appTablet{
	display: none;
}

body.is-ready .headerNav {
	opacity: 1;
}

body.is-ready .footerLogos {
	opacity: 1;
}

.line {
	display: flex;
	flex-wrap: wrap;
	/* justify-content: center; */
	align-items: center;
	gap: var(--gap);
}

.word {
	display: flex;
	align-items: center;
	/* gap: var(--gap); */
}

.spacer {
	width: calc(var(--glyph));
	height: 1px;
}

.glyph {
	position: relative;
	width: calc(var(--glyph) * 0.95);
	height: calc(var(--glyph) * 1.15);
	flex: 0 0 auto;
	opacity: 1;
}

.glyph--initial {
	--fromX: 0px;
	--fromY: 0px;
	transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

body.is-frame1 .glyph--initial {
	transform: translate(var(--fromX), var(--fromY));
}

.glyph--rest {
	opacity: 0;
	transition: opacity 650ms ease;
}

body.is-rest-visible .glyph--rest {
	opacity: 1;
}

.glyph img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	user-select: none;
	-webkit-user-drag: none;
}

.layer-map {
	opacity: 1;
}

.layer-letter {
	opacity: 0;
	transition: opacity 650ms ease;
}

body.is-frame2 .glyph--initial .layer-letter {
	opacity: 1;
}

body.is-rest-visible .glyph--rest .layer-letter {
	opacity: 1;
}

body.is-ready .glyph:hover .layer-letter {
	opacity: 0;
}

.beforeContentor .dateBox.word .glyph .layer-letter,
.dateContentor .dateBox .glyph .layer-letter {
	opacity: 1;
	transition: opacity 650ms ease;
}

body.is-ready .beforeContentor .dateBox.word .glyph:hover .layer-letter,
body.is-ready .dateContentor .dateBox .glyph:hover .layer-letter {
	opacity: 0;
}

.hint {
	opacity: 0;
	transition: opacity 700ms ease;
	font-size: 12px;
}

.intro--settle .hint {
	opacity: 0.55;
}

.dateContentor{
	padding-top: 5vh;
	/* height: 10vh; */
	display: flex;
	flex-direction: row;

	gap: 7.5vw;

	
}

.dateBox{
	display: flex;
	flex-direction: row;
	width: fit-content;
}

.dateBox > div{
	font-size: 7vh;
	font-weight: 700;
}

.dateContentor .dateBox:hover,
.dateContentor .dateBox.active{
	cursor: pointer;
	scale: 1.15;
}


.programmContentor{
	display: flex;
	flex-direction: column;
	width: min(1050px, 100%);
	padding-top: 11vh;

	gap: 10vh;
	padding-bottom: 7vh;
}

.oradorContentor{
	width: 100%;
	display: grid;
	grid-template-columns: 60% auto;
	gap: 5vw;
}

.oradorContentor img{
	width: 80%;
}

.oradorContentor span{
	display: block;
}

.oradorInformation > span{
	padding-bottom: 2vh;
}

.oradorName{
	font-size: 2.5vw;
	font-weight: 600;
}

.oradorDate{
	font-size: 1.75vh;	
}


.right{
	display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    height: 50vh;
}


.oradorText{
	margin-right: 2.5vw;
}

.photo{
	width: 20vw !important;
}

.linkbox {
    line-height: 1vh;
}

#beforeTitle{
	padding-bottom: 15vh;
}


.beforeBox{
	display: grid;
	grid-template-columns: 40vw auto;
	column-gap: 7.5vw;
	padding-bottom: 15vh;
}

.beforeContentor{
	display: flex;
	flex-direction: column;
}

.beforeContentor > .dateBox{
	padding-bottom: 2.5vh;
}


.editionContent{
	display: flex;
	flex-direction: column;
}

.editionContent > span:nth-child(1){
	text-decoration: underline;
	font-size: 2.5vh;
}

.linkP{
	color: var(--accent);
	text-decoration: none;
}

.imagemPen{
	width: 18vw !important;
    padding-top: 3vh;
    padding-bottom: 9vh;
}

.speakers{
	display: flex;
	flex-direction: column;
}

.speakers > span:nth-child(1){
	font-size: 2.5vh;
	font-weight: 500;
	padding-bottom: 1.5vh;
}

.speakers > span:not(:nth-child(1)){
	font-size: 1.75vh;
}


#aboutTitle{
	padding-bottom: 10vh;
}

.aboutContentor{
	width: 50vw;
	display: flex;
	flex-direction: column;
}

.textAbout{
	display: block;
	/* font-size: 1.8vh; */
	padding-bottom: 2vh;
}

.textAboutContentor{
	padding-bottom: 15vh;
}

.orgBox{
	display: flex;
	flex-direction: column;
}

.aboutTitles{
	font-size: 4vh;
	font-weight: 400;
	padding-bottom: 2.5vh;	
}

.abBox{
	display: flex;
	flex-direction: column;
	padding-bottom: 8.5vh;
}

.abBox img:nth-child(1){
	width: 30vw;
	height: max-content;
}

.abBox img:nth-child(2){
	width: 10vw;
}

#iconsAbout{
	display: flex;
	flex-direction: row;
	align-items: end;
	gap: 5vw;
}

#programmTitle .layer-letter,
#aboutTitle .layer-letter,
#beforeTitle .layer-letter {
	opacity: 0 !important;
	transition: opacity 800ms ease-in-out;
}

#programmTitle.show-title .layer-letter,
#aboutTitle.show-title .layer-letter,
#beforeTitle.show-title .layer-letter {
	opacity: 1 !important;
}

body.is-ready #programmTitle .glyph:hover .layer-letter,
body.is-ready #aboutTitle .glyph:hover .layer-letter,
body.is-ready #beforeTitle .glyph:hover .layer-letter {
	opacity: 0 !important;
}

.mobile{
	display: none;
}

.comitteeContentor{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	
	flex-basis: 33.33%;
	

	padding-top: 7vh;
	row-gap: 7vh;
	column-gap: 3vw;
}	

.comitteeElement{
	display: flex;
	flex-direction: column;	
	width: 29%;
}

.comitteeElement>span:nth-child(1){
	padding-bottom: 1.5vh;
	font-size: 2.25vh;
	font-weight: 600;
}

.comitteeElement>span:not(:nth-child(1)){
	font-size: 2vh;
	padding-bottom: 0.75vh;
}

.beforeContentor .word{
	gap: 0.5vw;
}

.beforeContentor div.glyph, .dateContentor div.glyph{
	width: calc(var(--glyph) * 0.95 * 0.5);
    height: calc(var(--glyph) * 1.15 * 0.5);
    padding-bottom: 5vw;
}

.mainDate{
	padding-top: 2.5vh;
    display: flex;
    justify-content: end;

	font-weight: 400;
}

#iconsBox{
	padding-bottom: 12vh;
}



@media (min-aspect-ratio: 1.95/1) and (max-aspect-ratio: 2.3/1) {
	:root {
		--glyph: 7.35vw;
	}
	
	body{
		grid-template-columns: 15vw auto;
	}

	main{
		/* width: 68.75vw; */
		width: 70vw;
	}

	header, main {
		padding: 7.5vh;
		padding-top: 8vh;
		/* padding-left: 1.5vw; */
		padding-bottom: 0vh;
		padding-right: 0vw;
	}
	header {
		width: 12vw;
	}

	.oradorInformation > span {
		padding-bottom: 3.25vh;
	}

	#iconsBox {
		padding-bottom: 15vh;
	}

	.imagemPen {
		width: 18vw !important;
		padding-top: 3vh;
		padding-bottom: 11vh;
	}
}


@media (min-width: 521px) and (max-width: 1024px) {
	
}

@media (max-width: 521px){
	.photo{
		display: none;
	}


	.imagemPen{
		width: 50vw !important; 
		padding-top: 7vh;
	}

	.mainDate {
		padding-top: 2vh;
		display: flex;
		justify-content: end;
		font-weight: 500;
	}
	
	.abBox img:nth-child(1){
		width: 70vw;
		height: max-content;
	}

	.abBox img:nth-child(2){
		width: 20vw;
	}

	#iconsAbout{
		display: flex;
		flex-direction: column;
		align-items: initial;
		gap: 5vw;
	}

	#iconsBox{
		padding-bottom: 0vh;
	}

	:root {
		--glyph: 12.5vw;
		--padd: 4vw;
		--escala: 3.25;
	}

	body{
		width: 100vw;
		overflow-x: hidden;

		grid-template-areas:
        'Header '
        'Main'
		'Footer';
		column-gap: 0vw;
		grid-template-columns: 1fr;
		grid-template-rows: 15vh 1fr 0vh;

		min-height: 100vh;
		
	}

	/* for a test*/
	/* .aba{
		padding-left: 3vw;
	} */

	#app{
		display: none;
	}

	header{
		position: relative;
		width: auto;
	}

	.assoc{
		padding-top: 10vw;
	}

	footer{
		display: none;
	}

	.footerLogos{
		display: none;
		padding-left: 0vh;
        padding-top: 0vh;
        padding-bottom: 0vh;
		padding-right: 0vw;
		
		justify-content: center;
        align-items: center;
	}

	.footerLogos img {
		width: 75vw;
		height: auto;
	}


	#appMobile{
		width: 100%;
		
		display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

		gap: 3.5vh;
	}

	#appMobile div.glyph{
		width: calc(var(--glyph) * 0.95 * var(--escala));
    	height: calc(var(--glyph) * 1.15 * var(--escala));
	}

	header, main {
		padding: 0vh;
		padding-top: 0vh;
		padding-left: 0vw;
	}

	main{
		width: 100%;

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		font-size: 3.25vw;
	}

	.spanConversas{
		font-size: 3.25vw;
        padding-left: 1vw;
		font-weight: 500;
	}

	.headerNav {
		flex-direction: row;
		padding-left: 11.75vw;
		padding-right: 11.75vw;
		height: auto;
	}

	.headerNav nav{
		flex-direction: column;
		justify-content: center;
		align-items: start;
		gap: 1.5vw;

		line-height: 1.95vh;
	}

	.headerNav > div{
		height: 13vh;
	}

	.headerSocial {
		display: flex;
		align-items: end;
	}

	.dateContentor {
		width: 80vw;
		overflow-x: scroll;

		gap: 2vw;
		justify-content: space-between;
	}

	.dateBox > div {
		font-size: 7.5vw;
		font-weight: 700;
	}	

	.programmContentor{
        padding-top: 4vh;
		width: 80vw;
	}

	.oradorContentor {
		width: auto;
		display: grid;
		grid-template-rows: 75vw auto;
		grid-template-columns: 1fr;

		row-gap: 25vw;

		padding-bottom: 6vw;
	}

	.oradorContentor>div:nth-child(2){
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	#aboutTitle, #programmTitle {
		display: flex;
        width: 88.25vw;
        padding-left: 11.75vw;
	}

	#aboutTitle{
		padding-bottom: 3vh;
	}

	.aboutTitles {
    	font-size: 6vw;
	}

	.aboutContentor, .beforeContentor {
		width: auto;
		padding: 10vw;
		padding-left: 12vw;
		padding-right: 12vw;
		padding-bottom: 0vh;
	}

	.textAboutContentor {
    	padding-bottom: 7.5vh;
	}
	.oradorName {
		font-size: 7.5vw;
	}

	#beforeTitle{
		padding-bottom: 5vh;
	}


	#beforeTitle div.glyph{
		width: calc(var(--glyph) * 0.735);
	}

	.beforeBox {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 50vw auto;
		
		column-gap: 0vh;
		row-gap: 3.5vh;
		
		padding-bottom: 15vh;		
	}	

	.editionContent > span{
		padding-bottom: 2.5vh;
	}

	/* 
	.mobile{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		width: 100vw;
		height: 100vh;
	}

	.mobile img{
		padding-top: 8vh;
		height: 3vh;
		transform: translate(0vw, 32.5vh);
		overflow: hidden;
	} 
	*/

	.comitteeElement {
		display: flex;
		flex-direction: column;
		width: auto;
	}

	.comitteeContentor {
		flex-direction: column;
		flex-wrap: nowrap;
		flex-basis: 33.33%;

		padding-top: 3vh;
		row-gap: 3vh;
		column-gap: 0vw;
	}


	.comitteeElement>span:nth-child(1){
		padding-bottom: 1.5vh;
		font-size: 1.75vh;
		font-weight: 600;
	}

	.comitteeElement>span:not(:nth-child(1)){
		font-size: 1.5vh;
		padding-bottom: 0vh;
	}

	.footerSocial{
		display: none;
	}


	.beforeContentor .word{
		gap: 0.5vw;
	}

	.beforeContentor div.glyph{
		width: calc(var(--glyph) * 0.95 * 1);
        height: calc(var(--glyph) * 1.15 * 1);
        padding-bottom: 5vw;
	}

}

@media (min-width: 768px) and (max-width: 1024px) {
	.photo{
		display: none;
	}

	.mainDate {
		padding-top: 0vh;
		display: flex;
		justify-content: end;
		font-weight: 500;
		width: 65vw;
    }
	
	#iconsBox{
		padding-bottom: 0vh;
	}

	#iconsAbout{
		display: flex;
		flex-direction: column;
		align-items: initial;
		gap: 5vw;
	}

	.abBox img:nth-child(1){
		width: 70vw;
		height: max-content;
	}

	.abBox img:nth-child(2){
		width: 20vw;
	}

	:root {
		--glyph: 12.5vw;
		--escala: 1.9;
		--escala2: 0.75;
	}

	.comitteeElement>span:nth-child(1){
		padding-bottom: 1.5vh;
		font-size: 1.75vh;
		font-weight: 600;
	}

	.comitteeElement>span:not(:nth-child(1)){
		font-size: 1.5vh;
		padding-bottom: 0.75vh;
	}

	body{
		width: 100vw;
		overflow-x: hidden;

		grid-template-areas:
        'Header '
        'Main'
		'Footer';
		column-gap: 0vw;
		grid-template-columns: 1fr;
		grid-template-rows: 17.5vh 1fr 0vh;

		min-height: 100vh;
	}

	.headerNav{
		flex-direction: row;
		padding-left: 16vw;
		padding-right: 16vw;
		padding-top: 4vh;
		padding-bottom: 2vh;
		height: auto;
		
	}

	.headerNav nav {
		align-items: start;
	}

	.headerNav a {
		font-size: 1.5vh;
	}

	.headerSocial {
		display: flex;
		align-items: end;
	}

	header, main {
		padding: 0vh;
		padding-top: 0vh;
		/* padding-left: 1.5vw; */
		padding-bottom: 0vh;
		padding-right: 0vw;
	}

	.aboutTitles {
		font-size: 3.25vh;
	}

	header{
		position: relative;
		width: auto;;
	}

	.tab {
		width: 80vw;
        padding-left: 10vw;
        padding-right: 10vw;
    }

	.aba3 > div, .aba4 > div{
		padding-left: 7vw;
		padding-right: 7vw;
	}

	#app, #appMobile {
		display: none;
	}

	#appTablet {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2vh;
        width: 100vw;
	}

	#appTablet div.glyph {
		width: calc(var(--glyph) * 0.95 * var(--escala));
		height: calc(var(--glyph) * 1.15 * var(--escala));
	}

	.assoc div.glyph{
		width: calc(var(--glyph) * 0.95 * var(--escala2));
    	height: calc(var(--glyph) * 1.15 * var(--escala2));
	}


	main{
		font-size: 1.75vh;
	}

	.editionContent > span{
		padding-bottom: 2.5vh;
	}

	#aboutTitle, #programmTitle {
        display: flex;
        width: 88.25vw;
        padding-left: 10vw;
    }

	.textAboutContentor {
    	padding-bottom: 10vh;
	}

	/* for a test*/
	/* .aba{
		padding-left: 3vw;
	} */

	.dateContentor {
		justify-content: space-between;
	}

	.dateBox > div {
		font-size: 4.5vh;
	}

	.programmContentor {
		padding-top: 5vh;
	}

	.oradorContentor {
		width: auto;
		display: grid;
		grid-template-rows: 45vh auto;
		grid-template-columns: 1fr;

		row-gap: 17.5vw;

		padding-bottom: 6vw;
		padding-left: 7vw;
		padding-right: 7vw;
	}

	.oradorContentor>div:nth-child(2){
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.oradorName {
		font-size: 5vw;
	}

	.assoc{
		padding-top: 10vw;
	}

	.beforeBox {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 37.5vw auto;
        column-gap: 0vh;
        row-gap: 0vh;
        padding-bottom: 12.5vh;
    }

	#beforeTitle {
		padding-bottom: 11.5vh;
	}

	.footerLogos{
		display: none;
		padding-left: 0vh;
        padding-top: 0vh;
        padding-bottom: 0vh;
		padding-right: 0vw;
		
		justify-content: center;
        align-items: center;
	}

	.footerLogos img {
		width: 65vw;
		height: auto;
	}

	.footerSocial{
		display: none;
	}


	.beforeContentor .word{
		gap: 0vw;
	}

	.beforeContentor div.glyph{
		width: calc(var(--glyph) * 0.95 * 0.8);
        height: calc(var(--glyph) * 1.15 * 0.8);
        padding-bottom: 5vw;
	}
}