dialog
{
	width: 50rem;
	/*height: 40rem;*/
	max-width: 90vw;
	/*max-height: 80vh;*/
	border: 0;
	border-radius: 0.7rem;
	padding: 0;
	overflow: hidden;
}

dialog header
{
	font-size: 1.5rem;
	font-weight: bold;
	padding: 0.8rem;
	margin: 0;
}

dialog main
{
	height: 25rem;
	max-height: 75vh;
	overflow: auto;

	line-height: 1.5;
	padding: 0.8rem;
	margin: 0;
}

dialog a,
dialog a:visited,
dialog a:hover,
dialog a:active
{
	text-decoration: underline;
	color: inherit;
	cursor: pointer;
}

.linknodecoration,
.linknodecoration:visited,
.linknodecoration:hover,
.linknodecoration:active
{
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}


dialog .projecticons a,
.closemodal
{
	display: inline-block;
	height: var(--icon-size);
	width: var(--icon-size);
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform 70ms linear;
}

dialog .projecticons a:hover,
.closemodal:hover
{
	transform: scale(1.2);
}

dialog::backdrop
{
	background-color: transparent;
	backdrop-filter: blur(2px);
}

.light-icon
{
	--github-icon: url("commonassets/icons/github-mark/github-mark-white.svg");
	--project-icon: url("commonassets/icons/svgrepo/outside-page-no-padding-white.svg");
	--close-icon: url("commonassets/icons/svgrepo/close-clean-no-padding-white.svg");
}

.dark-icon
{
	--github-icon: url("commonassets/icons/github-mark/github-mark.svg");
	--project-icon: url("commonassets/icons/svgrepo/outside-page-no-padding.svg");
	--close-icon: url("commonassets/icons/svgrepo/close-clean-no-padding.svg");
}

.github-link
{
	background-image: var(--github-icon);
	margin-right: 1rem;
	--icon-size: 2rem;
}

.project-link
{
	background-image: var(--project-icon);
	margin-right: 1rem;
	--icon-size: 2rem;
}

.closemodal
{
	background-image: var(--close-icon);
	float: right;
	cursor: pointer;
	--icon-size: 1rem;
	margin-top: calc(1.5rem /4);
}

.spacer
{
	margin: 0 0.5rem;
}

.madewith-icons img
{
	height: 2rem;
}

/*   Animations   */
.anim-generic-zoom-in
{
	animation: generic-zoom-in 250ms cubic-bezier(.39,.58,.57,1) 1;
}

@keyframes generic-zoom-in
{
	0%
	{
		transform: scale(0.4) rotateZ(10deg);
		opacity: 0;
	}

	70%
	{
		transform: scale(1.07) rotateZ(0deg);
		opacity: 1;
	}

	100%
	{
		transform: scale(1) rotateZ(0deg);
		opacity: 1;
	}
}

.anim-generic-zoom-out
{
	animation: generic-zoom-out 100ms cubic-bezier(.39,.58,.57,1) 1;
}

@keyframes generic-zoom-out
{
	0%
	{
		transform: scale(1) rotateZ(0deg);
		opacity: 1;
	}

	100%
	{
		transform: scale(0.7) rotateZ(-10deg);
		opacity: 0;
	}
}

.anim-generic-scalex-open
{
	animation: generic-scalex-open 250ms cubic-bezier(.39,.58,.57,1) 1;
}

@keyframes generic-scalex-open
{
	0%
	{
		transform: scaleX(0) rotateZ(5deg);
	}
	70%
	{
		transform: scaleX(1.1) rotateZ(0deg);
	}
	100%
	{
		transform: scaleX(1) rotateZ(0deg);
	}
}

.anim-generic-scalex-close
{
	animation: generic-scalex-close 100ms cubic-bezier(.39,.58,.57,1) 1;
}

@keyframes generic-scalex-close
{
	0%
	{
		transform: scaleX(1);
	}
	100%
	{
		transform: scaleX(0);
	}
}

.anim-generic-scaley-open
{
	animation: generic-scaley-open 250ms cubic-bezier(.39,.58,.57,1) 1;
}

@keyframes generic-scaley-open
{
	0%
	{
		transform: scaleY(0) rotateZ(5deg);
	}
	70%
	{
		transform: scaleY(1.1) rotateZ(0deg);
	}
	100%
	{
		transform: scaleY(1) rotateZ(0deg);
	}
}

.anim-generic-scaley-close
{
	animation: generic-scaley-close 100ms cubic-bezier(.39,.58,.57,1) 1;
}

@keyframes generic-scaley-close
{
	0%
	{
		transform: scaleY(1);
	}
	100%
	{
		transform: scaleY(0);
	}
}

.anim-unidad-open
{
	animation: unidad-open 300ms ease-in-out 1;
}

@keyframes unidad-open
{
	0%
	{
		transform: rotateZ(20deg);
		opacity: 0;
	}
	60%
	{
		transform: rotateZ(-6deg);
		opacity: 0.6;
	}
	100%
	{
		transform: rotateZ(0deg);
		opacity: 1;
	}
}

.anim-unidad-close
{
	animation: unidad-close 100ms linear 1;
}

@keyframes unidad-close
{
	0%
	{
		transform: rotateZ(0deg);
		opacity: 1;
	}
	100%
	{
		transform: rotateZ(15deg);
		opacity: 0;
	}
}

.anim-steps-right-open
{
	animation: right-open 250ms steps(3) 1;
}

.anim-fluid-right-open
{
	animation: right-open-full 250ms cubic-bezier(.39,.58,.57,1) 1;
}

@keyframes right-open
{
	0%
	{
		transform: translateX(50vw);
	}
	100%
	{
		transform: translateX(0);
	}
}

@keyframes right-open-full
{
	0%
	{
		transform: translateX(100vw);
		opacity: 0;
	}
	100%
	{
		transform: translateX(0);
		opacity: 1;
	}
}

.anim-steps-left-close
{
	animation: left-close 250ms steps(3) 1;
}

.anim-fluid-left-close
{
	animation: left-close-full 100ms cubic-bezier(.39,.58,.57,1) 1;
}

@keyframes left-close
{
	0%
	{
		transform: translateX(0);
	}
	100%
	{
		transform: translateX(-50vw);
	}
}

@keyframes left-close-full
{
	0%
	{
		transform: translateX(0);
		opacity: 1;
	}
	100%
	{
		transform: translateX(-100vw);
		opacity: 0;
	}
}

.anim-slide-v-open
{
	animation: slide-v-open 250ms cubic-bezier(.39,.58,.57,1) 1;
}

@keyframes slide-v-open
{
	0%
	{
		transform: translateY(-100vh);
	}
	70%
	{
		transform: translateY(3vh);
	}
	100%
	{
		transform: translateY(0);
	}
}

.anim-slide-v-close
{
	animation: slide-v-close 100ms cubic-bezier(.39,.58,.57,1) 1;
}

@keyframes slide-v-close
{
	0%
	{
		transform: translateY(0);
	}
	100%
	{
		transform: translateY(100vh);
	}
}

.anim-dice-open
{
	animation: dice-open 350ms linear 1;
}

@keyframes dice-open
{
	0%
	{
		transform: translate(50vw, -100vh) rotateZ(180deg);
	}
	40%
	{
		transform: translate(15vw, 0vh) rotateZ(45deg);
	}
	70%
	{
		transform: translate(5vw, -20vh) rotateZ(20deg);
	}
	100%
	{
		transform: translate(0vw, 0vh) rotateZ(0deg);
	}
}


/*
	card specifics
*/

/*   md-view   */
#modal-mdview
{
	font-family: 'Ubuntu', system-ui;
}

#modal-mdview header
{
	background-color: #f0f0f0;
	text-decoration: underline;
	text-decoration-color: #62a0ea;
}

#modal-mdview footer
{
	background-color: #f0f0f0;
}





/*   Unidad   */
#modal-unidad
{
	background-color: #241f31;
	color: #f6f5f4;
	font-family: 'Tilt Warp', cursive;
}

#modal-unidad header,
#modal-unidad footer
{
	background-color: #c01c28;
}




/*   colon-three-bot   */
#modal-colonthreebot
{
	color: #dbdee1;
	background-color: #2e3035;
	font-family: 'Noto Sans', system-ui;
}

#modal-colonthreebot header,
#modal-colonthreebot footer
{
	background-color: #3a406e;
	color: #c9cdfb;
}



/*   Secret Santa   */
#modal-secretsanta
{
	background-color: #241f31;
	color: #fff;
	font-family: 'Noto Sans', system-ui;
}

#modal-secretsanta header,
#modal-secretsanta footer
{
	background-color: #c01c28;
}


/*   Dot Matrix   */
#modal-dotmatrix
{
	background-color: #000;
	color: #fff;
	font-family: 'JetBrains Mono', monospace;
}



/*   convertMusic   */
#modal-convertmusic
{
	background-color: #000;
	color: #44aa00;
	font-family: 'JetBrains Mono', monospace;
}



/*   random-c   */
/*   cosa-matemáticas   */
/*   scripts-and-things   */
#modal-randomc,
#modal-cosa,
#modal-scriptsandthings
{
	background-color: #000;
	color: #f2f2f2;
	font-family: 'JetBrains Mono', monospace;
}


/*   mal-randomizer   */
#modal-mal
{
	background-color: #f0f0f0;
	color: black;
	font-family: 'Comic Neue', cursive;
	font-weight: normal;
}

#modal-mal header
{
	background-color: #2e51a2;
	color: white;
}

/*   random   */
#modal-random
{
	background-color: black;
	background-image: url("img/dados.png");
	color: white;
	font-family: 'Ubuntu', system-ui;
}

/*   Buscaminas   */
#modal-buscaminas
{
	background-color: white;
	color: black;
	font-family: 'Ubuntu Mono', monospace;
}


/*   idko-bot   */
#modal-idkobot
{
	background-color: #2c2f33;
	color: white;
	font-family: 'Ubuntu', system-ui;
}

#modal-idkobot header
{
	background-color: #5865f2;
}


/*   Notas   */
#modal-notas
{
	background-color: #479b5b;
	color: white;
	font-family: 'Rubik', system-ui;
}

#modal-notas header
{
	background-color: #53b56a;
	font-weight: bold;
}


/*   Low Battery Warning Discord   */
#modal-battery-discord
{
	background-color: #000;
	font-family: 'Ubuntu', system-ui;
	color: white;
}

#modal-battery-discord .discord-span
{
	background-color: #5865f2;
	padding: 0 0.2em 0 0.1em;
	border-radius: 0.15em;
}


/*   language   */
#modal-language
{
	background-color: #3d3846;
	font-family: 'Ubuntu', system-ui;
	color: white;
	height: fit-content;
}

#modal-language main
{
	height: fit-content;
	text-align: center;
}

#modal-language .langbtn
{
	width: 45%;
	font-size: 1rem;
	background-color: #544f5d;
	font-family: 'Ubuntu', system-ui;
	color: white;
	margin: 0.3rem 0.5rem;
	padding: 0.7rem;
	border: 0;
	border-radius: 0.7rem;
	cursor: pointer;
	min-width: fit-content;
}

#modal-language .langbtn:hover
{
	background-color: #28272c;
}


/*   email   */
#modal-email
{
	background-color: #3d3846;
	font-family: 'Ubuntu', system-ui;
	color: white;
}

#modal-email main
{
	height: fit-content;
	text-align: center;
}

#modal-email main button
{
	width: 45%;
	background-color: #544f5d;
	font-family: 'Ubuntu', system-ui;
	border: 0;
	border-radius: 0.7rem;
	color: white;
	padding: 0.7rem;
	font-size: 1.1rem;
	cursor: pointer;
	margin: 0.5rem;
}

#modal-email main button:hover
{
	background-color: #28272c;
}

#modal-email main button:focus
{
	background-color: #28272c;
	outline: 0.3rem solid white;
}

#modal-email main button img
{
	height: 4rem;
}