@import "variables.css";

h1 {
	margin-top: 22.5px;
	font-size: 50px;
	color: var(--top-h1-font-color);
}

.top {
	text-align: center;
	padding-bottom: 10px;
	padding-top: 30px;
	position: relative;
	z-index: 1;
	background: var(--top-background-color);
	color: var(--top-font-color);
}

.top img {
	padding: 6px;
	border: 5px solid var(--top-background-color);
}

#profile-pic:hover {
	cursor: pointer;
	border-bottom: 5px solid var(--top-hover-image-color);
}

.top dialog {
	background: rgb(0, 0, 0, 90%);
	border: solid var(--top-dialog-outline-color) 3px;
	outline: var(--top-dialog-outline-color);
}

.top dialog img {
	border: transparent;
}

#close-dialog {
	position: absolute;
	top: 5px;
	right: 5px;
	max-width: 10%;
	max-height: auto;
}

#close-dialog:hover {
	cursor: pointer;
}

#expanded-profile-pic {
	max-width: 80%;
	height: auto;
}

.top dialog p {
	color: var(--top-dialog-font-color);
}

.top p,
.top a {
	font-size: 20px;
}

.top a {
	color: var(--top-anchor-font-color);
	text-decoration: inherit;
}

.top a:hover {
	font-weight: bold;
}