@charset "utf-8";
/* CSS Document */
body {
 margin: 0pt auto;
background-size: cover;
background-attachment: fixed;
background-color: #e7ddcf;
}
	
.header {
width:90%;
margin:auto;
	display: flex;
	align-items: left;
	justify-content:space-between;
	position: relative;
	background: #e7ddcf;
	z-index: 10;		
	}
	
.logo {
	width:200px;
	margin:10px 0;	
}
	
.navbar {
width: 65%;
margin-left:10%;
position:relative;
margin-top: 50px;
z-index: 200;
}
	div.navbar li.selected a {text-decoration: underline;} 
		
	
.user img{
	width:50px;
	margin-top:50px;
	margin-right:80px;
	display: flex;
	align-items: left;
	justify-content:space-between;
	position:relative;
	z-index: 10;
}


#container {
  height: 412vh;  /* Larger height for scrolling */
  overflow: hidden;   /* Enable scrolling */
}	
	
.above_fold {
  height: 100vh;  /* Each section is one screen height */
  display: flex;
  justify-content: center;
  align-items: center;
}	
	
.block {
  height: 100vh;  /* Each section is one screen height */
  display: flex;
  justify-content: center;
  align-items: center;
}

#beige_one {
  background-color:#D9B6A3;
}
#intropix {
width: 1366px;
	height: auto;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}
#ind_a {
width:339px;
height:436px;
position:relative;
margin-left:5px;
margin-top:0px;
	}
#ind_b {
width:339px;
height:436px;
position:relative;
margin-left:344px;
margin-top:-436px;
	}
#ind_c {
width:339px;
height:436px;
position:relative;
margin-left:683px;
margin-top:-436px;
	}
#ind_d {
width:339px;
height:436px;
position:relative;
margin-left:1022px;
margin-top:-436px;
	}
#cream_one {
  background-color: #f0e1d1;
}

#promo {
width: 100%;
	height: auto;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}

#vintage {
width: 100%;
margin-top: -7.7%;
position: absolute;	
}


#voyages {
width:650px;
height:366px;
margin-right:auto;
margin-left:auto;
margin-top:0;
position:relative;
z-index:800;
	
 -webkit-box-shadow: 8px 8px 8px #111;
box-shadow: 8px 8px 8px #111;	
}



#caramel {
  background-image:url("../Images/Bucket_List.png");
  background-color: #bc9674;
}

#wishlist {
width: 100%;
	height: auto;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}



#cadeau {
margin-top:270px;
padding-bottom:20px;
z-index: 1000;
}

.media-element, p1 {
font-family: "Comic Sans MS";
font-size:22px;
color:#6c3623;
padding:3px 0 3px 0;
text-align: center;
}

.media-scroller {
  display: grid;
  gap: var(--_spacer);
  grid-auto-flow: column;
  grid-auto-columns: 21%;
  background: rgba(255,255,255,0.50);

  padding: 0 var(--_spacer) var(--_spacer);

  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.media-element {
  display: grid;
  grid-template-rows: min-content;
  gap: var(--_spacer);
  padding: var(--_spacer);
  background: var(--surface-2);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-2);
}

.media-element > img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.snaps-inline {
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: var(--_spacer, 1rem);
}

.snaps-inline > * {
  scroll-snap-align: start;
}

/* general styling */

.cadeau {
  inline-size: min(100% - 4rem, 70rem);
  margin-inline: auto;
}

.flow {
  display: grid;
  gap: var(--size-3);
}

.section-title {
  padding-inline-start: var(--size-6);
  margin-block: var(--size-9) var(--size-3);
}

	
#beige_two {
  background-color:#e7d1b5;
}

#gallery {
width: 100%;
	height: auto;
	position: relative;
	margin-right: auto;
	margin-left: auto;
}

#travel {
width: 100%;
margin-top: -7%;
position: absolute;	
}


#photos {
width:650px;
height:366px;
margin-right:auto;
margin-left:auto;
margin-top:100px;
position:relative;
z-index:800;
	
 -webkit-box-shadow: 8px 8px 8px #111;
box-shadow: 8px 8px 8px #111;	
}

#copyright {
margin-left: 70%;
padding-top:20px;
padding-bottom:27px;
position:relative;
font-family:"Segoe Print", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 30px;
color: #6c3623;
z-index: 20;
}
a:link {
    text-decoration: none;
}


@media only screen and (max-width: 1365px) and (min-width: 1201px) {
#intropix {
width: 100%;
	height: auto;
	position: relative;
	margin-right: 5%;
	margin-left: 5%;
}
#ind_a {
width:25%;
height:auto;
position:relative;
margin-left:0;
margin-top:0px;
	}
#ind_b {
width:25%;
height:auto;
position:relative;
margin-left:24%;
margin-top:-32.5%;
	}
#ind_c {
width:25%;
height:auto;
position:relative;
margin-left:49%;
margin-top:-32.5%;
	}
#ind_d {
width:25%;
height:auto;
position:relative;
margin-left:73.5%;
margin-top:-32.5%;
	}	


}
@media only screen and (max-width: 1920px) and (min-width: 1400px) {

}