/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

.landingpic img{
height: auto;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
 }

/*
1. Place all children next to each other.
2. Allow children to wrap to a new line, if they don't fit next to each other.
3. Set spacing between the children.
*/
.image-row {
    display: flex;      /* 1 */
    flex-wrap: wrap; /* 2 */
    gap: 8px;         /* 3 */
    position: absolute; top:200px; left:150px;
}

/* Remove default margin from figure elements nested inside an element belonging to the "image-row" class. */
.image-row figure {
    margin: 0;
}


 
#content {
   width: 400px;
   margin: 0 auto;
   align-items: center;
    display: grid;
    
   background-color: #66ffff;
}

body {
	background-color: #f8fafc;
}

.container {
	padding: 2rem;
}

.slider-wrapper {
	position: relative;
	max-width: 48rem;
	margin: 0 auto;
}

.slider {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
	border-radius: 0.5rem;
	-ms-overflow-style: none; /* Hide scrollbar IE and Edge */
	scrollbar-width: none; /* Hide scrollbar Firefox */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.slider::-webkit-scrollbar {
	display: none;
}

.slider img {
	flex: 1 0 100%;
	scroll-snap-align: start;
	object-fit: cover;
}

.slider-nav {
	display: flex;
	column-gap: 1rem;
	position: absolute;
	bottom: 1.25rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.slider-nav a {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: #fff;
	opacity: 0.75;
	transition: opacity ease 250ms;
}

.slider-nav a:hover {
	opacity: 1;
}




body {
  background-color: white;
  color: black;
  font-family: Verdana;
}