:root {
  /* Color palette */
  --google-red-700: #c53929;
  --tomato-red-color: #d90429;
  --google-yellow-300: #f7cb4d;
  --google-yellow-700: #f09300;
  --paper-purple-300: #ba68c8;
  --paper-purple-600: #8e24aa;
  --turquoise-color: #a8dadc;
  --blue-color: #457b9d;
  --dark-blue-color: #1d3557;
  --paper-cyan-600: #00acc1;
  --paper-cyan-700: #0097a7;
  --paper-cyan-800: #00838f;
  --paper-cyan-900: #006064;
  --paper-teal-100: #b2dfdb;
  --paper-teal-200: #80cbc4;
  --paper-teal-500: #009688;
  --paper-teal-800: #00695c;
  --paper-teal-a700: #00bfa5;
  --paper-green-100: #c8e6c9;
  --paper-green-200: #a5d6a7;
  --paper-green-900: #1b5e20;
  --google-green-300: #57bb8a;
  --google-green-500: #0f9d58;
  --google-green-700: #0b8043;
  --paper-light-green-500: #8bc34a;
  --paper-light-green-800: #558b2f;
  --paper-blue-grey-600: #546e7a;

  /* Fonts */
  --main-font: "Montserrat-Regular";
  --second-font: "Lato-Regular";

  --main-font-medium: "Montserrat-Medium";

  --main-font-bold: "Montserrat-Bold";
  --second-font-bold: "Lato-Bold";
}


@font-face {
  font-family: "Montserrat-Regular";
  src: url("https://static.igem.wiki/teams/4638/wiki/global/montserrat-regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat-Medium";
  src: url("https://static.igem.wiki/teams/4638/wiki/global/montserrat-medium.ttf")
    format("truetype");
  font-style: normal;
}
@font-face {
  font-family: "Montserrat-Bold";
  src: url("https://static.igem.wiki/teams/4638/wiki/global/montserrat-bold.ttf")
    format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "Lato-Regular";
  src: url("https://static.igem.wiki/teams/4638/wiki/global/lato-regular.ttf")
    format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* Containers */

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}