/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

@font-face {
  font-family: 'Sofia Sans', sans-serif;
  font-weight: 100 900;
  /* font-family: 'Source Code Pro', monospace;
  font-weight: 200 300; */
}

:root {
  /* Color settings */
  --color-background: rgb(235, 235, 235);
  --color-text: rgba(20, 20, 20, 1);
  --color-text-link: rgba(0, 69, 133, 0.8);
  --color-text-link-hover: rgba(8, 8, 191, 0.4);
  /* Font settings */
  --font-family: 'Sofia Sans', sans-serif;
  --font-size: 24px;
  --font-weight: 400;
  /* Margins settings */
  --margin: 1rem;

}

html {
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
  /* background-image: linear-gradient(rgba(148, 227, 255, 0.724), rgba(138, 138, 235, 0.524)); */
  /* max-width: 100%;   */
  overflow-y: visible;
  overflow-x: hidden;

}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}


/* MEDIA QUERIES */

/* responsive typeface */

@media (max-width: 298px) {
  :root {
    --font-size: 15px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 299px) and (max-width: 339px) {
  :root {
    --font-size: 16px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 340px) and (max-width: 439px) {
  :root {
    --font-size: 17px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 440px) and (max-width: 599px) {
  :root {
    --font-size: 18px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 600px) and (max-width: 779px) {
  :root {
    --font-size: 19px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 780px) and (max-width: 992px) {
  :root {
    --font-size: 20px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  :root {
    --font-size: 22px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 1201px) and (max-width: 1319px) {
  :root {
    --font-size: 24px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 1320px) and (max-width: 1619px) {
  :root {
    --font-size: 26px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 1620px) and (max-width: 1879px) {
  :root {
    --font-size: 28px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-width: 1880px) {
  :root {
    --font-size: 30px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}



/* website media queries */

@media (max-width: 779px) {

  /* styles for screen sizes 779px, should covers 'mobile' and 'tablet' */
  /* style this one first and then use the two others to 'override' some styles (exceptions/details) */






  /* utilities */

  /* .desktop {
    display: none !important;
  }

  .mobile {
    display: block;
  } */

}



@media (max-width: 339px) {

  /* use this query to apply style changes to smaller smartphones sizes (like an iPhone 5S or SE 2016), max size of 339px */

}

@media (min-height: 401px) and (max-height: 450px) and (orientation: landscape) {

  /* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */
  :root {
    --font-size: 14px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (min-height: 301px) and (max-height: 400px) and (orientation: landscape) {

  /* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */
  :root {
    --font-size: 12.5px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}

@media (max-height: 300px) and (orientation: landscape) {

  /* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */
  :root {
    --font-size: 11px;
  }

  html,
  body {
    font: var(--font-size) var(--font-family);
  }
}