* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#souncast-player {
  height: 100%;
}

body {
  font-family: var(--lato);
  font-weight: normal;
  line-height: 1.2;
  color: var(--blue);
}

/* colors */
:root {
  --blue: #114b5f;
  --dark-blue: #0c303d;
  --turquoise-blue: #0db9d1;
  --red: #ff505d;
  --green: #27ae60;
  --blue-grey: #6d838a;
  --blue-medium-grey: #b6c1c5;
  --blue-light-grey: #dbe4e7;
  --grey: #e3e5e8;
  --medium-grey: #f2f2f2;
  --light-grey: #f5f6f9;
  --white: #ffffff;

  /* fonts */
  --poppins: "Poppins";
  --lato: "Lato";

  /* font-weight */
  --regular: 400;
  --medium: 500;
  --bold: 700;
  --heavy: 800;

  /* font-size */
  --large: 18px;
  --normal: 16px;
  --small: 14px;
  --extra-small: 12px;

  /* grid */
  --fix-padding: 7.5vw;
  --page-padding: var(--fix-padding);
  --gap-width: 1.6666666667vw;
  --side-width: 201px;
  --column-width: 5.5555555556vw;
  --column-gap-width: calc(var(--column-width) + var(--gap-width));
}