/* Base styles */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #383838;
  position: relative;
}

 @font-face {
    font-family: 'chomskyregular';
    src: url('kpschomsky-webfont.woff2') format('woff2'),
         url('kpschomsky-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.heading {
    margin: 0;
    font-size: 6em;
    color: #0000db;
    font-family: 'chomskyregular';
}

.background-wrapper {
  display: flex;
  min-height: 100vh;
  position: relative;
}

.content {
  position: absolute;
  left: 20vw; /* 20% from the left */
  top: 20vh; /* 20% from the top */
  width: 60vw; /* Fixed width at 40% of viewport width */
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background-color: transparent;
}


.text-box {
  background-color: rgba(255, 255, 255, 0.85);
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Responsive adjustments */
body::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 768px;
  height: 100%;
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: left center;
  z-index: -1;
}

@media (max-width: 768px) {
  .background-wrapper {
    flex-direction: column;
    position: static;
  }

  .background-image {
    max-width: 100%;
    height: 300px;
    background-size: 80% auto;
    background-position: center;
    background-attachment: scroll;
  }

@media only screen and (max-device-width: 1366px) {
  .bg {
    background-attachment: scroll;
  } 



@font-face {
  font-family: 'double';
  src: url('double.ttf');
}