/* CSS Document */
/* Desktop */
/*MEDIA 601+*/
@font-face {
	font-family: "Quicksand";
	font-display: swap;
	src: url(/font/Quicksand-Regular.woff2) format("woff2");
}

@media screen and (min-width: 601px) {
	* {
		box-sizing: border-box;
	}
	html{
		overflow-x:hidden;
	}
	/*Body*/
	body{
	
		font-family: "Quicksand", sans-serif;
/*Colors*/
		--my-first-color: #ff6C0C;
		--my-second-color: #3D4543;
		--my-third-color: #cacaca;
		--my-forth-color: white;

/*Font-Colors*/
		--my-first-font-color: #ff6c0C;
		--my-second-font-color: black;
		--my-third-font-color:#cacaca;
		--my-forth-font-color: white;

/*Fonts*/
		--my-font_p1: 200 1.4vw/1.3 'Quicksand', sans-serif;
		--my-font_p2: 300 1.0vw/1.2 'Quicksand', sans-serif;
		--my-font_p3: 300 0.1vw/1.0 'Quicksand', sans-serif;
		--my-font_h1: 300 3.0vw/1.0 'Quicksand', sans-serif;
		--my-font_a: 400 0.8vw/1.0 'Quicksand', sans-serif;
		--my-font_hero: 300 3.5vw/1.0 'Quicksand', sans-serif;

/*Buttons and borders*/
		--my-button-size: 8vw;
		--my-border: 2px var(--my-third-color) dashed;

		font: var(--my-font_p1);	
		background-color: var(--my-forth-color);
		margin: 0%;
	}
	h1 {
		font: var(--my-font_h1)
	}
	.span_1{
		font-weight: 800;
	}
	.span_2{
		color: var(--my-first-color)
	}
	/*Header*/	
	header{
		height: 10vh;
		width: 100%;
		position: sticky;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: var(--my-forth-color);
		border-bottom: 1px var(--my-first-color) solid;
		z-index: 99;
	}
	header img{
		display: flex;
		margin-left: 8vw;
		width: 10vh;
		align-items: center;
	}
	.btn_logo{
		transition: 0.5s;
	}
	.btn_logo:hover{
		transform: rotate(-5deg);
	}
	/*Navigation*/	
	nav{
		padding-right: 5rem;
	}
	nav ul {
		list-style: none;
		display: flex;
		gap: 2rem;
	}
	nav a{
		font: var(--my-font_a);
		text-decoration: none;
		color: var(--my-second-font-color);
		transition: color 0.3s;
	}
	nav a:hover{
		color: var(--my-first-color);
	}
	.btn_header{
		color: var(--my-second-color);
		background-color: var(--my-forth-color);
		border: 1px var(--my-first-color) solid;
		border-radius: 100px;
		margin-right: 8vw;
		padding: 1vh 1vw;
		font: var(--my-font_a);
		text-decoration: none;
	}
	.btn_header:hover{
		color: var(--my-forth-font-color);
		background-color: var(--my-first-color);
	}
	.btn_header:active{
		color: var(--my-forth-font-color);
		background-color: var(--my-second-color);
		border-color: var(--my-second-color);
	}
	/*Main*/
	main{
		padding: 0rem 10rem;
	}
	.hero {
		height: 22vh;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0;
	}
	.hero p{
		font: var(--my-font_hero);
		color: var(--my-first-color);
	}
	/*About me*/	
	.ab {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 65vh;
		align-items: center;
		padding: 0vh 5vw;
		gap: 5vw;
		border: var(--my-border);
		border-radius: 30px;
		background: url("../img/png/bg.png") bottom left;
	}
	.ab_grid_1{
		grid-column: 1 / 2; 
		grid-row: 1 / 2;
	}
	.ab_grid_1 img{
		max-width: 25vw;
		padding-left: 5vw;
	}
	.ab_grid_2{
		grid-column:2 / 3; 
		grid-row: 1 / 2;
	}
	.ab_grid_2 p{
		color: var(--my-second-color);
		transform: rotate(3deg)
	}
	/* Content Part I - Title*/
	.l1_tit{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 55vh;
		align-items: flex-end;
		justify-items: start	;
		background: url("../img/png/bg_25.png") no-repeat bottom left;
		background-size: 40%;
	}
	.l1_tit_grid_1 {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		padding-left: 4.5vw;
	}
	.l1_tit_grid_1 h1{
		color: var(--my-first-color);
	}
	.l1_tit_grid_2 {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.l1_tit_grid_2 img{
		width: 40vw
	}
	/*Learning 1*/	
	.l1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 65vh;
		justify-content: center;
		align-items: center;
		padding: 0vh 5vw;
		gap: 5vw;
		border: var(--my-border);
		border-radius: 30px;
		background: url("../img/png/bg.png") bottom left;
	}
	/*Learning1-Left Div*/
	.l1_grid_1{
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	.l1_grid_1 p{
		color: var(--my-second-color);
		transform: rotate(-3deg);
	}
	/*Learning1-Right Div*/
	.l1_grid_2{
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.l1_btn{
		height: var(--my-button-size);
		width: var(--my-button-size);
		font: var(--my-font_p2);
		text-decoration: none;
		color: var(--my-forth-font-color);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 8%;
		transition: 0.4s;
		position: relative;
		text-align: center;
	}	
	#l1_btn_1{
		background-color: var(--my-third-color);
		transform: rotate(-9deg);
		top: 5vh;
		left: 10vw;
	}
	#l1_btn_2{
		background-color: var(--my-first-color);
		transform: rotate(9deg);
		top: 12vh;
		left: 7vw;
	}
	#l1_btn_3{
		background-color: var(--my-second-color);
		transform: rotate(-20deg);
		top: -12vh;
		left: 22vw;
	}
	#l1_btn_1:hover, 
	#l1_btn_2:hover, 
	#l1_btn_3:hover{
		font-weight: 400;
		opacity: 1;
		transform: rotate(360deg);
		scale: 1.4;
		position: relative;
		z-index: 50;
	}
	/* Content Part I - Title*/
	.l2_tit{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 55vh;
		align-items: flex-end;
		justify-items: end;
		background: url("../img/png/bg_26.png") no-repeat bottom right;
		background-size: 40%;
	}
	.l2_tit_grid_1 {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		padding-left: 4.5vw;
	}
	.l2_tit_grid_1 img{
		width: 40vw
	}
	.l2_tit_grid_2 {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
		padding-right: 4.5vw;
	}
	.l2_tit_grid_2 h1{
		color: var(--my-first-color);
		padding-left: 9vw;
	}
	/*Learning 2*/	
	.l2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 65vh;
		justify-content: center;
		align-items: center;
		padding: 0vh 5vw;
		gap: 5vw;
		border: var(--my-border);
		border-radius: 30px;
		background: url("../img/png/bg.png") bottom left;
	}
	/*Learning1-Left Div*/
	.l2_grid_1 {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
	}
	.l2_btn{
		height: var(--my-button-size);
		width: var(--my-button-size);
		color:white;
		font: var(--my-font_p2);
		text-decoration: none;
		background-color: var(--my-second-color);
		border-radius: 8%;
		transition: 0.5s;	
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}	
	#l2_btn_1{
		transform: rotate(-12deg);
		top: 285vh;
		left: 15vw;
	}
	#l2_btn_2{
		transform: rotate(-5deg);
		top: 285vh;
		left: 26vw;
	}
	#l2_btn_3{
		transform: rotate(8deg);
		top: 285vh;
		left: 37vw;
	}
	#l2_btn_4{
		transform: rotate(10deg);
		top: 307vh;
		left: 15vw;
	}
	#l2_btn_5{
		transform: rotate(-7deg);
		top: 307vh;
		left: 26vw;
	}
	#l2_btn_6{
		transform: rotate(6deg);
		top: 307vh;
		left: 37vw;
	}
	#l2_btn_1:hover, 
	#l2_btn_2:hover, 
	#l2_btn_3:hover, 
	#l2_btn_4:hover, 
	#l2_btn_5:hover, 
	#l2_btn_6:hover{
		background-color: var(--my-first-color);
		scale: 1.3;
		z-index: 50;
	}
	#l2_btn_1:hover{
		transform: rotate(6deg);
	}
	#l2_btn_2:hover{
		transform: rotate(4deg);
	} 
	#l2_btn_3:hover{
		transform: rotate(-8deg);
	} 
	#l2_btn_4:hover{
		transform: rotate(-8deg);	
	}	
	#l2_btn_5:hover{
		transform: rotate(7deg);
	} 
	#l2_btn_6:hover{
		transform: rotate(-6deg);
	}
	
	.l2_grid_2{
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.l2_grid_2 p{
		color: var(--my-second-color);
		transform: rotate(3deg)
	}
	
	/*Content Part III - Title*/
	.so_tit{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 55vh;
		align-items: flex-end;
		justify-items: start	;
		background: url("../img/png/bg_27.png") no-repeat bottom left;
		background-size: 40%;
	}
	.so_tit_grid_1 {
		grid-column: 1 / 2;
		grid-row: 1 / 2;
		padding-left: 4.5vw;
	}
	.so_tit_grid_1 h1{
		color: var(--my-first-color);
	}
	.so_tit_grid_2 {
		grid-column: 2 / 3;
		grid-row: 1 / 2;
	}
	.so_tit_grid_2 img{
		width: 40vw
	}
	.so {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 55vh;
		align-items: center;
		padding: 0vh 5vw;
		margin-bottom: 20vh;
		gap: 5vw;
		border: var(--my-border);
		border-radius: 30px;
		background: url("../img/png/bg_blog.png") no-repeat right bottom;
		background-size: 100%;
		background-color: var(--my-forth-color);
	}
	.so_grid_1 {
		grid-column: 1 / 2; 
		grid-row: 1 / 2;
	}
	.so_grid_1 p {
		color: var(--my-second-color);
		transform: rotate(2deg);
	}
	.so_grid_2 {
		grid-column: 2 / 3; 
		grid-row: 1 / 2;
	}
	.so_grid_2 a{
		height: var(--my-button-size);
		width: var(--my-button-size);
		color: var(--my-forth-font-color);
		text-decoration: none;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #3D4543;
		border-radius: 8%;
		transition: 0.5s;
		position: relative;		
	}
	.so_btn_1 {
		transform: rotate(-7deg);
		top: -5vh;
		left: 0vw;
	}
	.so_btn_2 {
		transform: rotate(12deg);
		top: 5vh;
		left: 0vw;
	}
	.so_btn_1:hover, 
	.so_btn_2:hover {
		background-color: var(--my-first-color);
		scale: 1.3;
		z-index: 50;
	}
	.so_btn_1:hover{
		transform: rotate(3deg);
	}
	.so_btn_2:hover{
		transform: rotate(-4deg);
	} 
	/*Information*/
	.inf {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 10vh 0vw;
		text-transform: uppercase;
		letter-spacing: 0.5vw;
		font: var(--my-font_p2);
		color: var(--my-forth-font-color);
		background-color: var(--my-third-color);
	}
	/*Footer*/
	footer {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 4vh 0vw;
		text-transform: uppercase;
		letter-spacing: 0.5vw;
		font: var(--my-font_p2);
		color: var(--my-forth-font-color);
		background-color: var(--my-second-color);
	}
	.up{
		height: 6vh;
		width: 3.5vw;
		position: fixed;
		bottom: 0;
		right: 2vw;
		text-align: center;
		line-height: 7vh;
		background-color: var(--my-first-color);
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		text-decoration: none;
		color: var(--my-forth-font-color);
		opacity: 80%;
		transition: 0.3s;
	}
	.up a{
		text-decoration: none;
		font: var(--my-font_p2);
		color: var(--my-forth-font-color);
	}
	
	.up:hover{
		height: 7vh;
		border-top-left-radius: 48%;
		border-top-right-radius: 48%;
	}
	.outer-menu{
	display: none;
	}
	}