/*General Styles*/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-family: "DM+Serif", "Quicksand", "Oooh+Baby", "sans-serif";
	color: #555;
}

 /*  /////NB NB NBthis means no bullet points*/
 ul,
nav {
	list-style: none;
}

a {
	text-decoration: none;
	opacity: 0.75;
	color: #f5f5f5;
}

a:hover {
	opacity: 1;
}

/*a.btn {
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: bold;
	text-align: center;
	background-color: #3f51b5;
	opacity: 1;
}*/

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100px 80px; /*100px 80px*/
}

section:not(.home):nth-child(even) { /*Preject section background must not be white!!! excluding the hero section, all sections must switch from having 
	a white backhround to light gray background*/   /*section:not(.hero):nth-child(even)*/
	background-color: #f5f5f5;
}

.grid { /*for the images*/
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

hr { /*that small green line*/
	width: 250px;
	height: 3px;
	background-color:  #4b6b59;
	border: 0;
	margin-bottom: 50px;
}

section h3.title { /*those titles / nav bar title names*/
	text-transform: capitalize;
	font: bold 32px "Oooh+Baby"; /*"Open Sans", sans-serif;*/
	margin-bottom: 30px;
	text-align: center;
}

section p { /*actual paragraph texts*/
	max-width: 775px;
	line-height: 2;
	padding: 0 20px;
	margin-bottom: 30px;
	text-align: center;
}

@media (max-width: 800px) { /*@media (max-width: 800px) NB NB NB for when the max width is 800px (when the screen width is small). 
	The padding(the space between the text and border) is reduced GENERAL STYLE RULES SETTING FOR CELLPHONE VIEW*/
	section {
		padding: 50px 20px; /*50px 20px*/
	}
}

/*Header Styles* 0 nav bar & my name nav bar & name*/

header { /*/////NB NB NB*/
	position: absolute;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 35px 100px 0;
	animation: 1s fadein 0.5s forwards;
	opacity: 0;
	color: #fff;
	font-weight: bolder; /*I added this*/
	/*RAY*/
	background-color: #3c4e44;
	
}

@keyframes fadein {
	100% {
		opacity: 1;
	}
}

header h2 { /*/////NB NB NB*/
	font-family: "Quicksand"; /*I added this. it used to be:  "quicksand" "sans-serif" */
	border-radius: 4px;					/*I added all the rest of this*/
	text-transform:none;
	font-weight: bold;
	text-align: center;
	background-color: #3c4e44;
	opacity: 1;
}

header nav { /*/////NB NB NB */
	display: flex;
	
	font-family: "Quicksand"; /*I added this. it used to be:  "quicksand" "sans-serif" */
	border-radius: 4px;					/*I added all the rest of this*/
	text-transform:none;
	text-align:center;
	background-color: #3c4e44;
	opacity: 1;
	align-items: center;
	
}

/*header nav {
	font-family: "Quicksand";
	display: flex;  /*I added all the rest of this
	margin-right: -15px;
	border-radius: 4px;
	text-transform: none;
	font-weight: bold;
	text-align:center;
	background-color: #3c4e44;
	opacity: 1;
}*/


header nav li { /*/////NB NB NB*/
	margin: 0 15px;
	position: relative;
	
}

/*//////RAY HEADER PART///*/

main{
    margin-top: 6rem;
}

/*header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 60rem;
    height: 5rem;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid red;
    background-color: #3c4e44;
}*/

header h2 a {
    font-weight: bold;
    font-size: 2rem;
}

header nav {
    display: none;
}

header nav  {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction:row;
    justify-content: space-around;
}

header nav li {
    margin: 0 0.5rem;
}

/*.mobile-menu-btn {
    cursor: pointer;
    font: inherit;
    border: 1px solid orchid;
    border-radius: orange;
    background-color: transparent;
    padding: 0.5rem 1rem; 
}*/

  /*#mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border: none;
    cursor: pointer;
    width: 2.25rem;
    height: 2.25rem;
    background-color: transparent;
    padding: 0;
}

 #mobile-menu-btn span {
   width: 2.25rem; 
   height: 0.2rem;
   background-color: black;
}*/


#mobile-menu {
    position: fixed;
    top: 5rem;
    left: 0;
    height: calc(100vh - 5rem);
    width: 100%;
    background-color: yellow;
    display: none;
    flex-direction: column;
    align-items: center;
}

#mobile-menu.open {
    display: flex;  
}

#mobile-menu nav {
    height: 20rem;
    width: 90%;
    margin: 1rem auto;
}

#mobile-menu nav li a
/*,header #mobile-menu-btn span {
    font-size: 1.75rem;
    color: red;

}

@media (max-width: 800px) /*@media (max-width: 800px) a media query that only applied to 
desktop sizes the stuff in this size will become active . A SOON AS YOU CROSS THIS THRESHOLD,
THE MENU BUTTON MUST BE NONE*/ { 
	
	main{
        margin-top: 0;
    }

   header {
        position: static;
    }

    header nav {
        display: block; 
    }

    /*header nav li button {
        color: red;
        border-color: green;
    }*/

    #mobile-menu-btn {
        display: none;
    }

    #mobile-menu{
        display: none;
    }    
    
    header nav {
        flex-direction: row;
    }

    header nav li a {
       padding: 0.5rem 1rem; 
       border-radius: 4px;
    }

    header nav li a:hover,
    header nav li a:active {
       background-color: #4b6b59; 
    }
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/* NB NB NB for when the max width is 800px (when the screen width is small). 
	The padding(the space between the text and border) is reduced. 
	tHE PASDDING AROUND THE NAV BAR IS REDUCED TOO	.set to column so that a drop down shows*/
	
	/* 	origional
	header {
		padding: 20px 50px; 
		flex-direction: column;	
		align-items: center;	
	}

	header h2 {
		margin-bottom: 15px;
	}
		
	header nav {
        display: block; 
    }

	*/
/*/////////////////////////////// RAY WEBSITE ////////////////////////////////*/
	/*main{
        margin-top: 0;
    }

    #main-header {
        position: static;
    }

    #main-header nav {
        display: block; 
    }

    header nav li button {
        color: var(--color-primary-500);
        border-color: var(--color-primary-500);
    }

    #mobile-menu-btn{
        display: none;
    }

    #mobile-menu{
        display: none;
    }    
    
    header nav li {
        flex-direction: row;
    }

    header nav li a {
       padding: var(--space-2) var(--space-4); 
       border-radius: var(--border-radius-small);
    }

    header nav li a:hover,
    header nav li a:active {
       background-color: red; 
    }*/

}

/*/////////////////////////////////////////////////////////////////////////     HOME SECTION     ////////////////*/
/*Hero Styles wallpaper section */ /*.hero*/

.home { /*welcome to my page test*/
	position: relative;
	justify-content: center;
	text-align: center;
	min-height: 100vh; /*this is changed in cellphone view*/
	color: #fff;	
}
.home .background-image { /*background image for welcome to my page text*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	z-index: -1;
	/*background-color: #80a3db;*/
}
.home h1 { /*styling the content in the headline(nav section)*/
	font: bold 60px "Quicksand"; /*"Open Sans", sans-serif;*/
	margin-bottom: 15px;
	border-radius: 4px;
	text-transform: none;  /*I added all the rest of this*/
	font-weight: bold; /*I added all the rest of this*/
	text-align: center; /*I added all the rest of this*/
	background-color: #4b6b59; /*I added all the rest of this*/
	opacity: 1; /*I added all the rest of this*/
}
.home h3 { /*styling the content in the headline(nav section)*/
	text-transform: none;  /*I added all the rest of this*/
	font-weight: bold; /*I added all the rest of this*/
	text-align: center; /*I added all the rest of this*/
	background-color: #3c4e44; /*I added all the rest of this*/
	opacity: 1; /*I added all the rest of this*/
	font: normal 40px "Open Sans", sans-serif; /*"Open Sans", sans-serif; 28px*/
	margin-bottom: 40px;
}
.home-content-area {
	opacity: 0;
	margin-top: 100px;
	animation: 1s slidefade 1s forwards;
}
@keyframes slidefade { /*aniation for 0 & 1*/
	100% {
		opacity: 1;
		margin: 0;
	}
}
@media (max-width: 800px) {/*wallpaper section. I will reduce the min-height from 
	100vh to 600px NB NB NB cellphone view uses px*/
	.home {
		min-height: 600px;
	}
	.home h1 {
		font-size: 48px;
	}
	.home h3 {
		font-size: 24px;
	}
}

/*/////////////////////////////////////////////////////////////////////////     ABOUT ME SECTION     ////////////////*/
/*Destinations Section*/ /*About me section with paragraph and images of what I like*/

.link {
	text-decoration: none;
	opacity: 0.75;
	color: /*#f5f5f5*/  #1a6385;
}
.about-me .grid li { /*I will add list items inside my grid class inside my destination class*/
	height: 350px;
	padding: 20px;
	background-clip: content-box;
	background-size: cover;
	background-position: center;
}
.about-me .grid li.small {
	flex-basis: 30%;
}

@media (max-width: 1100px) {/* @media (max-width: 1100px)how the images will be viewed*/
	.about-me .grid li.small
	{
		flex-basis: 50%;
	} 
}

@media (max-width: 800px) {/*how the images will be viewed*/
	.about-me .grid li.small
	 {
		flex-basis: 100%;
	}
}

/*/////////////////////////////////////////////////////////////////////////     PROJECTS SECTION     ////////////////*/
/*Packages Section*/ /*-projects section-*/

/*.packages .grid li {
	padding: 50px;
	flex-basis: 50%;
	text-align: center;
}

.packages .grid li i {
	color: #8c9eff;
}

.packages .grid li h4 {
	font-size: 30px;
	margin: 25px 0;
}*/

@media (max-width: 800px) {
	.projects .grid li {
		flex-basis: 100%; /*more important than width and height*/
		padding: 20px;
	}
}

/*/////////////////////////////////////////////////////////////////////////  WORK EXPERENCE SECTION    ////////////////*/

/*Testimonials Section*/ /*Work experience section*/
 .grid li { /*I will add list items inside my grid class inside my destination class*/
	height: 330px;
	padding: 30px;
	background-clip:padding-box;
	background-size:cover;
	background-position:center;
}
 .grid li.small {
	flex-basis: 40%;
}
.work-experience {
	font-size: 22px;
	font-weight: 300;
	line-height: 1;
	margin:0;
	
}
@media (max-width: 800px) {
	.work-experience .quote {
		font-size: 18px;
		margin: 15px 0;
	}

	.work-experience .author {
		font-size: 14px;
	}
}
/*.grid {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}*/

/*/////////////////////////////////////////////////////////////////////////  SKILLS SECTION    ////////////////*/

.skills {
	
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	background-clip: content-box;
	background-size: cover;
	background-position: center;	
	padding: 20px 0;
}

/*
.destinations .grid li {
	height: 350px;
	padding: 20px;
	background-clip: content-box;
	background-size: cover;
	background-position: center;

.testimonials .quote {
	font-size: 22px;
	font-weight: 300;
	line-height: 1.5;
	margin: 40px 0 25px;
}

.destinations .grid li.small {
	flex-basis: 30%;
}

}

*/
/*/////////////////////////////////////////////////////////////////////////  CONTACT ME SECTION    ////////////////*/
/*Contact Section*/ /*skills section*/

.contact form {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap; /*you will wrap the content inside a 60% width*/
	width: 60%;
}

/*.contact form .btn {
	padding: 18px 42px;
}

.contact form input {
	padding: 15px;
	margin-right: 30px;
	font-size: 18px;
	color: #555;
	flex: 1;
}*/

@media (max-width: 800px) { /*1000px must go to work experience. NB NB MIGHT NOT BE NEEDED*/
	.contact form input {
		flex-basis: 100%;
		margin: 0 0 20px 0;
	}
}

/*/////////////////////////////////////////////////////////////////////////  QUOTE SECTION    ////////////////*/

/*Footer Section*/

footer p {
	font-family: "Oooh+Baby" ;
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #607d8b;
	color: #fff;
	padding: 20px 0;
}

footer ul {
	display: flex;
}

footer ul li {
	margin-left: 16px;
}

footer p .quote{
	font-family:"cursive" ;
	text-transform: none;
	font-size: 14px;
	opacity: 0.6;
	align-self: center;
}

@media (max-width: 800px) {
	footer {
		flex-direction: column;
	}

	footer p {
		text-align: center;
		margin-bottom: 20px;
	}

	/*footer ul li {
		margin: 0 8px;
	}*/
} 






/* {
    box-sizing: border-box; 
}

html {
    font-family: "Ariel", "sans-serif";

  --color-primary-50: rgb(31, 155, 226);
  --color-primary-300: rgb(99, 92, 86);
  --color-primary-50: rgb(205, 81, 236);
  --color-primary-50: rgb(125, 226, 142);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
}

body{
    background-color:var(--color-primary-50);
    color: var(--color-primary-300);
    margin: 0;
}

main{
    margin-top: 6rem;
}

#main-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 60rem;
    height: 5rem;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(---color-primary-50);
    background-color: var(--color-primary-50);
}

#logo a {
    font-weight: bold;
    font-size: 2rem;
}

.nav-items {
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
}

.nav-items li {
    margin: 0 var(--space-2);
}

#intro{
    text-emphasis-color: black;
}
 */