/* General styling */
body {
    font-family: 'Comic Sans MS', sans-serif;
    background-color: black;
    color: white;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Flex container styling for larger screens */
.flex-container-ad {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
}

/* Content sections */
.content-60 {
    width: 60%;
    background-color: #1a1a1a;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
}

.content-40 {
    width: 40%;
    background-color: #333333;
    padding: 20px;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Responsive styling for smaller devices */
@media (max-width: 768px) {
    .flex-container-ad {
        flex-direction: column; /* Stack sections vertically */
        gap: 10px; /* Reduce gap between sections */
        padding: 10px; /* Adjust padding for smaller screens */
    }

    .content-60, .content-40 {
        width: 100%; /* Make both sections full width */
        margin: 0 auto; /* Centre the content */
    }

    .content-60 h1 {
        font-size: 1.5rem; /* Adjust font size for headings */
        text-align: center; /* Centre-align text */
    }

    .content-60 p {
        font-size: 0.9rem; /* Adjust font size for text */
        text-align: justify;
    }
}
/*start styling emekasportfolio*/
.white {
  color: white;
}
.goldenrod {
  color: goldenrod;
}
.half-half {
  display: inline-block;
  position: relative;
  width: 0.6em; /* Adjust the width to fit the character */
  height: 1em; /* Ensure it matches the font size */
  vertical-align: bottom;
}
.half-half::before {
  content: "p";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    black 60%,
    goldenrod 40%
  ); /*instead of 135deg you can use to right*/
  -webkit-background-clip: text;
  color: transparent;
}
/*end styling emekasportfolio*/