@font-face {
        font-family: "qtpi";
        src: url("qtpi.otf") format("opentype");
}

body {
	font-family: "qtpi";
	font-size: 1.4em;
	background-image: url("background.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

.avatar-img {
    border-radius: 100%;
    width: 100%;
    max-width: 150px;
    margin: 2em auto;
    box-shadow: 0 0 6px rgb(111, 111, 111);
}
.avatar-crown {
    position: absolute;
    transform: translate(25px, 15px) rotate(-19deg);
    width: 60px;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	width: fit-content;
	transform: translate(-50%, -50%);
	justify-content: center;
}

.row {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 20px;
	box-shadow: 5px 5px 20px rgba(0,0,0,.4);
	border-radius: 20px;
	background: rgba(255, 240, 243, 0.9);
}

.column {
	display: flex;
	flex-direction: column;
	padding: 20px;
	margin: 20px;
}

@font-face {
  	font-family: "good day";
  	src: url("Good-Day.otf") format("opentype");
}

h1 {
	font-family: "good day";
	font-size: 3em;
}

.credits {
	position: absolute; 
	bottom: 0; 
	right: 0;
	color: #ffffff;
	padding: 20px;
}

.credits a:link, .credits a:visited {
	color: #ffffff;
}