/*Import Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');

/****************************************************/
/********************  1 - NAV   ********************/
/****************************************************/
nav{
	display: inline-flex;
	/*Puts space between .logo, list, & button.
	  Used w/ flex containers only.*/
	justify-content: space-between;
	/*puts .logo, list, & button in the center of their
	  respective text boxes. Works w/ flexboxes (or grids).*/
	align-items: center;
	/*padding & border are included in width & height*/
	box-sizing: border-box;
	margin: 0;
	height: 55px;
    background-color: #f6cb06;
    font-size: min(16px, 3.5vw);

    /*variables*/
    --menu-exterior-padding: 2vw;
}

/****************************************************/
/******************** 1.1 - Logo   ******************/
/****************************************************/
.logo{
	/*Turns  cursor into a pointer when hovered over*/
	cursor: pointer; 
	width: 50px; 
	padding-left: var(--menu-exterior-padding);
}


/****************************************************/
/******************** 1.2 - List   ******************/
/****************************************************/

/*Removes full screen nav-options on small screen devices*/
@media screen and (max-width: 650px){
	.nav-options-fullscreen{
		display: none;
	}
}

nav ul li{
	display: inline-flex;
	/*font & backup font here*/
	font-family: "Montserrat", 'sans-serif';
	font-weight: 500;
	padding: 0px .7vw;
}

nav ul li a{
	/*Remove link highlighting & underline*/
	text-decoration: none; 
	color: black;
}

/*hover pseudo-class*/
nav ul li a:hover{
	/*all means all properties, can specify just one
	  instead like 'width'*/
	transition: all 0.3s ease 0s;
	color: white;
	text-decoration: underline;
	text-underline-offset: 20.5px;
}

/****************************************************/
/******************** 1.3 - Button ******************/
/****************************************************/

.button-link{
	padding-right: var(--menu-exterior-padding);

    /*remove the button on smaller screens, we will use
      a hamburger menu instead*/
	@media only screen and (max-width: 650px) {
		display: none;
    }
}

nav a button{
	/*top-bottom, left-right*/
	padding: 9px 20px;
	border: none;
	/*makes an oval*/
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease 0s;
	/*gradient direction, color & color-stop, color & color start*/
	/*uninitative color starts & stops create a blend effect/look*/
	background-image: linear-gradient(to bottom, #ADD8E6 0, #3483eb 100%);
}

nav a button:hover{
	/*creates a changing colors effect when hovering over it*/
	background-image: linear-gradient(to bottom, #669ed4 0, #5998d4 100%);
}



/****************************************************/
/********** 1.2 & 1.3 Alt - Hamburger Menu **********/
/****************************************************/
.ham-menu{
	display:none;
    
    /*ham-menu is enabled on small screen devices*/
    @media only screen and (max-width: 650px) {
    	display: flex;
    	width: 50px;
    	z-index: 1; /*makes nav-sidescreen appear in front of all non z-indexed items*/
    }
}

@media only screen and (max-width: 650px) {
	.ham-menu:hover{
		cursor: pointer;
	}

	.ham-menu span{
		/*position of ham-menu bars ('spans') is absolute relative to the parent*/
		/*The 'top' property only works on posistioned elements so we have to set 'position'*/
		/*'relative' means positioned relative to a normal position whereas 'absolute means 
		   positioned relative to one's parent. 'Absolute' was chosen because the 'top' property
		   below is working relative to a parent/grandparent.*/
		position: absolute;
		background-color: black;
		height: 3.9px;
		width: 30px;
		/*move spans horizontally left & veritically up respectively */
		transform: translate(-3px, -3px); 
		border-radius: 25px;
		transition: .3s ease; /*On click*/
	}

	.ham-menu span:nth-child(1) {
	    top: 19px;
	}

	.ham-menu span:nth-child(3) {
	    top: 36px;
	}

    /*The active pseudo class is set on click (via javascript)*/
	.ham-menu.active span {
	    background-color: white;
	    /*'fixed' allows the ham-menu to move with a user's scroll, think fixed position on screen*/
	    position: fixed; 
	}
	.ham-menu.active span:nth-child(1) {
	    /*makes half the "X" aka the close window button*/
	    /*translates to the left & down*/
	    transform: translate(-5px, 8.8px) rotate(45deg);
	}
	.ham-menu.active span:nth-child(2) {
	    opacity: 0; /*disappears middle span*/
	}
	.ham-menu.active span:nth-child(3) {
	    /*makes the other half of the "X" aka for the close window button*/
	    /*translates to the left & up*/
	    transform: translate(-5px, -8.8px) rotate(-45deg); 
	}
}


/****************************************************/
/***********  2 - nav-sidescreen   ******************/
/****************************************************/
.nav-sidescreen{
	display: none;

	@media only screen and (max-width: 650px) {
		height: 100vh; /*screen will take up viewport height equal to 100%*/
		width: 280px;
		display: flex;
		/*'fixed' allows the nav-sidescreen to move with a user's scroll, 
		   think fixed position on screen. */
		position: fixed; 

        /*When inactive, the sidescreen will be 'offscreen' & thus not appear*/
		/*Note, you have to set the position to 'fixed' to allow it to be hidden when offscreen 
		  since 'fixed' means relative to the viewport.*/
		right: -300px;
		top: 0;
		background-color:  rgb(34, 37, 49);

		/*aligns content equally along the main axis. Since the flex direction 
		  is row, the main axis is the x-axis.*/
		justify-content: center; 
		/*aligns content equally along the cross axis. Since the flex direction 
		  is row, the cross axis is the y-axis.*/
		align-items: center;
		font-size: 33px;
		transition: .3s ease; /*on click*/
		z-index: 1; /*makes nav-sidescreen appear in front of all non z-indexed items*/
	}
}


@media only screen and (max-width: 650px) {
	.nav-sidescreen ul{
		 /*makes list be not bulleted & not numbered*/
		 list-style: none; 
	}

	.nav-sidescreen ul li a{
		 text-decoration: none; /*removes hyperlink underline*/
		 color: white;
		 font-family: sans-serif;
	}

	.nav-sidescreen ul li a:hover{
		color: #6F86FF;
	}

	/*With the 'active' pseudo class, you can style an element that is being activated by a user*/
    /*For this menu, javascript is toggling the active, but with pure css, a checkbox being clicked
     for example can make that checkbox active*/
	.nav-sidescreen.active {
		/*This makes the side menu's right side flush with the right side of the screen after a
		  user selects the hamburger icon*, meaning it will make the nav-sidescreen appear on-screen*/
    	right: 0; 
	}
}