/* ----NAVBAR---- */
.navbar {
	display: flex;
	justify-content: space-between;
}
.navilinks {
	padding-right: 3.5rem;}
.navilinks a{
	text-decoration: none;
	font-family: 'Chivo Mono';
	font-weight: 400;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
}
.navilinks a:hover{
	text-decoration: underline;}




/*----introdiv----*/
.page{
	flex-direction: column;
	gap: 4rem;
}

.main-intro-div {
	background-color: var(--stark-white);
	width: 70%;
	padding: 2rem;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.main-intro-div img {
	border-radius: 50%;
	width: 70%;
	height: auto;
	padding-bottom: 1rem;
}
.main-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	gap: 1rem;
}
.main-text h2, h3 {
	text-align: center;
}




/*----infodiv----*/
.info-container{
	background-color: var(--stark-white);
	width: 75%;
	padding: 3rem;
}


.skills-section{
	width: 100%;
	padding-bottom: 3rem;
}
.skills-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1rem;
}
.skill-box{
	width: 10rem;
	height: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;

	color: var(--always-white);
	font-family: 'Chivo Mono';
	font-weight: 600;
	font-size: clamp(1.2rem, 2vw, 1.5rem);
}


.infobox {
	padding: 2rem;
}
.top {
  clip-path: polygon(0 0,100% 0,100% calc(100% - 50px),calc(50% + 50px) calc(100% - 50px),50% 100%,calc(50% - 50px) calc(100% - 50px),0 calc(100% - 50px));
  padding-bottom: 6rem;
}
.bottom {
  clip-path: polygon(0 0,calc(50% - 4.14px - 50px) 0,50% calc(50px + 4.14px),calc(50% + 4.14px + 50px) 0,100% 0,100% 100%,0 100%);
  margin-top: -40px;
  padding-top: 3.5rem;
}


.lovebox{
	padding: 2rem;
	border-radius: 50px;
	margin-top: 3rem;
}


.redbox {
	background-color: var(--twee-red);}
.greenbox{
	background-color: var(--twee-green);}
.yellowbox{
	background-color: var(--twee-yellow);}


.footer{
	height: 3rem;
}




/*----pc----*/
@media (min-width: 992px) {
	.navilinks {padding-right: 12rem;}

	.main-intro-div {
		padding: 3rem;

		margin-top: 3rem;
		flex-direction: row;
	}
	.main-intro-div img {
		width: 15vw;
		height: auto;
		padding-right: 2rem;
		padding-bottom: 0rem;
	}
	.main-text {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
	}

	.skill-box{
		width: 13rem;
		height: 6rem;
	}
	.bottom{
		padding-top: 2rem;
	}
}