@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;700&family=Ubuntu:wght@400;500;700&display=swap');
 
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	font-family:'Ubuntu',sans-serif ;
}
:root{
	--primary: #D41032;
	--secondary: #FAEBD7;
	--dark: #212121;
	--light: #f3f3f3;
}
html{
	scroll-behavior: smooth;
}
body{
	background-color: #f3f3f3;
}
.MW{
	max-width: 1300px;
	padding: 0 80px;
}
/* navibar */
.navibar{
	background: #FAEBD7;
	position: fixed;
	width: 100%;
	padding: 15px 0;
	font-family:'Ubuntu',sans-serif ;
	z-index: 30;
}
.navibar .MW{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.navibar .myLogo a{
	font-size: 35px;
	font-weight: 600;
	color: #B0C4DE;
}
.navibar .menu li{
	list-style: none;
	display: inline-block;
}
.navibar .menu li a{
	color: #B0C4DE;
	font-size: 18px;
	font-weight: 500;
	margin-left: 25px;
	transition: color 0.5s ease-in-out;
}
.navibar .menu li a:hover{
	color: #D2691E;
}
.menubtn{
	color: #B0C4DE;
	font-size: 23px;
	cursor: pointer;
	display: none;
}



/* homepage */
.home{
	background: url("all images\\webback.png");
	background-repeat: no-repeat;
	background-size: cover;
	height: 110vh;
	background-position-y: 70px;
}
 
.home .MW{
	margin: auto 0 auto 40px;
}

.home .homepage .T3ext span{
	font-weight: 500;
	color: #B0C4DE;
	text-transform: uppercase;
	text-decoration:#111;
}
.home .homepage .T3ext a{
	color: #B0C4DE;
}
.T3ext a{
	cursor:auto;
}
.T3ext a:visited{
	color: #B0C4DE;
}

/* socialbar */ 
.socialbar{
	background:#B0C4DE;
	font-size: 40px;
	padding: 15px 0;

}
.socialbar ul{
	text-align: center;
	
}
.socialbar li{
	color: #D41032;
	margin: 0 75px;
	display: inline-block;
}
.socialbar a {
	color:#D41032;
}
.socialbar a:visited {
	color:#D41032;
}
.socialbar a:hover{
	color:#f3f3f3;
	transition: 0.3s;
	transition: all 0.3s ease-in-out;
}
.socialbar a.gone{
	display: none;
}
/* about me */ 
.aboutMe h1{
	text-decoration: underline;
	font-weight: 1000;
	font-size: 40px;
	background-color: #f3f3f3;
	padding: 10px;
	text-align: center;
	left: 20px;
}


#myPhoto{
	width: 500px;
	height: 20%;
	padding-top: 20px;
	display:block;
	float: none;
	margin-left: auto;
	margin-right: auto;
}
.whoAmI{
	background-color: #f3f3f3;
	font-family:'Ubuntu',sans-serif ;
	overflow:auto;
}
.whoAmI p{
	font-family:'Ubuntu',sans-serif ;
	color: #111;
	padding: 15px;
	text-align: center;
	font-size: 20px;
}
.aboutMeParts{
	list-style: none;
	line-height: 1.5;
	padding-left: 10%;
	padding-right: 10%;
	font-size: 20px;
	text-align: center;
}
  
  #inner_container{
	width: 100%;
	height: 80%;
  
	box-shadow: 0px 0px 36px -22px #2B2D42;
	float: left;
	
  
  }
  
  img{
	width: 100%;
	height: 100%;
	border-radius: 10px;
  
  }
  
  #button_container{
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
  }
  
  button{
	width: 25%;
	height: 90%;
	font-size: 20px;
	color: white;
	border: none;
	outline: none;
	border-radius: 5px;
	background-color: #EF233C;
	cursor: pointer;
  }
  
  button:hover{
	transition: 0.05s;
	background-color: #D90429;
	transform: rotateZ(-10deg);
	box-shadow: 0 0 30px -10px #D90429;
  }
  
  button:active{
	transform: translateY(20px);
	transform: rotateZ(10deg);
  
  }
/* languages */ 
.filler{
	background-color: #B0C4DE;
	width: 100%;
	color: #B0C4DE;
	height: 70px;
}
.languages{
	background-color: #f3f3f3;
}
.languages h1{
	font-family:'Ubuntu',sans-serif ;
	color: #111;
	padding: 15px;
	text-align: center;
	font-size: 40px;
	font-weight: 1000;
	text-decoration: underline;
}
.languages p{
	font-family:'Ubuntu',sans-serif ;
	color: #111;
	padding: 15px;
	text-align: center;
	font-size: 20px;
}

/* my language cards*/
.card{
	margin-left: auto;
	margin-right: auto;
	padding: 30px;
	width: 33%;
	min-width: 200px;
	height: 400px;
	display: inline-block;
	align-items: center;

	
}
.card__inner1 {
	width: 100%;
	height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;
	cursor: pointer;
	position: relative;
}
  
  .card__inner1.is-flipped {
	transform: rotateY(180deg);
}
  .card__inner2 {
	width: 100%;
	height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;
	cursor: pointer;
	position: relative;
}
  
  .card__inner2.is-flipped {
	transform: rotateY(180deg);
}
  .card__inner3 {
	width: 100%;
	height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;
	cursor: pointer;
	position: relative;
}
  
  .card__inner3.is-flipped {
	transform: rotateY(180deg);
}

.card__inner4 {
	width: 100%;
	height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;
	cursor: pointer;
	position: relative;
}
  
  .card__inner4.is-flipped {
	transform: rotateY(180deg);
}
.card__inner5 {
	width: 100%;
	height: 100%;
	transition: transform 1s;
	transform-style: preserve-3d;
	cursor: pointer;
	position: relative;
}
  
  .card__inner5.is-flipped {
	transform: rotateY(180deg);
}
  .card__face {
	position: absolute;
	height: 100%;
	width: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0px 3px 18px 3px rgba(0, 0, 0, 0.2);
}
  
  .card__face--front {
	background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
	display: flex;
	align-items: center;
	justify-content: center;
}
  
  .card__face--front h2 {
	color: #f3f3f3;
	font-size: 32px;
}
  
  .card__face--back {
	background-color: var(--light);
	transform: rotateY(180deg);
}
  
  .card__content {
	width: 100%;
	height: 100%;
}
  
  .card__header {
	position: relative;
	padding: 30px 30px 40px;
}
  
  .card__header:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(to bottom left, var(--primary) 10%, var(--secondary) 115%);
	z-index: -5;
	border-radius: 0px 0px 50% 0px;
}

  .card__header h2 {
	color: #f3f3f3;
	font-size: 42px;
	font-weight: 900;
	text-transform: uppercase;
	text-align: center;
}
  
  .card__body {
	padding: 30px;
}
  
  .card__body h3 {
	color: var(--dark);
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 15px;
}
  
  .card__body p {
	color: var(--dark);
	font-size: 18px;
	line-height: 1.3;
  }
  #java{
	  font-size: 70px;
}
  #hcj{
	  font-size: 50px;
}
#python{
	font-size: 70px;
}

#swift{
	font-size: 70px;
}

.projects h1{
	color: #111;
	padding: 15px;
	text-align: center;
	font-size: 40px;
	text-decoration: underline;
}
.loanPS img{
	display: block;
	width: 70%;
	margin-left: auto;
	margin-right: auto;
}
/* Timeline styling start */

.wrapper{
	background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
	max-width: 1080px;
	margin: 50px auto;
	padding: 20px 20px;
	position: relative;
}
.wrapper .center-line{
	position: absolute;
	height: 97%;
	width: 4px;
	background: #f3f3f3;
	left: 50%;
	transform: translate(-50%);
}
.wrapper .row{
	display: flex;
}
.wrapper .row-1{
	justify-content: flex-start;
}
.wrapper .row-2{
	justify-content: flex-end;
}
.wrapper .row section{
	background: #f3f3f3;
	border-radius: 5px;
	width: calc(50% - 40px);
	padding: 20px;
	position: relative;
}
.wrapper .row section::before{
	position: absolute;
	content: "";
	height: 15px;
	width: 15px;
	background: #f3f3f3;
	top: 28px;
	z-index: 0;
	transform: rotate(45deg);
}
.row-1 section::before{
	right: -7px;
}
.row-2 section::before{
	left: -7px;
}
.row section i, .center-line .scroll-icon{
	position: absolute;
	background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
	height: 40px;
	width: 40px;
	text-align: center;
	line-height: 40px;
	border-radius: 50%;
	color: #f3f3f3;
	
	font-size: 17px;
	box-shadow: 0 0 0 4px #f3f3f3, inset 0 2px 0 rgba(0,0,0,0.08), 0 3px 0 4px rgba(0,0,0,0.05);
}
.center-line .scroll-icon{
	bottom: 0px;
	left: 50%;
	font-size: 25px;
	transform: translateX(-50%);
}
.row-1 section i{
	top: 13px;
	right: -60px;
}
.row-2 section i{
	top: 13px;
	left: -60px;
}
.row section .details, .row section .bottom{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.row section .details .title{
	font-size: 22px;
	font-weight: 600;
}
.row section p{
	margin: 10px 0 17px 0;
}
.row section .bottom a{
	text-decoration: none;
	background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
	color: #f3f3f3;
	padding: 7px 15px;
	border-radius: 5px;
	font-size: 17px;
	font-weight: 400;
}
#timeline{
	background-color: #111;
}
#blur.active{
	filter: blur(20px);
	pointer-events: none;
	user-select: none;
}
.popups{
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 80%;
	padding: 50px;
	box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
	background: #f3f3f3;
	visibility: hidden;
	opacity: 0;
	transition: 0.4s;
	z-index: 20;
	max-height: 80%;
	overflow: scroll;
}
.popups a{
	text-decoration: none;
	background-image: linear-gradient(to bottom right, var(--primary), var(--secondary));
	display: inline-block;
	margin-top: 20px;
	padding: 5px 20px;
	font-weight: 500;
	color: #f3f3f3;
}
#popup.active{
	visibility: visible;
	opacity: 1;
}
#popup2.active{
	visibility: visible;
	opacity: 1;
}
#popup3.active{
	visibility: visible;
	opacity: 1;
}
#popup4.active{
	visibility: visible;
	opacity: 1;
}
#popup5.active{
	visibility: visible;
	opacity: 1;
}
#popup6.active{
	visibility: visible;
	opacity: 1;
}
#popup7.active{
	visibility: visible;
	opacity: 1;
}
#popup8.active{
	visibility: visible;
	opacity: 1;
}
#popup9.active{
	visibility: visible;
	opacity: 1;
}
#popup10.active{
	visibility: visible;
	opacity: 1;
}
#popup3{
	top: 50%;
}
#spot{
	font-weight: bold;
	font-family:'Ubuntu',sans-serif ;
	color: #111;
	text-align: center;
	font-size: 20px;
	font-weight: 1000;
}
#spot.p {
	padding-bottom: 30px;
}
/* sizing */
@media (max-width: 1700px){

}
@media (max-width: 1600px){

}
@media (max-width: 1500px){

	.aboutMeParts{
		font-size: 20px;
	}
}
@media (max-width: 1400px){
	.aboutMeParts{
		font-size: 20px;
	}
	.card__body p {
		font-size: 16px;
		line-height: 1.3;
	}
	.card__header h2 {
		font-size: 20px;
	}
}
@media (max-width: 1300px){
	.aboutMeParts{
		font-size: 20px;
	}
	.card__body p {
		font-size: 14px;
		line-height: 1.3;
	}
	.card__header h2 {
		font-size: 20px;
	}

}
@media (max-width: 1200px){
	.aboutMeParts{
		font-size: 20px;
	}
	.aboutMe h1{
		font-size: 40px;
	}
	.card__body h3 {
		font-size: 20px;
	}
	  
	.card__body p {
		font-size: 16px;
		line-height: 1.4;
	}
	.card__header {
		padding: 20px 20px 30px;
	}
}
@media (max-width: 1100px){
	.home .MW{
		margin-left: 0px;
	}
	.socialbar li{
		margin: 0 65px;
	}
	.aboutMeParts{
		font-size: 20px;
	}
	.aboutMe h1{
		font-size: 35px;
	}
	.card__body p {
		font-size: 14px;
		line-height: 1.3;
	}
	.card__header h2 {
		font-size: 20px;
	}
}

@media (max-width: 991px){
	.socialbar li{
		margin: 0 60px;
	}
	.MW{
		padding: 0 50px;
	}
	.card__header {
		padding: 15px 15px 30px;
	}
	.card__body p {
		font-size: 14px;
		line-height: 1.3;
	}
	.card__header h2 {
		font-size: 22px;
	}
}

@media (max-width: 947px){
	.socialbar li{
		margin: 0 40px;
	}
	.MW{
		padding: 0 50px;
	}
	.home{
		background: url("all images\\mobileBack.png");
		background-size: 100%;
		background-position-y: 70px;
		
	}
	.navibar .menu{
		position: fixed;
		background: #FAEBD7;
		height: 100vh;
		width: 100%;
		left: -100%;
		top: 0;
		transition: all 0.5s ease-in-out;
		text-align: center;
		padding-top: 80px;
		z-index: 20;
	}
	.navibar .menu li{
		display: block;
	}
	.navibar .menu li a{
		display: inline-block;
		margin: 20px 0;
		font-size: 25px;
	}
	.menubtn{
		display: block;
		z-index: 100;
	}
	.navibar .menu.active{
		left: 0;
	}
	.aboutMe h1{
		width: 100%;
		max-width: 100%;
	}
	#myPhoto{
		max-width: none;
		min-width: none;
		width: 500px;
		
		padding-top: 20px;
		display:block;
		float: none;
		margin-left: auto;
		margin-right: auto;
	}
	.card__body h3 {
		font-size: 16px;
		padding-top: 0px;
	}
	  
	.card__body p {
		font-size: 13px;
		line-height: 1.3;
		padding-top: 0px;
	}
	.card__header h2 {
		font-size: 20px;
		padding-bottom: 0px;
		margin-bottom: 0px;
	}
	.card__header {
		padding: 12px 12px 30px;
	}
	#hcj{
		font-size: 40px;
	}
}
@media (max-width: 800px){
	.card{
		width: 75%;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	#ytvid{
		width: 50%;
		/*
			width="560" height="315"
		*/
	}
	#hcj{
		font-size: 60px;
	}
	.card__body h3 {
		font-size: 16px;
	}
	  
	.card__body p {
		font-size: 20px;
		line-height: 1.3;
	}
	.card__header h2 {
		font-size: 32px;
	}
	.card__header {
		padding: 20px 20px 40px;
	}
}
@media (max-width: 790px){
	.wrapper .center-line{
		left: 40px;
	}
	.wrapper .row{
		margin: 30px 0 3px 60px;
	}
	.wrapper .row section{
		width: 100%;
	}
	.row-1 section::before{
		left: -7px;
	}
	.row-1 section i{
		left: -60px;
	}
}
@media (max-width: 700px){
	#popup3 img{
		width: 100%;
	}
}
@media (max-width: 440px){
	.wrapper .center-line,
	.row section::before,
	.row section i{
		display: none;
	}
	.wrapper .row{
		margin: 10px 0;
	}
}
@media (max-width: 690px){
	
	.MW{
		padding: 0 23px;
	}
	.socialbar li{
		margin: 0 20px;
	}
	#myPhoto{
		width: 400px;
	}
	.aboutMeParts{
		font-size: 16px;
	}
	.aboutMe h1{
		font-size: 30px;
	}
	#hcj{
		font-size: 40px;
	}
	.card__body p {
		font-size: 17px;
		line-height: 1.3;
	}
}
@media (max-width: 550px){
	.card__body p {
		font-size: 15px;
		line-height: 1.3;
	}
}
@media (max-width: 500px){
	.card__body p {
		font-size: 14px;
		line-height: 1.3;
	}
	.MW{
		padding: 0 23px;
	}
	.socialbar li{
		margin: 0 20px;
		font-size: 30px;
	}
	#myPhoto{
		width: 300px;
	}
	.aboutMeParts{
		font-size: 14px;
	}
	.aboutMe h1{
		font-size: 30px;
	}
}
@media (max-width: 452px){
	.card__body p {
		font-size: 13px;
		line-height: 1.3;
	}
}
@media (max-width: 392px){
	.socialbar li{
		margin: 0 15px;
		font-size: 25px;
	}
	#myPhoto{
		width: 250px;
	}
	.aboutMeParts{
		font-size: 12px;
	}
	.aboutMe h1{
		font-size: 25px;
	}
	
	.card__header {
		padding: 5px 5px 5px;
	}
	.card__body h3 {
		font-size: 12px;
	}
	#hcj{
		font-size: 30px;
	}
	.card__body p {
		font-size: 11px;
		line-height: 1.2;
	}
}
@media (max-width: 312px){
	
	.MW{
		padding: 0 23px;
	}
	.socialbar li{
		margin: 0 10px;
		font-size: 20px;
	}
	#myPhoto{
		width: 200px;
	}
	.aboutMeParts{
		font-size: 12px;
	}
	.aboutMe h1{
		font-size: 20px;
	}
	.card__body p {
		font-size: 11px;
		line-height: 1.2;
	}
	.card__header {
		padding: 5px 10px 15px;
	}
	.card__body h3 {
		font-size: 13px;
	}
	.card__header h2 {
		font-size: 24px;
	}
	.card{
		width: 90%;
	}
}

@media (max-width: 250px){
	
	.MW{
		padding: 0 23px;
	}
	.socialbar li{
		margin: 0 5px;
		font-size: 20px;
	}
	#myPhoto{
		width: 170px;
	}
	.aboutMeParts{
		font-size: 12px;
	}
	.aboutMe h1{
		font-size: 20px;
	}
	.card__body p {
		font-size: 10px;
		line-height: 1.2;
	}
	.card__header {
		padding: 5px 10px 15px;
	}
	.card__body h3 {
		font-size: 13px;
	}
	.card__header h2 {
		font-size: 24px;
	}
	.card{
		width: 90%;
	}
	
}