sample_project.css

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap");
.root {
  --colordark: rgb(83, 152, 83);
  --colorlight: rgb(104, 239, 104);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
nav {
  background-color: rgb(62, 171, 62);
  display: flex;
  align-items: center; /* Align items vertically in the center */
  justify-content: space-between; /* Distribute items along the main axis */
  padding: 10px 10px;
}
#check{
    display: none;
}
.menu {
  display: none;
}
.logo {
  display: flex;
  align-items: center;
}
.logo img {
  height: 50px;
  width: 80px;
}

nav ul {
  display: flex;
  list-style: none;
  align-items: center;
}

nav ul li {
  display: inline-block;
  padding: 10px;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

.icons {
  display: flex;
  align-items: center;
}

.icons span {
  cursor: pointer;
  padding: 5px;
}
.banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 60px;
}

.bannerText a {
  background-color: rgb(164, 242, 184);
  text-decoration: none;
  padding: 5px 10px;
  display: inline-block;
  color: var(--colordark);
  border: 2px solid rgb(9, 109, 9);
  border-radius: 10px;
  text-transform: uppercase;
  transition: all 0.5s;
}

.bannerText a:hover {
  background-color: rgb(50, 175, 50);
  color: white;
  border: 2px solid var(--colorlight);
}
.bannerText {
  flex: 1;
}

.bannerImg {
  flex: 1;
}
.bannerImg img {
  width: 100%;
}
.featured h1 {
  margin-bottom: 5vh;
  text-align: center;
}
.cards {
  display: grid;
  justify-content: center;
  align-content: center;
  justify-items: center;
  gap: 10px;
}
.card {
  /* width: 200px; */
  border: 3px solid rgb(56, 99, 56);
  padding: 10px;
  border-radius: 8px;
  text-align: center;
  margin: 20px;
}
.cardImg img {
  width: 180px;
}
.card h3 {
  color: rgb(50, 126, 50);
}
.card a {
  background-color: var(--colorlight);
  text-decoration: none;
  padding: 5px 10px;
  display: inline-block;
  color: rgb(34, 167, 103);
  border: 2px solid var(--colordark);
  border-radius: 10px;
  text-transform: uppercase;
}
.card a:hover {
  background-color: var(--colordark);
  color: rgb(23, 86, 79);
  border: 2px solid rgb(164, 222, 164);
}

@media only screen and (max-width: 500px) {
  html {
    font-size: 16px;
  }
  #check:checked ~ ul {
    left: 0;
  }
  .menu {
    display: block;
    cursor: pointer;
  }
  nav ul {
    position: fixed;
    top: 80px;
    background-color: rgb(2, 104, 2);
    width: 100%;
    height: 100%;
    left: -100%;
    flex-direction: column;
    transition: all 0.5s ease-in-out;
  }
  nav ul li a {
    color: rgb(110, 229, 110);
  }
  .cards {
    grid-template-columns: repeat(1, 1fr);
  }
  .banner {
    flex-direction: column-reverse;
  }
}
@media only screen and (min-width: 450px) and (max-width: 850px) {
  html {
    font-size: 17px;
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media only screen and (min-width: 850px) and (max-width: 1250px) {
  html {
    font-size: 18px;
  }
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 1250px) {
  html {
    font-size: 20px;
  }
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}