:root{
  --top: #A02C66;
  --bot:#2A6A79;
  --toplight: #CA8DA8;
  --botlight: #8BA1A5;
  --neutral: #906E64;
  --backn: #1D100C;
--backg:  #f4edea;
}
@font-face {
  font-family: 'TReg';
  src:  url('ff/Telegraf-Regular.woff2') format('woff2'),
        url('ff/Telegraf-Regular.woff') format('woff');
}
@font-face {
  font-family: 'TU';
  src:  url('ff/Telegraf-UltraLight.woff2') format('woff2'),
        url('ff/Telegraf-UltraLight.woff') format('woff');
}
@font-face {
  font-family: 'Eleg';
  src:  url('ff/MigraItalic-ExtralightItalic.woff2') format('woff2'),
        url('ff/MigraItalic-ExtralightItalic.woff') format('woff');
}
body{
  overflow:hidden;
color: var(--neutral);
 background-color:var(--backg);
 scroll-behavior: smooth;
}
.notnot{
  opacity:0;
}
.txt{
font-family: Treg;
text-decoration: none;
}
.capt{
font-family: Treg;
}
.arrow{
  font-family: Treg;
}
.caption{
  font-size: 0.8em;
}
.quote{
  font-family: Eleg;
}
.ft{
  color: var(--neutral);
  font-size: 0.8em;
  text-decoration: none;
}
.footnote{
  font-size: 0.5em;
}
.inner{
  font-family: Treg;
}
.nn{
  font-size: 0.9em;
}
.aa{
  font-size: 0.9em;
}
.pic{
  padding: 2vw;
  margin: auto;
  width: 70vw;
  border-radius: 5vw;
}


h2{
  margin-top: 10vh;
}
.CTitle{
  font-family: Eleg;
  font-size: 1.6em;
}
.mtitle{
  font-family: Eleg;
  font-size: 1.5em;
  line-height: 0.95;
}
.btnin{
}

a{
  color: var(--neutral);
  text-decoration: none;
}
.flowtext{
  font-size: 1em;
}

#partl{
  color: var(--toplight);
top: 0.5vh;
left: -30vw;
height: 45vh;
z-index: 10;
}
#parbl{
  color: var(--botlight);
top: 48vh;
left: -30vw;
height: 45vh;
z-index: 10;
}
#partr{
  color: var(--toplight);
top: 0.5vh;
left: 103vw;
height: 45vh;
z-index: 10;
}
#parbr{
  color: var(--botlight);
top: 48vh;
left: 103vw;
height: 45vh;
z-index: 10;
}

/* LONG SO MOBILE */
  @media screen and (max-aspect-ratio: 5/5)  {
    .container, .container1, .container2, .container3 {
        overflow-y:scroll;
        background-color: var(--backg);
        margin-top: 2vh;
        margin-left: 1.3vh;
        margin-right: 1vh;
        padding-left: 5vw;
        padding-right: 2vw;
    }
    img{
      border-radius: 3vw;
      width: 70vw;
      height: auto;
    }
    .cc{
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    .par{
      font-family: TU;
      position: absolute;
      font-size: 45vh;
      display: block;
    padding: none;
    }
    .nav{
      width: 60vw;
      text-align: center ;
      padding-top: 1vw;
      margin: auto;
      font-size: 1.5em;
      font-family: Treg;
      color: var(--neutral);
    }
    #landing{
      display: block;
      top: 0;
    }

    #brr{
      display: block;
      position: absolute;
      left: 105vw;
      top: 0;
    }
    #amz{
      display: block;
      position: absolute;
      left: 208vw;
      top: 0;
    }
    #conc{
      display: block;
      position: absolute;
      left: 312vw;
      top: 0;
    }
    .pad{
      display: block;
      position: absolute;
      top:0;
      width: 5vw;
      height: 100vh;
    }
    .bottom{
    overflow-x: hidden;
    width: 87vw;
    height: 45vh;
    color: var(--bot);

    }
    .bottom1{
    overflow-x: hidden;
    width: 87vw;
    height: 60vh;
    color: var(--bot);

    }
    .bottom2{
    overflow-x: hidden;
    width: 87vw;
    height: 30vh;
    color: var(--bot);

    }



    .wrap{
      padding-top: 45vh;
      padding-bottom: 15vw;
    }

    .top{
      color: var(--top);
      overflow-x: hidden;
      width: 87vw;
      height: 45vh;
    }
    .top1{
      color: var(--top);
      overflow-x: hidden;
      width: 87vw;
      height: 30vh;

    }
    .top2{
      color: var(--top);
      overflow-x: hidden;
      width: 87vw;
      height: 60vh;

    }


    .top::-webkit-scrollbar, .top2::-webkit-scrollbar, .top1::-webkit-scrollbar {
      width: 5vw;
    }

    .top::-webkit-scrollbar-track, .top2::-webkit-scrollbar-track, .top1::-webkit-scrollbar-track {
      background-color: none;
    }

    .top::-webkit-scrollbar-thumb, .top2::-webkit-scrollbar-thumb, .top1::-webkit-scrollbar-thumb {
      background-color:  var(--toplight);
      border-radius: 5vw;
    }
    .bottom::-webkit-scrollbar, .bottom2::-webkit-scrollbar , .bottom1::-webkit-scrollbar {
      width:5vw;
    }

    .bottom::-webkit-scrollbar-track, .bottom2::-webkit-scrollbar-track, .bottom1::-webkit-scrollbar-track {
      background-color: none;
    }

    .bottom::-webkit-scrollbar-thumb, .bottom2::-webkit-scrollbar-thumb, .bottom1::-webkit-scrollbar-thumb {
      background-color: var(--botlight);
      border-radius: 5vw;
    }

  }
  /* Square boi */
  @media screen and (min-aspect-ratio: 5/5)  {
    .container, .container1, .container2, .container3 {
        overflow-y:scroll;
        background-color: var(--backg);
        margin-top: 2vh;
        margin-left: 1.3vh;
        margin-right: 1vh;
        padding-left: 5vw;
        padding-right: 2vw;
    }
    img{
      border-radius: 3vw;
      width: 70vw;
      height: auto;
    }
    .cc{
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
    .par{
      font-family: TU;
      position: absolute;
      font-size: 45vh;
      display: block;
    padding: none;
    }
    .nav{
      width: 60vw;
      text-align: center ;
      padding-top: 1vw;
      margin: auto;
      font-size: 1.5em;
      font-family: Treg;
      color: var(--neutral);
    }
    #landing{
      display: block;
      top: 0;
    }
    #brr{
      display: block;
      position: absolute;
      left: 105vw;
      top: 0;
    }
    #amz{
      display: block;
      position: absolute;
      left: 208vw;
      top: 0;
    }
    #conc{
      display: block;
      position: absolute;
      left: 312vw;
      top: 0;
    }
    .pad{
      display: block;
      position: absolute;
      top:0;
      width: 5vw;
      height: 100vh;
    }
    .bottom{
    overflow-x: hidden;
    width: 87vw;
    height: 45vh;
    color: var(--bot);

    }
    .bottom1{
    overflow-x: hidden;
    width: 87vw;
    height: 60vh;
    color: var(--bot);

    }
    .bottom2{
    overflow-x: hidden;
    width: 87vw;
    height: 30vh;
    color: var(--bot);

    }

    .wrap{
      padding-top: 45vh;
      padding-bottom: 15vw;
    }

    .top{
      color: var(--top);
      overflow-x: hidden;
      width: 87vw;
      height: 45vh;
    }
    .top1{
      color: var(--top);
      overflow-x: hidden;
      width: 87vw;
      height: 30vh;

    }
    .top2{
      color: var(--top);
      overflow-x: hidden;
      width: 87vw;
      height: 60vh;

    }


    .top::-webkit-scrollbar, .top2::-webkit-scrollbar, .top1::-webkit-scrollbar {
      width: 5vw;
    }

    .top::-webkit-scrollbar-track, .top2::-webkit-scrollbar-track, .top1::-webkit-scrollbar-track {
      background-color: none;
    }

    .top::-webkit-scrollbar-thumb, .top2::-webkit-scrollbar-thumb, .top1::-webkit-scrollbar-thumb {
      background-color:  var(--toplight);
      border-radius: 5vw;
    }
    .bottom::-webkit-scrollbar, .bottom2::-webkit-scrollbar , .bottom1::-webkit-scrollbar {
      width:5vw;
    }

    .bottom::-webkit-scrollbar-track, .bottom2::-webkit-scrollbar-track, .bottom1::-webkit-scrollbar-track {
      background-color: none;
    }

    .bottom::-webkit-scrollbar-thumb, .bottom2::-webkit-scrollbar-thumb, .bottom1::-webkit-scrollbar-thumb {
      background-color: var(--botlight);
      border-radius: 5vw;
    }

  }
  /* Desktop */
  @media screen and (min-aspect-ratio: 6/5) {
    .container, .container1, .container2, .container3 {
        overflow-y:scroll;
        background-color: var(--backg);
        margin-top: 2vh;
        margin-left: 1.3vh;
        margin-right: 1vh;
        padding-left: 1.5vw;
        padding-right: 2vw;
    }
    .cc{
      width: 35vw;

      margin-left: 0;
      margin-right: auto;
    }
    img{
      border-radius: 3vw;
      width: 35vw;
      height: auto;
    }
    #landing{
      display: block;
      top: 0;
      width: 100vw;
      height: 100vh;
    }

    #brr{
      display: block;
      position: absolute;
      left: 110vw;
      top: 0;
      width: 100vw;
      height: 100vh;
    }
    #amz{
      display: block;
      position: absolute;
      left: 215vw;
      top: 0;
      width: 100vw;
      height: 100vh;
    }
    #conc{
      display: block;
      position: absolute;
      left: 330vw;
      top: 0;
      width: 100vw;
      height: 100vh;
    }
    .par{
    display: none;
  }
  .wrap{
    padding-top: 90vh;
    padding-bottom: 15vw;
  }
  .bottom{
  overflow-x: hidden;
  width: 42vw;
  height: 90vh;
  color: var(--bot);
  display: block;
  position: absolute;
top:0;
left: 50vw;
  }

  .top{
    display: block;
    position: absolute;
  top:0;
  left: 0vw;
    color: var(--top);
    overflow-x: hidden;
    width: 42vw;
    height: 90vh;
  }
  .top1{
    display: block;
    position: absolute;
  top:0;
  left: 0vw;
    color: var(--top);
    overflow-x: hidden;
    width: 35vw;
    height: 90vh;
  }
  .bottom1{
  overflow-x: hidden;
  width: 58vw;
  height: 90vh;
  color: var(--bot);
  display: block;
  position: absolute;
top:0;
left: 40vw;
  }
  .top2{
    display: block;
    position: absolute;
  top:0;
  left: 0vw;
    color: var(--top);
    overflow-x: hidden;
    width: 58vw;
    height: 90vh;
  }
  .bottom2{
  overflow-x: hidden;
  width: 35vw;
  height: 90vh;
  color: var(--bot);
  display: block;
  position: absolute;
top:0;
left: 58vw;
  }
  .nav{
    position: absolute;
    display: block;
    bottom: 4vh;
    width: 60vw;
    text-align: center ;
    padding-top: 1vw;
    margin-left: 20vw;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.5em;
    font-family: Treg;
    color: var(--neutral);
  }



  .top::-webkit-scrollbar, .top2::-webkit-scrollbar, .top1::-webkit-scrollbar {
    width: 2vw;
  }

  .top::-webkit-scrollbar-track, .top2::-webkit-scrollbar-track, .top1::-webkit-scrollbar-track {
    background-color: none;
  }

  .top::-webkit-scrollbar-thumb, .top2::-webkit-scrollbar-thumb, .top1::-webkit-scrollbar-thumb {
    background-color:  var(--toplight);
    border-radius: 2vw;
  }
  .bottom::-webkit-scrollbar, .bottom2::-webkit-scrollbar , .bottom1::-webkit-scrollbar {
    width:2vw;
  }

  .bottom::-webkit-scrollbar-track, .bottom2::-webkit-scrollbar-track, .bottom1::-webkit-scrollbar-track {
    background-color: none;
  }

  .bottom::-webkit-scrollbar-thumb, .bottom2::-webkit-scrollbar-thumb, .bottom1::-webkit-scrollbar-thumb {
    background-color: var(--botlight);
    border-radius: 2vw;
  }


  }