#bodycontainer {
	background-color: var(--dark-primary);
	display: flex;
	height: calc(100vh - 59px);
	width: 102%;
}
	@media only screen and (max-width: 650px) {
		#bodycontainer {
			align-items: center;
			flex-direction: column;
		}
	}
	#me {
		align-items: center;
		display: flex;
		flex: 1;
	}
		#face {
			border-radius: 33vw;
			max-width: 100%;
		}
	#scroller {
		flex: 2;
		overflow-y: scroll;
		padding: 2% 15px 4% 2%;
		width: calc(98% - 15px);
	}
		#scroller p {
			color: var(--light-primary);
			padding: 10px 5px;
		}
		#timeline {
			padding: 0% 5%;
			width: 90%;
		}
			#timelinetitle {
				color: var(--light-primary);
				font-size: 24px;
				padding-top: 2%;
				text-align: middle;
				width: 100%;
			}
			#timelinecontainer {

			}
				.stepscontainer {
					display: flex;
				}
					.stepscontainer::after {
						background-color: var(--light-primary);
						bottom: 0;
						content: "";
						position: relative;
						right: 35px;
						width: 2px;
					}
						.stepscontainer:last-of-type::after {
							height: 0px;
						}
					.content {
						background-color: var(--light-secondary);
						color: var(--dark-secondary);
					    margin-bottom: 16px;
						padding: 15px 25px;
						position: relative;
					}
						.content p {
							color: var(--dark-primary)!important;
						}
						.date {
							align-items: center;
							background-color: var(--light-primary);
							border-radius: 50%;
							color: var(--dark-secondary);
							display: flex;
							flex-shrink: 0;
							height: 70px;
							margin-bottom: 10px;
							text-align: center;
							width: 70px;
							z-index: 3;
						}
						.stepline {
							background-color: var(--light-primary);
							flex-shrink: 0;
							height: 2px;
							margin-top: 31px;
							width: 40px;
						}