/* Our default values set as CSS variables */
:root {
  --color-bg: #B2B2B2;
  --color-text-main: #1C1C1C;
  --color-primary: #F7F7F7;
  --color-input-background: #FFFFFF;
  --color-input-border: #000000;
  --color-button-background: #07C1F5;
  --color-button-text: #F7F7F7;
  --color-button-border: #07C1F5;
  --color-button-hover: #00A0D1;
  --color-button-pressed: #007AA3;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

/******************************************************************************
END default styles
******************************************************************************/

body {
  font-family: HK Grotesk;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  padding:20px;
}

/* Inputs */
input {
  font-family: inherit;
  font-size: 100%;
  background: var(--color-input-background);
  border: 1px solid var(--color-input-border);
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem;
  transition: 500ms;
}

button {
  font-family: inherit;
  font-size: 100%;
  background: var(--color-button-background);
  color: var(--color-button-text);
  border: 0px;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0.5rem 1rem
}

button:hover {
  background-color: var(--color-button-hover);
}

button:active {
  background-color: var(--color-button-pressed);
}

/* Title */
h2 {
  color: var(--color-primary);
  padding-bottom: 4px;
  margin-bottom: 0px;
  margin-top:0px;
}

/* Subheading */
h4 {
  padding-bottom: 4px;
  margin-bottom: 0px;
  margin-top:35px;
}

ul {
  list-style-type: none;
  margin: 20;
  padding: 0;
}

li {
  border-top: 1px solid var(--color-text-main);
  padding:10px;
}