@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@129&display=swap');

body {
	 /* background image properties */
  background-image: url('bg2.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;          /* keeps aspect ratio, fills screen */
  background-attachment: fixed;    /* keeps it fixed while scrolling */
  /* font properties */
   font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 129;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

.amazing {
	margin: 16px;
}

 /* unvisited link */
a:link {
  color: black;
}

/* visited link */
a:visited {
  color: black;
}

/* mouse over link */
a:hover {
  color: black;
}

/* selected link */
a:active {
  color: black;
} 

.main-div {
	border-width: thin;
	border-style: solid;
	-webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
-moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
	 overflow: hidden;
	 width:100%;
 background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-radius: 12px;
}

.side-div {
	border-width: thin;
	border-style: solid;
	-webkit-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
-moz-box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
box-shadow: 8px 8px 24px 0px rgba(66, 68, 90, 1);
	 overflow: hidden;
 background-color: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  border-radius: 12px;
}

.header-image {
  position: relative;
  width: 100%;
  height: 42px;
  padding-top: 42px;
  background-image: url('headerimg.png');
  background-size: cover;   /* fill width, keep aspect ratio */
  background-position: center;
}

/* Text overlay */
.header-text {
	height: 42px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  color: #fff;
  font-size: 1.8rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  text-align: center;
}

.content {
	max-width:750px
  padding: 1.5rem;
}

/* Parent container uses flex to create two equal halves */
.split-container {
  display: flex;
  height: 100vh;          /* full viewport height */
  width: 100%;
}

/* Left: text area */
.split-left {
  flex: 1;                /* take half the width */
  padding: 3rem;
  display: flex;
  flex-direction: column;
}

/* Right: screenshot area */
.split-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Left: text area */
.split-left-main {
	margin:15px;
  flex: 0.5;
height: auto; 
}

/* Right: screenshot area */
.split-right-main {
  flex: 1.5;
  margin:15px;
  align-items: center;
}

.split-right img {
  max-width: 100%;
  height: auto;           /* keeps aspect ratio, no stretching */
  display: block;
  object-fit: contain;    /* ensures the image never distorts */
}

/* Optional: stack vertically on smaller screens */
@media (max-width: 360px) {
  .split-container {
    flex-direction: column;
  }
  .split-left, .split-right {
    flex: none;
    width: 100%;
    height: auto;
  }
}

.split-right img {
  max-width: 90%;     /* never wider than 90% of its column */
  max-height: 70vh;   /* never taller than 70% of the viewport height */
  height: auto;       /* keep aspect ratio */
  width: auto;        /* keep aspect ratio */
  display: block;
  object-fit: contain;
}