* {  	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	outline:0;
	margin:0;
	padding:0;
}
body, html {
	height: 100vh;
	width: 100vw;
}
body {
	color: #fff;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
	background: linear-gradient(to top, #ffeccf, #d7af96, #b291a6, #9184ba, #708ac3, #2c5a95, #000f2f);
	font-family: 'Cabin', Open Sans, sans-serif;
  display: flex;
  flex-wrap: wrap;
	align-items: center;
  justify-content: center;
}
h2, p {
	margin:8px 0 20px 0;
}
.mainFrame {
	display:block;
	position:relative;
	margin:24px 24px 12px 24px;
	padding:48px 24px 24px;
	width:480px;
	max-width:100%;
	min-height:480px;
	border: 3px solid #fff;
	border-top:0;
	text-align:center;
}
.logo.boxed {
	width:240px;
	position:absolute;
	left: calc(50% - 120px);
	top:-9%;
}
.logo img {
	width:100%;
	display:block;
}
.ruler {
	position:absolute;
	width: calc(50% - 128px);
	height:3px;
	background-color:#fff;
	top:0;
} 
.left {
	left:0;
}
.right {
	right:0;
}
.circle {
	margin:0 auto;
	display:inline-block;
	text-align:center;
	width:40px;
	height:40px;
	border-radius:50%;
	background-color:#fff;
	padding-top:8px;
}
.circle a, .circle a:hover, .circle a:active, .circle a:visited {
    color: rgb(44, 90, 149);
}
.fa-solid, .fas {
	color: #2c5a95;
	Width:24px;
	height:24px;
}
.avatar {
	margin: 0 auto;
	background-image: url("img/bryan_bg.jpg");
	background-position: center center;
	background-size: 100%;
	width: 128px;
	height: 128px;
	border-radius: 50%;
	overflow: hidden;
}
nav {
	position:fixed;
	top:40px;
	right:0px;
	display:block;
	width:640px;
	max-width:100%;
	margin:0 40px;
}
nav ul {
	list-style:none;
	
}
nav ul li{
	text-align:center;
	display:inline-block;
	list-style:none;
	border: 3px solid #fff;
	width:18%;
	height:80px;
	margin-right:2.5%;
	padding: 18px 4px;
	line-height:1.2em;
	cursor: pointer;
}
nav ul li:last-of-type {
	margin-right:0;
}