body {
margin: 0
}
:root {

  --cc1: #D3B5E5;
--cc2: #FFD4DB;
  --cc3: #BBE7FE;
    --ccx: #EFF1DB;
  --h1fs: 1.4rem;
  --h2fs: 1.2rem;
  --pfs: 2rem;
  --pfs: 1rem;
}

* {
  box-sizing: border-box;
}

.flex-container {
        padding: 0;
    margin: 0;
  display: flex;
  flex-direction: row;
  font-size: var(--cfs);
  text-align: center;
}

.flex-item-left {
  background-color: var(--cc1);
  padding: 1rem;
  flex: 1;
}

.flex-item-center {
  background-color: var(--cc2);
  padding: 1rem;
  flex: 4;
}

.flex-item-right {
  background-color: var(--cc3);
  padding: 1rem;
  flex: 2;
}

@media (max-width: 1281px) {
  .flex-container {
    flex-direction: column;
  }
}

#textcontent {
    padding: 0rem;
    margin: 0;
}


#project {
    font-size: var(--pfs);
    padding-left: 3rem;
    background-color: var(--ccx);
}
h1 {
    font-size: var(--h1fs);
    padding: 0;
}
h2 {
    font-size: var(--h2fs);
    padding: 0;
}
ul{
    padding:0;
    list-style: none;
}
ul>li:nth-child(odd) {
    background-color:var(--ccx);
}
.bg1{
    background-color:var(--cc1);
}
.bg2{
    background-color:var(--cc2);
}
.bg3{
    background-color:var(--cc3);
}