:root {
  --primary-color: #e08367;
  --black-color: #161616;
  --white-color: #eeeeee;
  --second-color: #ffe28a;
  --socialMediaPictures-size : 12%;
}
  p{
    font-size: 1.15rem;
    line-height: 1.75rem;
    letter-spacing: 3%;
  }

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

body {
  font-family: "Poppins", sans-serif;
  background-color: #222222; /* Fallback color */
  background-color: var(--black-color);
}

.aboutMe {
  margin-top: 8%;
  margin-bottom: 4%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  overflow: hidden; /* Prevent overflow */
}
.side {
  display: flex;
  gap: 4rem;
  align-items: center;
  justify-content: center;
}

.text-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-left: 5rem;
}

.aboutMe button {
  color: var(--black-color);
  background-image: url('../IMAGES/Button.png'); /* Add your PNG image */
  background-size: cover; /* Ensure the image covers the entire button */
  background-repeat: no-repeat; /* Prevent repeating the image */
  background-position: center; /* Center the image within the button */
  font-family: "Press Start 2P", sans-serif;
  font-size: 200%;
  padding: 3% 2%;
  padding-left: 5%;
  border: none;
  align-self: flex-start; /* Aligns the button with the start of the text */
  cursor: pointer;
  width: 80%; /* Adjust width to match the image's dimensions */
  text-align: center; /* Center the text inside the button */
  transition: background-image 1s ease-in-out;
  transition: margin-left 0.3s ease-in-out;
}
.aboutMe button:hover{
  background-image: url('../IMAGES/ButtonOnHover.png'); /* Add your PNG image */
  margin-left: 1%;
  outline: 2px solid #ffffff; /* White outline */
  outline-offset: 2px;
}

.aboutMe h1 {
  font-size: 400%;
  font-family: "Press Start 2P", sans-serif;
  word-spacing: -30%;
  font-weight: 400;
  color: var(--primary-color);
}

.aboutMe p {
  font-family: "Poppins", sans-serif;
  font-size: 200%;
  color: var(--primary-color);
}

.WindmillVideo {
  width: 60rem; /* Set a fixed width */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover;
  margin-right: 5rem;
}
.Work{
  padding-top: 5%;
  font-family: "Poppins", sans-serif;
  padding-left: 8%;
  padding-right: 8%;
  background-image: url('../IMAGES/Background1.png'); /* Replace with your image path */
  background-size: cover; /* Ensures the image covers the entire section */
  background-position: center; /* Centers the image */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  color: var(--white-color); 
  margin-bottom: 2rem;
}

.Work h1 {
  font-family: "Press Start 2P", sans-serif;
  color: var(--primary-color);
  letter-spacing: -5%;
  font-size: 2rem;

}
.SeeMoreButton {
  display: flex;
  justify-content: center; /* Center horizontally */
  align-items: center;    /* Center vertically */
  padding-top: 6.25rem;          /* Full viewport height or adjust as needed */
  padding-bottom: 3.75rem;
}

.SeeMoreButton button {
  margin-top: 0;           /* Reset the margin to ensure proper centering */
  padding: 1rem 2rem; 
  font-family: "Press Start 2P", sans-serif;
  font-size: 2rem;
  color: var(--black-color);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  letter-spacing: -10%;
  background-image: url('../IMAGES/Button3.png'); /* Add your PNG image */
  background-size: cover; /* Ensure the image covers the entire button */
  background-repeat: no-repeat; /* Prevent repeating the image */
  background-position: center; /* Center the image within the button */
  transition: background-image 1s ease-in-out;
  transition: margin-top 0.3s ease-in-out;

}

.SeeMoreButton button:hover {
  background-image: url('../IMAGES/Button3Hover.png'); /* Add your PNG image */
  outline: 2px solid #ffffff; /* White outline */
  outline-offset: 2px;
  margin-top: 0.25rem;
  padding: 1.25rem 2.25rem; 
}
@media (max-width: 1000px) {
  .side {
    margin-top: 4%;
    display:block;
    justify-content: center;
    align-items: center;
  }
  .side img {
    width: 100%; /* Set a fixed width */
    height: auto; /* Maintain aspect ratio */
    object-fit: cover;
    margin-top: 4rem;
  }
  .aboutMe{
    margin-top: 3rem;
  }
}