body {
	display: flex;
	flex-direction: row;
	margin: 0;
}

.leftside {
	background-color: #F1F1F1;
	width: 20vw;
	min-width: 300px;
	height: 100vh;
	display: grid;
	grid-template-rows: 15% 40% 23% 17% 5%;
}

.rightside {
	background-image: url("../images/bg2.webp");
	background-size: cover;
	width: 80vw;
	height: 100vh;
}

.texttitle {
	display: flex;
	align-items: center;
	justify-content: center;
}

.inlinks {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
}



.sitelinks {
	text-decoration: none;
    font-size: 1.3rem;
    text-transform: uppercase;
    font-family: "Roboto Serif", Courier, monospace;
	padding: 3%;
    background-color: transparent;
    transition: 700ms;
    color:rgb(7, 7, 7);
    border-color: transparent;
    align-self: center;
}

.sitetext {
    font-size: 1.3rem;
    text-transform: uppercase;
    font-family: "Roboto Serif", Courier, monospace;
}

.sitelinks:hover {
    background-color: rgb(5, 5, 5);
    mix-blend-mode: darken;
    color: #f1f1f1;
    text-shadow: none;
    cursor: pointer;
}

.myinfo {
	grid-row-start: 4;
	background-color: #D9D9D9;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.headpic {
	width: 30%;
	padding: 5%;
	object-fit: contain;
	flex: 3;
}

.myinfotext {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 1.3rem;
	flex: 5;
}

.outlinks {
	margin-left: 0.5%;
	grid-row-start: 5;
	display: flex;
	flex-direction: row;
	justify-content: start;
	align-items: center;
}

.outlink-button {
	margin-right: 2%;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	border: none;
	background-size: cover;
}

.outlink-button:hover {
	cursor: pointer;
}


.linkedin-button {
	background-image: url("../images/linkedin.webp");
}

.twitter-button {
	background-image: url("../images/twitter.webp");
}

.github-button {
	background-image: url("../images/github.png");
}

@media screen and (max-width: 800px) {
	.outlinks {
		justify-content: center;
	}
	body {
		display: block;
		overflow: hidden;
	}

	.rightside {
		position: absolute;
		top: 0%;
		left: 0%;
		width: 100%;
		background-size: contain;
		z-index: 0;
	}
	.leftside {
		position: absolute;
		left: 10%;
		width: 80%;
		z-index: 10;
	}
}