/* === styles.css === */

*,
*::before,
*::after {
box-sizing: border-box;
}

/* ... (General body styles remain the same) ... */
* { margin: 0; padding: 0; }


/* --- Root Variables and General Styles --- */


html{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: left;
}

body{
  font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
  font-weight: 500;
 
}

h1, h2, h3, h4, h5 {
font-weight: 500;

}

h1 {
font-size: 40px;
color: #444;
}


p {
font-size: 1rem;
}


a {
padding: 2rem;
background-color: #1447E6;
display: inline-flex;
}


img,
picture,
video,
image,
canvas,
svg {
  display: flex;
  max-width: 100%;
  border-radius: 10px;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

/* this is the netflix style horizontal scroll for cards Start*/
.container {
display: flex;
width: 100%;
min-height: 300px;
gap: 1em;
overflow-x: scroll;
scroll-snap-type: x mandatory;
 /* this will hide the scrollbars for the cards scrollbar-width: none;*/

}

.card {
scroll-snap-align: start;
flex-shrink: 0; /* no card row */
width: 300px;
height: 200px; /* Or a fixed height */
aspect-ratio: 3 / 2;
box-sizing: border-box;
}


  
/* this is the netflix style horizontal scroll for cards End .container::-webkit-scrollbar {
display: none;
}   */ 
  
  display: flex;
  height: 315px;
  width: 500px;
  margin: 0 auto;
  padding: 2em;
  width: 500px;
  background: #101828;
  text-align: center;
  border-radius: 10px;
  position: relative;
}


/* Style the counter cards */
.card-container {
  display: flex;
  max-width: 1000px;
  height: 500px;
  width: 500px;
  margin: 20px auto;
  padding: 10px;
  justify-content: center;
  text-align: center;
  background-color: black;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
  margin-bottom: 2em;
  }
  
.card img {
  height: 100%;
  width: 100%;
}




.tag-cloud {
  display: flex;
  display: inline-block;
  color: white;
  padding: 8px 20px;
  font-family: Arial;
  border-radius: 25px;
  background-color: #2196F3;
  margin-top: 8px;
}

.site-header {
  flex: 1 1 0;
 
}

  /* FLEXBOX CONTAINER */
.flex-container {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
 
 }


 /* ALL GRID CONTAINERS */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
  grid-template-rows: auto;
  gap: 15px;
  justify-content: space-evenly;
  align-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
  background: #dceff7;
  border: 2px solid rgba(114, 186, 94, 0.35);
}


.grid-item {
  box-sizing: border-box;
  width: 400px;
  height: 400px;
  background: #FBF2C0;
  border: 2px solid rgba(236, 198, 48, 0.5);
}
 
.card-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 20px;
  grid-row-gap: 20px;
   border: 2px solid rgba(114, 186, 94, 0.35);
}



/* Keyframes */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }*/
  to   { opacity: 1; transform: translateY(0); }*/
}

 /* modern browsers */
.animate-on-scroll {
  animation: fadeUp 0.6s ease-out both;
  animation-timeline: view();  
}

.rounded-image {
  border-radius: 50px;
  width: 300px;
  height: auto;
}

/* SECTIONS */
section {
  margin-bottom: var(--space-l);
  padding: var(--space-m);
  background: #101828;
  font color: #edf4f7;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  animation: fadeUp 0.7s ease-out both;
  animation-timeline: view();
  animation-range: entry 15% cover 30%;
}

/*  Combining Flexbox and CSS Grid */
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  border-radius: 8px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.footer-section {
  background-color: #444;
  padding: 20px;
  border-radius: 8px;
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}



/* Navigation Styles */

nav {
  column-gap: 40px;
  row-gap: 20px;
  
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav li {
    display: flex;
    column-gap: 40px;
    
}

nav li a {
    color: #fff;
    text-decoration: none;
}



/* Footer Styles */

footer {
    background-color: darkblue;
    color: white; 
    text-align: center;
    padding: 20px 10px;
    border: 1px; /* Consider specifying border style and color */
    margin: 15px;
}

footer a:hover {
    color: #9867C5;
    border-bottom: 2px solid #9867C5;
    margin: 0px 10px;
}


.footer-container {
  flex: 1 1 300px;
  margin: 10px;
  background-color: #101828;
  padding: 20px;
  border-radius: 12px;
}

.footer h2,
.footer p,
.footer ul,
.footer form {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer ul li {
  margin: 5px 0;
  list-style-type: none;
}

@supports (display: flex) {
  .footer-container {
    display: flex;
  }
}




/* Media Queries */
@media (max-width: 768px) {
    .header .container {
        flex-direction: column;
        padding-top: 20px;
        text-align: center;
    }

    /* Responsive columns */
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
        gap: 1rem;
    }

    .item {
        display: flex;
        justify-content: center;
        align-items: center;
    }


@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
  }

  .footer {
    text-align: center;
  }
}


@media screen and (max-width: 600px) {
 .card::after, .card::before{
  content: '';
  display: none;
  animation-delay: 10s;
}

.card::before{
 display: none;
}

@property --angle{
  display: none;
 }
}

@keyframes spin{
  display: none;
  }
}

.animate-on-scroll {
   display: none;
  }
}

    @media screen and (max-width: 400px) {
        .column {
            width: 100%;
            display: block;
            margin-bottom: 20px;
        }
    }
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 600px) {
  .site-header {
    flex-direction: column;
  }
}


@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

@media screen and (min-width: 60em) {

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}




/* Tablets and Under */
@media (max-width: 768px) {
    .grid,
    .grid-3 {
        grid-template-columns: 1fr;
    }
}