:root {
   --color-background: #f0f2f5;

   --color-primary-lighter: #caf0f8;
   --color-primary-light: #90e0ef;
   --color-primary: #00b4d8;
   --color-primary-dark: #0077b6;
   --color-primary-darker: #045885;

   --color-secondary-lighter: #c2c2c2;
   --color-secondary-light: #a3a3a3;
   --color-secondary: #6c757d;
   --color-secondary-dark: #575d63;
   --color-secondary-darker: #3d4145;

   --color-success-button: #28a745;
   --color-success-button-dark: #228c3a;

   --color-title-in-primary: #4f4f4f;
   --color-text-in-primary: #666;

   --color-title-in-secondary: #fff;
   --color-text-in-secondary: #fff;

   --color-text-in-success-button: #fff;

   --color-text-base: #fff;

   --color-generic-link: #007bff;

   --font-family-title: Montserrat, sans-seriff;
   --font-family-text: 'Baloo Tamma 2', cursive;

   font-size: 75%;
}

* {
   margin: 0;
   padding: 0;

   box-sizing: border-box;
}

html,
body,
#root {
   height: 100vh;
   width: 100vw;
}

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

#root {
   display: flex;
   align-items: center;
   justify-content: center;
}

body,
input,
button,
textarea {
   font: 400 1.4rem var(--font-family-text);
   color: var(--color-text-in-primary);
}

.container {
   display: flex;
}

.firstContainer {
   height: 100vh;
   width: 100vw;

   flex-direction: column;
   align-items: center;
}
