 a:link, a:active, a:visited {
  color: yellow;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: white;
  background-color: transparent;
  text-decoration: none;
}

    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
	.nav {
            position: fixed;
            top: 10px;
            width: 100%;
            background-color: #333;
            display: flex;
            justify-content: center;
            padding: 10px 0;
            z-index: 100;
    }
    .menu {
      display: flex;
      justify-content: right; /* play here*/
      background-color: #333;
	  padding : 10px;
      /*padding-left: 10px;
	  padding-right: 10px;
	  padding-top: 10px;
	  padding-bottom: 10px;*/
	  width: 100%;
	  position: fixed;
	  z-index: 100;
    }
    .menu a {
      color: white;
      padding: 14px 20px;
      text-decoration: none;
      text-align: right;  /* does nowt methinx */
    }
    .menu a:hover {
      /*background-color: #ddd;
      color: black;*/
	  
	  color : yellow;
    }
    .menu .icon {
      display: none;
    }
	
    @media screen and (max-width: 600px) 
	{
      .menu a {
        display: none;
      }
      .menu a.icon {
        display: block;

      }
      .menu.responsive {
        flex-direction: column;
        align-items: flex-start;
		
      }
      .menu.responsive a {
        display: block;
        /*text-align: right;   play here*/
        width: 94%;
        padding: 10px;
      }
    }
	/*https://www.w3schools.com/css/css_rwd_images.asp*/
	
	img {
  max-width: 100%;
  height: auto;
}
	
	.section {
            width: 100%;
            /*height: 100vh;*/
            /* Full viewport height */
            color: white;
            font-size: 15px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            /* Align text to the top */
            text-align: center;
			padding-left:0px;
			padding-right:0px;
            padding-top: 170px;
			padding-bottom: 100px;
            /* Adds space to avoid being hidden behind fixed nav */
			/*clip-path: ellipse(100% 25% at bottom);*/
			background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 100"><path d="M0,50 Q150,100 300,50 V100 H0 Z" fill="lightblue"/></svg>') no-repeat center bottom;
	
        }

        .one {
            background-color: #EF5354;
        }

        .two {
            background-color: #E03B8B;
        }

        .three {
            background-color: #3944F7;
        }

        .four {
            background-color: #38CC77;
        }
		.five {
            background-color: #38CC99;
        }
		
		.innerDiv {
		width:70%;
		text-align:left;
		border-radius: 25px 25px 25px 25px;
		background: #333;
		padding: 50px;
		}
		
		.Jen {
		width:50%;
		text-align:left;
		border-radius: 8px;
		background: yellow;
		color: #333;
		padding: 10px;
		}
		

		.container {
    display: flex;
    align-items: center; /* Centers items vertically */
    gap: 50px; /* Adds spacing between text and image */
}

.image img {
	width:800px;
    max-width: 100%; /* Makes sure the image scales */
    height: auto;
}

@media (max-width: 600px) {
    .container {
        flex-direction: column; /* Stacks items vertically on mobile */
        align-items: center; /* Centers items */
    }
}
