body {
  margin: 0px;  
  background-image: url('');
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-color: #000000;
  font-family: 'Archivo', sans-serif;
}

.banner {
   background-color: #BAA5FC;
   color: #000000;
   text-align: center;
   padding: 20px;
   font-size: 18px;
   font-family: 'Archivo', sans-serif;
 }

.header {
  font-family: 'Archivo', sans-serif;
}

h1, h2, h3, h4 {
  color: #000000;
}

h1 {
  margin: 5px 0px 15px 0px;
  padding: 0px 0px 10px 0px;
  line-height: 28px;
  font-size: 48px;
}

.hero-text {
  margin: 0px;
  padding: 0px;
  line-height: 64px;
  font-size: 52px;
  font-weight: 600;
}

h3 {
  margin: 0px;
  line-height: 30px;
  font-size: 22px;
}

h4 {
  margin: 0px;
  padding: 10px 0px 0px 0px;
  line-height: 28px;
  font-size: 18px;
}

.menu {
  color: #000000;
  font-size: 16px;
  font-weight: 400;
}

a {
  color: #000000;
  padding: 0px 0px 5px 0px; 
  border-bottom: solid;
  border-width: 1px;
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  color: #000000;
  padding: 0px 0px 5px 0px;
  border-bottom: solid;
  border-width: 4px;
  text-decoration: none;
}

a.copy {
  color: #000000;
  padding: 0px 0px 2px 0px;
  border-bottom: solid;
  border-width: 1px;
  cursor: pointer;
  text-decoration: none;
}

a.copy:hover {
  color: #000000;
  padding: 0px 0px 2px 0px;
  border-bottom: solid;
  border-width: 4px;
  text-decoration: none;
}

a.projects {
  color: #000000;
  line-height: 1.3;
  border-width: 0px;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
}

a.projects:hover {
  color: #C9B5FF;
  border-width: 0px;
  text-decoration: none;
}

a.footer {
  color: #C9B5FF;
  padding: 0px 0px 5px 0px;
  border-bottom: solid;
  border-width: 1px;
  cursor: pointer;
  text-decoration: none;
}

a.footer:hover {
  color: #C9B5FF;
  padding: 0px 0px 6px 0px;
  border-bottom: solid;
  border-width: 2px;
  text-decoration: none;
}

.text {
  color: #000000;
  line-height: 28px;
  font-size: 18px;
  font-weight: 400;
  font-style: normal;
  display: block;
}

.content {
  margin: 0px;
  padding: 0px;
  max-width: 100%;
  height: auto;
  display: block;
  background-color: #C9B5FF;
}

.contentP {
  background-color: #D7FEB7;
}

.contentA {
  background-color: #DC2626;
}

.contentE {
  background-color: #8990A2;
}

.content1 {
  background-color: #EFCBCB;
}

.content2 {
  background-color: #C7DAB8;
}

.content3 {
  background-color: #DADFD6;
}

.content4 {
  background-color: #E6A100;
}

.content5 {
  background-color: #FFF15F;
}

.content6 {
  background-color: #FBF6E5;
}

.content7 {
  background-color: #D2E8E8;
}

.content8 {
  background-color: #FFFBDB;
}

.content9 {
  background-color: #FFE5FF;
}

.content10 {
  background-color: #939EA1;
}

.content11 {
  background-color: #A5F6DD;
}

.content12 {
  background-color: #E6C997;
}

.content13 {
  background-color: #B4AEA2;
}

.content14 {
  background-color: #FEF452;
}

.button {
  border: 1px solid #000000;
  color: black;
  padding: 10px 20px 10px 20px;
  text-align: center;
  text-decoration: none;
  font-size: 16px;
  border-radius: 35px;
  transition-duration: 0.3s;
}

.button:hover {
  border: 1px solid #BB3216;
  background-color: #BB3216;
  padding: 10px 20px 10px 20px;
  color: black;
}

.img2 {
  border-radius: 0px;
  margin-bottom: 25px;
}

.img3 {
  height: auto;
  display: inline;
  border-radius: 0px;
}

.img4 {
  height: auto;
  width: 100%;
  display: block;
  border-radius: 0px;
  margin: auto;
  max-width: 100%;
}

.images {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
}

.video {
  margin: 0px;
  padding: 0px;
  max-width: 100%;
  display: block;
}

.next {
  margin: 0px;
  padding: 50px;
  max-width: 100%;
  display: block;
  background-color: #000000;
}

.container {
   display: flex;
   max-width: 950px;
   margin: 0px auto;
   padding: 0px;
}

.column {
   flex: 1;
   padding: 20px 20px 10px 20px;
}

.left-column {
  padding: 20px;

}

.right-column {
  padding: 20px;
}

.full-width-header {
   position: sticky;
   top: 0;
   width: 80%;
   max-height: 400px;
   object-fit: cover;
   padding: 20px 0px 0px 20px;
}

.full-width-image {
   width: 100%;
   max-height: 400px;
   object-fit: cover;
   padding: 0px;
}


@media (max-width: 768px) {

.container {
   flex-direction: column;
   }

h1 {
   font-size: 30px;
   }

.hero-text {
   font-size: 42px;
   line-height: 48px;
   }

.header {
  max-width: 100%;
   }

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0px;
  }

video {
  max-width: 100%;
  height: auto;
  display: block;
  }
}