* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
}

body {
	/* background-color: #EF4444; */
	background: linear-gradient(180deg, #EF4444, #B91C1C);
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #FFE4E6;
}

main {
	width: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

h3, p{
	color: #FECACA;
	margin-top: 1vh;
	margin-bottom: 1vh;
}

h4 {
	margin: 2vh;
	color: #FFE4E6;
}

.logo {
	max-width: 220px;
}

.button {
	background-color: #B91C1C;
	color: #FFE4E6;
	border: none;
	padding: 14px 20px;
	margin: 10px 0;
	border-radius: 10px;
	width: 80%;
	display: flex;
	align-items: center;
	text-align: center;
	text-decoration: none;
	transition:
		background-color 1100ms ease,
		box-shadow 1100ms ease,
		transform 600ms ease;
}

.button:hover {
	background-color: #7F1D1D;
	border: 2px solid #EF4444;
	color: #EF4444;
	box-shadow: 0px 0px 10px 2px rgba(255, 228, 230, 0.4);
	transform: scale(1.1); 
	transition: 0.8s;
	
}

.button img {
	max-height: 3.5vh;
	margin-right: 2vh;
}

.button2{
	background-color: #B91C1C;
	color: #FFE4E6;
	border: 2px solid #EF4444;
	padding: 14px 20px;
	margin: 10px 0;
	border-radius: 10px;
	width: 6vh;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	text-decoration: none;
}

#email {
	max-height: 2.7vh;
	margin-right: 2vh;
}

#port{
	background-color: #DC2626;
	border: 2px solid #FFE4E6;
	color: #FFE4E6;
}

#port:hover {
	background-color: #991B1B;
	color: #FFE4E6;
	box-shadow: 0px 0px 10px 2px rgba(255, 228, 230, 0.4);
	transform: scale(1.1);
	transition: background-color 1100ms ease, box-shadow 1100ms ease, transform 600ms ease;
}

a{
	text-decoration: none;
}


a .hover {
  display: none;
}

a:hover .normal {
  display: none;
}

a:hover .hover {
  display: block;
}

footer {
	margin-top: 40px;
	color: #FECACA;
	text-align: center;
	margin-bottom: 2vh;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

footer a:hover {
	color: #FFE4E6;
}

@media (max-width: 1030px) {

	main,
	footer {
		max-width: 80%;
	}

	.button {
		width: 100%;
	}

	.button2 {
		display: flex;
		position: fixed;
		top: 1vh;
		right:1vh;
	}
}

@media (max-width: 420px) {
	.button {
		font-size: 80%
	}

	.button img {
		max-height: 2vh;
	}

	#email {
		max-height: 1.5vh;
	}

}

@media (max-width: 330px) {
	.button {
		font-size: 60%
	}
}

.modal{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.modal-content{
	background: var(--surface);
	padding: 30px;
	border-radius: 12px;
	text-align: center;
	color: var(--text);
}

.themes{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 20px;
	margin-top: 20px;
}

.theme-card{
	cursor: pointer;
}

.preview{
	width: 120px;
	height: 80px;
	border-radius: 8px;
	margin-bottom: 5px;
}

.preview-default{
	background: linear-gradient(#F3F4F6,#EF4444);
}

.preview-dark{
	background: linear-gradient(#0B0B0C);
}

.preview-light{
	background: linear-gradient(#FFFFFF,#898686);
}

.preview-mono{
	background: linear-gradient(#EF4444,#7F1D1D);
}

.theme-mono{
	--bg:#EF4444;
	--text:#FFE4E6;
	--surface:#B91C1C;
}