/* This is a CSS snippet for creating a responsive layout using Flexbox. 
   It sets the parent container to have display: flex and flex-wrap: wrap, 
   allowing the child elements to adapt to the size of the screen. */

.container {
    display: flex; /* Sets the container to use Flexbox layout */
    flex-wrap: wrap; /* Allows child elements to wrap onto multiple lines if necessary */
}

/* The child elements are set to have a flex-basis of 100%, 
   ensuring they take up the full width of the container on smaller screens */
.child {
    flex-basis: 100%;
}

/* Media query for screens larger than 768px */
@media (min-width: 768px) {
    /* On larger screens, the child elements are set to have a flex-basis of 50%,
       allowing them to take up half of the container's width */
    .child {
        flex-basis: 50%;
    }
}

/* This is a CSS Snippet for creating an advanced layout with CSS Grid.  */
.grid-container {
  display: grid; /* Use the grid layout */
  grid-template-columns: repeat(3, 1fr); /* Create 3 equal-width columns */
  grid-template-rows: 100px 200px; /* Create 2 rows with specific heights */
  grid-gap: 10px; /* Add a gap of 10px between the grid items */
}

/* Define grid items */
.grid-item {
  background-color: #eee; /* Add a light gray background color */
  padding: 20px; /* Add some padding to the items */
}

/* Style specific grid items */
.grid-item:nth-child(1) {
  grid-column: 1 / 3; /* Span the first item across the first 3 columns */
  grid-row: 1 / 2; /* Span the first item across the first row */
}

.grid-item:nth-child(2) {
  grid-column: 2 / 4; /* Span the second item across the last 2 columns */
  grid-row: 2 / 3; /* Span the second item across the last row */
}

/* This is a CSS Snippet for declaring a CSS variable */
:root {
  --main-color: #ff0000; /* sets the value of main-color variable to red */
}

/* Use the CSS variable in a CSS rule */
.container {
  background-color: var(--main-color); /* sets the background color of .container to the value of the main-color variable */
}

/* You can also use CSS variables to set property values */
.text {
  color: var(--main-color); /* sets the text color of .text to the value of the main-color variable */
}

/* This is a CSS Snippet for defining the animation */
@keyframes animate {
  /* Start from 0% */
  0% {
    /* Set the initial state of the animation */
    transform: translateY(0);
  }
  /* End at 100% */
  100% {
    /* Set the final state of the animation */
    transform: translateY(-10px);
  }
}

/* Apply the animation to an element */
.example-element {
  /* Set the animation to play for 1 second */
  animation: animate 1s;
}

/* This media query targets screens with a minimum width of 600px */
@media (min-width: 600px) {
  /* Selects the element with the ID "header" and makes its font-size larger */
  #header {
    font-size: 2em;
  }

  /* Selects the class "menu" and changes its display property to "block" */
  .menu {
    display: block;
  }
}

/* This media query targets screens with a maximum width of 600px */
@media (max-width: 600px) {
  /* Selects the element with the ID "header" and makes its font-size smaller */
  #header {
    font-size: 1.5em;
  }

  /* Selects the class "menu" and changes its display property to "none" */
  .menu {
    display: none;
  }
}