:root {

  --lightcolor: #fff;
  --darkcolor: #000000;
  --mediumcolor: #b9b9b9;
  --darkmediumcolor: #777777;
  --lightmediumcolor: #e4e4e4;

    --accentcolor1: #421196;
    --accentcolor2: #FF8A00;
    --accentcolor3: #008B61;
    --accentcolor4: #FF006B;

  }

  :root {

    --titlefont: NotoSans;
    --textfont: WorkSans;
    --logofont: JosefinSans;
  
    }


:root {
    --farwidth: calc(60% - 25px);
    --width: calc(50% - 25px);
}
@media (max-width: 1600px) {
  :root {
    --farwidth: calc(70% - 25px);
    --width: calc(60% - 25px);
  }
}

@media (max-width: 1400px) {
  :root {
    --farwidth: calc(90% - 25px);
    --width: calc(80% - 25px);
  }

}

@media (max-width: 1000px) {
  :root {
    --farwidth: calc(100% - 25px);
    --width: calc(100% - 25px);
  }

}