/* scrolling side bar */

/* 1. Enable smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* 2. Make nav sticky */
main > nav {
	position: sticky;
	top: 2rem;
	align-self: start;
}



/* 3. ScrollSpy active styles (see JS tab for activation) */
.section-nav li.active > a {
	color: #000000;
	font-weight: 500;
	font-family: Lucida Bright;

}

/* Sidebar Navigation */
.section-nav {
	padding-left: 0;
	border-left: 1px solid #E6CB99;

}

.section-nav a {
	text-decoration: none;
	display: block;
	padding: .135rem 0;
	color: #404040;
	font-family: Lucida Bright;

	transition: all 50ms ease-in-out; /* 💡 This small transition makes setting of the active state smooth */
}

.section-nav a:hover,
.section-nav a:focus {
	color:#000000;
	font-family: Lucida Bright;

}

ul, ol {
	list-style: none;
	margin: 0;
	padding-bottom: : 0;
}
li {
	margin-left: 5rem;
}

/** page layout **/
main {
	display: grid;
  grid-template-columns: 1fr 15em;
	max-width: 100em;
	width: 90%;
	margin: 0 auto;

}



/** enlarge the sections for this demo, so that we have a long scrollable page **/
section {
	padding-bottom: 10rem;
}

/* end of scroll css */







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

body {
  font-family: Lucida Bright;
  background-color: #E6CB99;
  color: #000000;


}

p{

  font-family: Trebuchet MS;
  font-size: 18px;
  text-align: justify;
  text-justify: inter-word;
  padding-left:20%;
  padding-right: 20%;
}



/* Centering all the content, and justify them and displaying them on the same row */
.top-bar-container {
  margin: auto;
  width: 40%;
  height: 100%;
  padding: 0 10px;

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
}

.top-bar-misc-container {
  grid-column: 2/-1;
  padding-right: 15px;
  justify-self: end;
}




img{

max-width: 100%;
height: auto;

}


video {
	max-width: 100%;
	height: auto;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 20%;
	width: 60%;
	height: 100%;
}




/* ----------------------MOBILE VERSION------------------------------- */

/* Depending on the size, we adjust the width to make it look better */
@media only screen and (max-width: 1440px) {
  /* Remove the min-width and width conditions from the containers */
  .container {
    width: 100%;
    min-width: none;
    height: auto;
    float: left;
  }

  .div {
    width: 100%;
    min-width: none;
    height: auto;
    float: left;
  }

  .section-nav {
  width: 100%;

  }

}

@media only screen and (max-width: 768px) {
  /* Remove the min-width and width conditions from the containers */
  .container {
    width: 100%;
    min-width: none;
    height: auto;
    float: left;
  }

  .div{
    width: 100%;
    min-width: none;
    height: auto;
    float: left;
  }

  .section-nav {
  width: 50%;

  }

}






@media only screen and (max-width: 480px) {
  /* Remove the min-width and width conditions from the containers*/
  .container {
    width: 100%;
    min-width: none;
    height: auto;
    float: left;
  }

  .div {
    width: 100%;
    min-width: none;
    height: auto;
    float: left;
  }

  .section-nav {
  width: 50%;

  }

}










/*=========================================================================
3. Working on the navigation bar
===========================================================================*/

/* -----------------------MOBILE VERSION------------------------------------ */

/* Contains everything */

.nav-container {
  font-weight: 700;
  background-color: black;
  color: white;
  height: auto;
  padding: 1em 0;
}


/* In mobile the anchors need to be in column form */
.nav-content {
  display: flex;
  flex-direction: column;
  gap: 2em;
  font-family: monospace ;
}



/* --------------------DESKTOP VERSION----------------------- */

@media only screen and (min-width: 1024px) {
  /* hides menu and cross button when in desktop */
  .nav {
    width: 50%;
    /* margin: auto; */

  }

  /* .div {
    width: 50%;
  } */

  /* .section-nav {
  width: 50%;

  } */

  .nav-toggle {
    display: none;
  }

  /* removing padding for better appearance */
  .nav-container {
    padding: 1em;
  }

  /* The content needs to be displayed in a row in desktop mode */
  .nav-content {
    /* flex-direction: row; */
    gap: 0;
    height: 100%;
    /* text-align: justify;
    text-justify: inter-word; */
    font-family: monospace ;
  }

}







/*---------------------------------------------------------------
4.Working on the End bar (search, cart, catchphrase)
----------------------------------------------------------------- */

/* ------------------------DESKTOP VERSION----------------------- */

/* Centering all of the content */
.end-header-bar-container {
  height: 80px;
}

.end-header-bar {
  width: 50%;
  height: 100%;
  margin: auto;
  padding: 0 10px;

  justify-items: center;
  align-items: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow: column;
  column-gap: 30px;
}



/* ----------------------MOBILE VERSION------------------------------- */
/* Depending on the size, we adjust width it to make look as good as possible */
@media only screen and (max-width: 1440px) {
  /* Remove the min-width and width conditions from the containers */
  .end-header-bar {
    width: 75%;
    min-width: none;
  }
}

@media only screen and (max-width: 1024px) {
  /* Remove the min-width and width conditions from the containers */
  .end-header-bar {
    width: 90%;
    min-width: none;
  }
}

@media only screen and (max-width: 768px) {
  /* Remove the min-width and width conditions from the containers */
  .end-header-bar {
    width: 100%;
    min-width: none;
  }

}