.kantumruy-pro-font {
	font-family: "Kantumruy Pro", sans-serif;
	font-optical-sizing: auto;
	font-weight: 100;
	font-style: normal;
}

:root {
	--blue: #0074e1;
	--grey: #4d4d4d
}

header{
	opacity: 0%;
}

body {
	background: var(--grey);
}

h1 {
	padding: auto;
	font-size: 3rem;
	color: var(--blue)
}

h2 {
	font-size: 2rem;
	padding: auto;
	color: var(--blue);
	justify-self: center;
}
h3 {
	color: var(--blue);
	font-size: 1.5rem;
}

a {
	color:var(--blue);
	font-weight: 200;
	font-size: 1.5rem;
	padding-inline: 0.5rem;
}

p { 
	color: var(--blue);
	font-size: 1.05rem;
	padding: auto;
	color: var(--blue);
	font-weight: 350;
	justify-self: center;
}

a {
	color: var(--blue);
}


.SkillBox {
	justify-self: center;
	justify-items: center;
	background-color: var(--blue);
	border-radius: 5vw;
	padding: 2vw;
	margin: 2vw;
}
.SkillBox {
	box-shadow: 10px 10px 20px 2px #000000;
	display: block;
	height: auto;
}

.SkillBox p {
	padding: 0vw;
	margin: 1vw;
	max-width: 20vw;
	color: var(--grey)
}
.SkillBox h3 {
	color: var(--grey);
	text-align: center;
}

.projects h2 {
	justify-self: center;
	justify-content: center;
	justify-items: center;
}

.projects img {
	float: inline-start;
	max-width: 30%;
	height: fit-content;

	object-fit: contain;
	padding: 2%;
	border-radius: 5vw;
}

.ProjectDisc a {
	font-size: 1.05rem;
	padding: auto;
	font-weight: 350;
	justify-self: center;
}

@media screen and (max-width: 767px) {
	header {
		opacity: 100%;
	}
}

@media screen and (min-width: 768px) {
	h1 {
		font-size: 3.5rem;
	}

	h2 {
		font-size: 2.5rem;
	}

	h3 {
		font-size: 1.8rem;
	}

	a {
		font-size: 1.8rem;
	}

	p {
		font-size: 1.3rem;
	}
	.ProjectDisc a {
		font-size: 1.3rem;
	}
	.skillstop div {
		display: grid;
	}
	.skillsbtm div {
		display: flow-root;
	}
}