/* Styles for iPhone */
/* Portrait and Landscape */
:root {
	--color-white: hsl(0, 0%, 100%);
	--color-light: hsl(206, 33%, 96%);
	--color-black: #040404;
    --color-black-2:hsl(0, 0%, 12.5%);
	--color-night: hsl(214, 100%, 10%);
    --color-beige:hsl(40, 30%, 85%);
	--shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Michroma ;
	color: var(--color-beige);
}
html {
	font-size: 100%;
	box-sizing: border-box;
	scroll-behavior: smooth;
	background-color: var(--color-black);
}
*, *::before, *::after {
	padding: 0;
	margin: 0;
	box-sizing: inherit;
	list-style: none;
	list-style-type: none;
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/*Phone only vertical*/

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
html{
	background-color: var(--color-black);
}   
body {
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}
main{
	display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}
a, button {
	cursor: pointer;
	border: none;
	outline: none;
	background: none;
	text-decoration: none;
}
img.nav-logo {
	/* display: block; */
    /* max-width: 15%; */
	height: auto;
}
.container {
	width: 100%;
	height: auto;
	margin: 0 auto;
	/* padding: 0 1rem; */
}
.navbar .menu {
	/* width: 100%; */
	/* max-height: 0rem; */
	padding: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	transition: all 0.35s ease;
}
.navbar .menu.is-active {
	opacity: 1;
	visibility: visible;
}
.navbar .menu-inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/* gap: 0.75rem; */
	/* padding: 3rem 0; */
}
.navbar {
	max-width: 100%;
	height: auto;
	/* margin: 0 auto; */
	/* padding: 0.75rem 0; */
	border: none;
	outline: none;
	color: var(--color-black);
	background: var(--color-black);
	box-shadow: var(--shadow-large);
}
.navbar .wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	width: 100%;
	height: auto;
	margin: 0 auto;
}


/* End of navbar */

/* Name animation */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
 .hero h1{
	color: var(--color-beige);
	text-align: center;
	font-size: 48px;
	font-style: normal;
	font-weight: 400;
	/* line-height: 145px; 302.083% */
	font-size: 42px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #2f2f2f, beige, #000);
    letter-spacing: 5.5px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    /* background-size: 80%; */
    animation: shine 3.5s linear infinite;
    align-items: center;
 }
  /* #first {
  
    
  } */
  #first::before {
    margin-top: -5em;
  }
  
  #first::after {
    content: "";
    display: flex;
    margin: auto;
    height: 2.3px;
    animation: underline 4 s infinite;
  }
  
  @keyframes underline {
    0% {
      width: 0%;
      background-color: rgb(239, 239, 239);
    }
    100% {
      width: 100%;
      background-color: transparent;
    }
  }
  
  #second {
    font-weight: 700;
    text-align: center;
    font-size: 40px;
    text-transform: uppercase;
    background: linear-gradient(90deg, #2f2f2f, beige, #000);
    letter-spacing: 5px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    /* background-size: 80%; */
    animation: shine 4s linear infinite;
    /* margin-top: -2em; */
  }
  
  @keyframes shine {
    0% {
      background-position-x: -500%;
    }
    100% {
      background-position-x: 500%;
    }
  }

  /* .fa-chevron-down{
	display: flex;
	justify-content: center;
	padding: 1.5rem;
	color: beige;
	opacity: 60%;
  } */
.about-section{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
  .about-title{
	color: var(--color-beige);
text-align: center;
font-size: 25px;
font-style: normal;
font-weight: 400;
line-height: 50px; /* 200% */
  }
  .underline{
	/* display: block; */
    height: 1px;
	width: 50%;
    border: 0;
    border-top: 1px solid var(--color-beige);;
    /* margin: 1em 0; */
    padding: 0;
  }
  
  .about-me{
	/* width: 179px; */
    height: auto;
    /* left: 105px;
    top: 1065px;
    position: absolute; */
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-right: 4px #F5F5DC solid;
    border-bottom: 4px #F5F5DC solid;
  }
  .about{

    width: 292px;
    /* height: 524px;
    left: 50px; */
    /* top: auto; */
    /* position: absolute; */
    text-align: center;
    /* color: white; */
    font-size: 12px;
    font-family: Michroma;
    font-weight: 400;
    line-height: 26px;
    word-wrap: break-word;

  }
}






@media only screen and (max-width: 768px) {
	.navbar .burger {
		/* display: block; */
		opacity: 1;
		visibility: visible;
	}
	.navbar .menu {
		width: 100%;
		max-height: 0rem;
		padding: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		transition: all 0.35s ease;
	}
	.navbar .menu.is-active {
		opacity: 1;
		visibility: visible;
	}
	.navbar .menu-inner {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* gap: 0.75rem;
		padding: 3rem 0; */
	}
}


/* Portrait */
@media only screen 
  and (max-device-width: 320px) { 
}

/* Landscape */
@media only screen 
  and (min-device-width: 321px) 
  and (max-device-width: 480px) { 
    
}
   /* Styles for Android Phones */
   /* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) { 
 
	
}

/* Standard Desktop screen*/
@media only screen 
  and (min-width: 1024px) {
	body{
		/* padding:20px; */
		display: grid;
		grid-template-columns:repeat(1,4fr);	
		gap: 0px;
	}
	/* Logo Resizing */
	.nav-logo{
		width: 8%;
	}
	/* Navigation */
	.navbar{
		display: flex;
	}
	main{
		display: flex;
		justify-content: center;
		align-items: center;
		/* aspect-ratio: 2; */
		/* border-radius: 20px; */
	}
    
	.hero{
		display: flex;
		align-items: center;
		text-align: start
	}
	.hero h1{
	position: relative;
	/* top: -3em; */
	font-size: 200px;
	}
	/* Images */
	.homePic{
		box-sizing: border-box;
		width: 45%;
		z-index: -9999;
	}
	.homeTitle{
		display: flex;
	}
	.about-me{

	display: flex ;
	width: 495px;
	border-right: 20px solid #F5F5DC;
	border-bottom: 15px solid #F5F5DC;
	background: url(<path-to-image>) lightgray 50% / cover no-repeat;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px rgba(0, 0, 0, 0.25), 0px 4px 4px 0px rgba(0, 0, 0, 0.25);

	}

}

/* Larger Screens */
@media only screen 
  and (min-width: 1280px) 
  and (min-height: 720px) {
}