.dropdown {
    display: inline-block;
}

.dropdown button {
    background-color: gainsboro; 
    color: white; 
    padding: 10px 15px; 
    border: none; 
    cursor: pointer;  }

.dropdown a {
display: block;
    color: black;
    text-decoration: none;
    padding: 10px 15px;
    
}

.dropdown content {
    background-color: whitesmoke;
    position: absolute;
    min-width: 100px;
    box-shadow: 2px 2px 5px black;
    display: none;
    }

.dropdown:hover .content {
    display: block;
}

.dropdown:hover button {
    background-color: darkgray;
    
}

.dropdown:hover {
    background-color: lightgray;
}



.container {
    padding: 2rem;
    
}

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

.slider {
    display: flex;
    aspect-ratio: 16/9;
    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;
    
}

.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;
}

.slider-nav::-webkit-scrollbar

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.carousel {
    margin: 100px auto;
    width: 90%;
    border: 5px solid #C9E4DE;
    display: flex;
    overflow-x: auto;
    gap: 1em;
}

.card {
    flex: 0 0 5em;
    height: 5em; 
    padding: 1em; 
    background: cornflowerblue;
    font-size: 3em;
    border-radius: .2em;
    text-align: center;
    align-content: center;
    
}

.group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
    animation: spin 27s infinite linear;
}

.carousel::-webkit-scrollbar {
    display: none;
}

@keyframes spin {
    from {translate: 0;}
    to {translate: -100%;}
}

h1 {color: darkgreen}

p {color: darkseagreen}

body {
    background-color: #C9E4DE
}