:root {
  --primary-color: #ddd;
  --secondary-color: #ffff00;
  --white-color: #ffffff;
  --black-color: #000000;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

body {
  background-color: var(--primary-color);

  font-family: "poppins", sans-serif;
}

.flex {
  display: flex;
}
.grid {
  display: grid;
}

.max-container {
  max-width: 1440px;
}

.padding {
  padding: 1rem;
}

a {
  text-decoration: none;
}

ul,
li {
  list-style: none;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 376vh;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: -1;

  display: none;
}

/* Styles for animation... */
.about_container,
.cardOne,
.cardTwo,
.cardThree,
.contact_container {
  opacity: 0;
}
.about_container.animate__animated,
.cardOne.animate__animated,
.cardTwo.animate__animated,
.cardThree.animate__animated,
.contact_container.animate__animated {
  opacity: 1;
}

.cardTwo {
  animation-delay: 0.15s;
}
.cardThree {
  animation-delay: 0.3s;
}

/* MEDIA QUERIES..... */
@media only screen and (min-width: 1440px) {
  /* Large screens */
}

@media only screen and (min-width: 768px) {
  /* Tablets screen sizes */
}

@media only screen and (min-width: 320px) {
  /* Mobile screen sizes */
}