main.css

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

:root {
  --bg-body: #1C3041;

  --button-primary-bg: #17989e;
  --button-danger-bg: #b11e1e;
  --button-default-bg: #fff;

  --input-primary-border: #2FE6DE;
  --input-primary-text-color: #2FE6DE;

  --text-color-base: #2FE6DE;
  --text-color-light: #fff;

  --font-size-base: 100%;
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  color: var(--text-color-base, #000);
  font-size: var(--font-size-base, 16px);
  font-family: var(--font-family-base, sans-serif);

  background-color: var(--bg-body);
}

.app {
  padding: 0 5vw;
}

/* Countdown */
.timer-container {
  margin-top: 200px;
  margin-bottom: 20px;
}

.timer-container h1 {
  color: white;

  font-size: 13vw;
  text-align: center;
  font-weight: 200;
}

/* Options */
.options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* Button Groups */
.button-groups {
  display: flex;
  align-items: center;
}

.button-groups .button {
  margin: 0 10px;
}

/* Buttons */
.button {
  display: inline-block;
  padding: 12px 25px;
  font-size: 18px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  background-color: var(--button-default-bg);
}

.button--primary {
  color: var(--text-color-light);
  background-color: var(--button-primary-bg);
}

.button--danger {
  color: var(--text-color-light);
  background-color: var(--button-danger-bg);
}

.button--reset {
  background-color: white;
}

/* Inputs */
.input {
  max-width: 100%;

  background-color: transparent;
  border-radius: 5px;
}

.input--primary {
  padding: 7px 15px;

  font-size: 18px;
  color: var(--input-primary-text-color);

  border: 1px solid var(--input-primary-border);
}

.input::placeholder {
  color: #bbb;
}

/* Room Link */
.room-link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 50px;

  text-align: center;
}

.room-link__label {
  display: block;
  flex: 1 0 100%;
  margin-bottom: 15px;
}

.room-link__input {
  max-width: 400px;
  width: 100%;

  text-align: center;
}

.room-link__button {
  margin: 10px;
}


/* Manager */
.manager {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.manager > div {
  width: 100%;
}

/* Start */
.start {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}